Aleksandr Bautin
1 year ago
5 changed files with 109 additions and 88 deletions
@ -1,100 +1,112 @@
|
||||
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' |
||||
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) |
||||
const app = createApp(App); |
||||
|
||||
class State { |
||||
connector: TonConnect; |
||||
walletList: WalletInfo[] = []; |
||||
initialization: Promise<void>; |
||||
connector: TonConnect; |
||||
walletList: WalletInfo[] = []; |
||||
initialization: Promise<void>; |
||||
|
||||
constructor() { |
||||
this.connector = new TonConnect({manifestUrl: 'https://front.agorata.io/tonconnect-manifest.json'}); |
||||
this.initialization = this.initialize(); |
||||
} |
||||
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(); |
||||
} |
||||
async initialize() { |
||||
await this.connector.restoreConnection(); |
||||
this.walletList = await this.connector.getWallets(); |
||||
} |
||||
} |
||||
|
||||
const store = createStore({ |
||||
state() { |
||||
return new State() |
||||
state() { |
||||
return new State(); |
||||
}, |
||||
mutations: { |
||||
set_connector(state, connector) { |
||||
state.connector = connector; |
||||
}, |
||||
mutations: { |
||||
set_connector(state, connector) { |
||||
state.connector = connector |
||||
} |
||||
}, |
||||
getters: { |
||||
is_connected(state) { |
||||
return state.connector.connected; |
||||
}, |
||||
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 ''; |
||||
} |
||||
} |
||||
address(state) { |
||||
if ( |
||||
state.connector.account !== null && |
||||
state.connector.account.address !== undefined |
||||
) { |
||||
return state.connector.account.address; |
||||
} else { |
||||
return ""; |
||||
} |
||||
}, |
||||
connector(state) { |
||||
return state.connector; |
||||
}, |
||||
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; |
||||
console.log(walletsList, embeddedWallet); |
||||
}, |
||||
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; |
||||
console.log(walletsList, embeddedWallet); |
||||
|
||||
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; |
||||
}, |
||||
async disconnect({state}) { |
||||
await state.connector.disconnect(); |
||||
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; |
||||
}, |
||||
async disconnect({ state }) { |
||||
await state.connector.disconnect(); |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
app.use(router) |
||||
app.use(store) |
||||
app.use(router); |
||||
app.use(store); |
||||
|
||||
app.mount('#app') |
||||
app.mount("#app"); |
||||
|
Loading…
Reference in new issue