Aleksandr Bautin
11 months ago
5 changed files with 109 additions and 88 deletions
@ -1,100 +1,112 @@ |
|||||||
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 { createStore } from "vuex"; |
||||||
import TonConnect from '@tonconnect/sdk'; |
import TonConnect from "@tonconnect/sdk"; |
||||||
import {isWalletInfoInjected} from '@tonconnect/sdk'; |
import { isWalletInfoInjected } from "@tonconnect/sdk"; |
||||||
import type {WalletInfo, WalletInfoInjected, WalletInfoRemote} from '@tonconnect/sdk'; |
import type { |
||||||
import './assets/main.css' |
WalletInfo, |
||||||
|
WalletInfoInjected, |
||||||
|
WalletInfoRemote, |
||||||
|
} from "@tonconnect/sdk"; |
||||||
|
import "./assets/main.css"; |
||||||
|
|
||||||
const app = createApp(App) |
const app = createApp(App); |
||||||
|
|
||||||
class State { |
class State { |
||||||
connector: TonConnect; |
connector: TonConnect; |
||||||
walletList: WalletInfo[] = []; |
walletList: WalletInfo[] = []; |
||||||
initialization: Promise<void>; |
initialization: Promise<void>; |
||||||
|
|
||||||
constructor() { |
constructor() { |
||||||
this.connector = new TonConnect({manifestUrl: 'https://front.agorata.io/tonconnect-manifest.json'}); |
this.connector = new TonConnect({ |
||||||
this.initialization = this.initialize(); |
manifestUrl: "https://front.agorata.io/tonconnect-manifest.json", |
||||||
} |
}); |
||||||
|
this.initialization = this.initialize(); |
||||||
|
} |
||||||
|
|
||||||
async initialize() { |
async initialize() { |
||||||
await this.connector.restoreConnection(); |
await this.connector.restoreConnection(); |
||||||
this.walletList = await this.connector.getWallets(); |
this.walletList = await this.connector.getWallets(); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const store = createStore({ |
const store = createStore({ |
||||||
state() { |
state() { |
||||||
return new State() |
return new State(); |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
set_connector(state, connector) { |
||||||
|
state.connector = connector; |
||||||
}, |
}, |
||||||
mutations: { |
}, |
||||||
set_connector(state, connector) { |
getters: { |
||||||
state.connector = connector |
is_connected(state) { |
||||||
} |
return state.connector.connected; |
||||||
}, |
}, |
||||||
getters: { |
address(state) { |
||||||
is_connected(state) { |
if ( |
||||||
return state.connector.connected; |
state.connector.account !== null && |
||||||
}, |
state.connector.account.address !== undefined |
||||||
address(state) { |
) { |
||||||
if (state.connector.account !== null && state.connector.account.address !== undefined) { |
return state.connector.account.address; |
||||||
return state.connector.account.address; |
} else { |
||||||
} else { |
return ""; |
||||||
return ''; |
} |
||||||
} |
}, |
||||||
} |
connector(state) { |
||||||
|
return state.connector; |
||||||
}, |
}, |
||||||
actions: { |
}, |
||||||
async connect_embedded({state}) { |
actions: { |
||||||
const walletsList = await TonConnect.getWallets(); |
async connect_embedded({ state }) { |
||||||
let connector = state.connector; |
const walletsList = await TonConnect.getWallets(); |
||||||
const embeddedWallet = walletsList.find( |
let connector = state.connector; |
||||||
wallet => isWalletInfoInjected(wallet) && wallet.embedded |
const embeddedWallet = walletsList.find( |
||||||
) as WalletInfoInjected; |
(wallet) => isWalletInfoInjected(wallet) && wallet.embedded |
||||||
console.log(walletsList, embeddedWallet); |
) as WalletInfoInjected; |
||||||
|
console.log(walletsList, embeddedWallet); |
||||||
|
|
||||||
if (embeddedWallet) { |
if (embeddedWallet) { |
||||||
connector.connect({jsBridgeKey: embeddedWallet.jsBridgeKey}); |
connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey }); |
||||||
} |
} |
||||||
}, |
}, |
||||||
/* Connect embedded wallet if it exists, otherwise get connection url for a QR code unless we're already connected */ |
/* 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> { |
async get_connection_url({ state }): Promise<string | null> { |
||||||
await state.initialization; |
await state.initialization; |
||||||
await this.dispatch('connect_embedded'); |
await this.dispatch("connect_embedded"); |
||||||
if (state.connector.connected) { |
if (state.connector.connected) { |
||||||
return null; |
return null; |
||||||
} |
} |
||||||
let walletList = this.state.walletList as WalletInfo[]; |
let walletList = this.state.walletList as WalletInfo[]; |
||||||
if (walletList.length === 0) { |
if (walletList.length === 0) { |
||||||
return null; |
return null; |
||||||
} |
} |
||||||
/* iterate through wallets and do try-catch */ |
/* iterate through wallets and do try-catch */ |
||||||
for (let wallet of walletList) { |
for (let wallet of walletList) { |
||||||
try { |
try { |
||||||
let wallet_r = wallet as WalletInfoRemote; |
let wallet_r = wallet as WalletInfoRemote; |
||||||
let wallet_desc = { |
let wallet_desc = { |
||||||
bridgeUrl: wallet_r.bridgeUrl, |
bridgeUrl: wallet_r.bridgeUrl, |
||||||
universalLink: wallet_r.universalLink |
universalLink: wallet_r.universalLink, |
||||||
} |
}; |
||||||
let res = await state.connector.connect(wallet_desc); |
let res = await state.connector.connect(wallet_desc); |
||||||
if (typeof res === 'string') { |
if (typeof res === "string") { |
||||||
return res; |
return res; |
||||||
} |
} |
||||||
} catch (e) { |
} catch (e) { |
||||||
console.log(wallet, e) |
console.log(wallet, e); |
||||||
} |
|
||||||
} |
|
||||||
return null; |
|
||||||
}, |
|
||||||
async disconnect({state}) { |
|
||||||
await state.connector.disconnect(); |
|
||||||
} |
} |
||||||
} |
} |
||||||
}) |
return null; |
||||||
|
}, |
||||||
|
async disconnect({ state }) { |
||||||
|
await state.connector.disconnect(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
app.use(router) |
app.use(router); |
||||||
app.use(store) |
app.use(store); |
||||||
|
|
||||||
app.mount('#app') |
app.mount("#app"); |
||||||
|
Loading…
Reference in new issue