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 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' |
||||
|
||||
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(store) |
||||
|
||||
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