9 changed files with 254 additions and 75 deletions
@ -1,11 +1,97 @@ |
|||||||
import { createApp } from 'vue' |
import {createApp} from 'vue' |
||||||
import App from './App.vue' |
import App from './App.vue' |
||||||
import router from './router' |
import router from './router' |
||||||
|
import {createStore} from 'vuex' |
||||||
|
import TonConnect from '@tonconnect/sdk'; |
||||||
|
import {isWalletInfoInjected} from '@tonconnect/sdk'; |
||||||
|
import type {WalletInfo, WalletInfoInjected, WalletInfoRemote} from '@tonconnect/sdk'; |
||||||
|
|
||||||
import './assets/main.css' |
import './assets/main.css' |
||||||
|
|
||||||
const app = createApp(App) |
const app = createApp(App) |
||||||
|
|
||||||
|
class State { |
||||||
|
connector: TonConnect; |
||||||
|
walletList: WalletInfo[] = []; |
||||||
|
initialization: Promise<void>; |
||||||
|
|
||||||
|
constructor() { |
||||||
|
this.connector = new TonConnect({manifestUrl: 'https://front.agorata.io/tonconnect-manifest.json'}); |
||||||
|
this.initialization = this.initialize(); |
||||||
|
} |
||||||
|
|
||||||
|
async initialize() { |
||||||
|
await this.connector.restoreConnection(); |
||||||
|
this.walletList = await this.connector.getWallets(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const store = createStore({ |
||||||
|
state() { |
||||||
|
return new State() |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
set_connector(state, connector) { |
||||||
|
state.connector = connector |
||||||
|
} |
||||||
|
}, |
||||||
|
getters: { |
||||||
|
is_connected(state) { |
||||||
|
return state.connector.connected; |
||||||
|
}, |
||||||
|
address(state) { |
||||||
|
if (state.connector.account !== null && state.connector.account.address !== undefined) { |
||||||
|
return state.connector.account.address; |
||||||
|
} else { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
async connect_embedded({state}) { |
||||||
|
const walletsList = await TonConnect.getWallets(); |
||||||
|
let connector = state.connector; |
||||||
|
const embeddedWallet = walletsList.find( |
||||||
|
wallet => isWalletInfoInjected(wallet) && wallet.embedded |
||||||
|
) as WalletInfoInjected; |
||||||
|
|
||||||
|
if (embeddedWallet) { |
||||||
|
connector.connect({jsBridgeKey: embeddedWallet.jsBridgeKey}); |
||||||
|
} |
||||||
|
}, |
||||||
|
/* Connect embedded wallet if it exists, otherwise get connection url for a QR code unless we're already connected */ |
||||||
|
async get_connection_url({state}): Promise<string | null> { |
||||||
|
await state.initialization; |
||||||
|
await this.dispatch('connect_embedded'); |
||||||
|
if (state.connector.connected) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
let walletList = this.state.walletList as WalletInfo[]; |
||||||
|
if (walletList.length === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
/* iterate through wallets and do try-catch */ |
||||||
|
for (let wallet of walletList) { |
||||||
|
try { |
||||||
|
let wallet_r = wallet as WalletInfoRemote; |
||||||
|
let wallet_desc = { |
||||||
|
bridgeUrl: wallet_r.bridgeUrl, |
||||||
|
universalLink: wallet_r.universalLink |
||||||
|
} |
||||||
|
let res = await state.connector.connect(wallet_desc); |
||||||
|
if (typeof res === 'string') { |
||||||
|
return res; |
||||||
|
} |
||||||
|
} catch (e) { |
||||||
|
console.log(wallet, e) |
||||||
|
} |
||||||
|
} |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
app.use(router) |
app.use(router) |
||||||
|
app.use(store) |
||||||
|
|
||||||
app.mount('#app') |
app.mount('#app') |
||||||
|
|||||||
@ -0,0 +1,36 @@ |
|||||||
|
export function qr_options(url: string, imageSize: number = 0.4, imageMargin: number = 3, margin: number = 10): any { |
||||||
|
return { |
||||||
|
width: 300, |
||||||
|
height: 300, |
||||||
|
type: 'svg', |
||||||
|
data: url, |
||||||
|
image: '/logo_mono.png', |
||||||
|
margin: margin, |
||||||
|
qrOptions: { |
||||||
|
typeNumber: 0, |
||||||
|
mode: 'Byte', |
||||||
|
errorCorrectionLevel: 'Q' |
||||||
|
}, |
||||||
|
imageOptions: { |
||||||
|
hideBackgroundDots: true, |
||||||
|
imageSize: imageSize, |
||||||
|
margin: imageMargin, |
||||||
|
crossOrigin: 'anonymous', |
||||||
|
}, |
||||||
|
dotsOptions: { |
||||||
|
color: '#282e46', |
||||||
|
type: 'rounded' |
||||||
|
}, |
||||||
|
backgroundOptions: { |
||||||
|
color: '#ffffff', |
||||||
|
}, |
||||||
|
cornersSquareOptions: { |
||||||
|
color: '#282e46', |
||||||
|
type: 'extra-rounded', |
||||||
|
}, |
||||||
|
cornersDotOptions: { |
||||||
|
color: '#282e46', |
||||||
|
type: 'dot', |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue