From 323d708d0991c5dc4edafdaa1153c604e6c4a943 Mon Sep 17 00:00:00 2001 From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com> Date: Mon, 24 Jun 2024 11:59:49 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 5 + src/components/chain/BlockChain.js | 85 +++++++-- src/components/chain/Market.js | 6 +- src/components/chain/WalletSelectModel.vue | 161 ++++++++++-------- src/components/chain/wallet/MetaMaskWallet.js | 31 ++++ src/components/chain/wallet/OkxWallet.js | 25 +++ .../chain/{ => wallet}/PassportWallet.js | 17 +- src/components/layout/NavBar.vue | 29 ++-- src/main.js | 3 - src/store/wallet.js | 34 ++++ 10 files changed, 282 insertions(+), 114 deletions(-) create mode 100644 src/components/chain/wallet/MetaMaskWallet.js create mode 100644 src/components/chain/wallet/OkxWallet.js rename src/components/chain/{ => wallet}/PassportWallet.js (84%) create mode 100644 src/store/wallet.js diff --git a/src/App.vue b/src/App.vue index db24ec2..4aa5c6d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,6 +12,7 @@ import Notification from './components/global/Notification.vue' import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; +import { BlockChain } from '@/components/chain/BlockChain'; gsap.registerPlugin(ScrollTrigger); @@ -21,6 +22,10 @@ const notification = ref(null); provide('addNotification', (title, message) => { notification.value.addNotification(title, message); }); + +onMounted(() => { + new BlockChain().preparePassport(); +}); diff --git a/src/components/chain/wallet/MetaMaskWallet.js b/src/components/chain/wallet/MetaMaskWallet.js new file mode 100644 index 0000000..30cf2d0 --- /dev/null +++ b/src/components/chain/wallet/MetaMaskWallet.js @@ -0,0 +1,31 @@ +import { providers } from "ethers" + +export class MetaMaskWallet{ + constructor() { + if (MetaMaskWallet.instance) { + return MetaMaskWallet.instance; + } + MetaMaskWallet.instance = this; + this._nativeProvider = window.ethereum; + } + + get nativeProvider() { + return this._nativeProvider + } + async web3Provider() { + const provider = new providers.Web3Provider(this.nativeProvider); + const accounts = await this.nativeProvider.request({ method: "eth_requestAccounts" }); + return { provider, accounts }; + } + + async logout() { + await this.nativeProvider.request({ + "method": "wallet_revokePermissions", + "params": [ + { + "eth_accounts": {} + } + ] + }); + } +} \ No newline at end of file diff --git a/src/components/chain/wallet/OkxWallet.js b/src/components/chain/wallet/OkxWallet.js new file mode 100644 index 0000000..985cad5 --- /dev/null +++ b/src/components/chain/wallet/OkxWallet.js @@ -0,0 +1,25 @@ +import { providers } from "ethers" + +export class OkxWallet{ + constructor() { + if (OkxWallet.instance) { + return OkxWallet.instance; + } + OkxWallet.instance = this; + this._nativeProvider = window.okxwallet; + } + + get nativeProvider() { + return this._nativeProvider + } + + async web3Provider() { + const provider = new providers.Web3Provider(this.nativeProvider); + const accounts = await this.nativeProvider.request({ method: "eth_requestAccounts" }); + return { provider, accounts }; + } + + async logout() { + await this.nativeProvider.request({ method: 'wallet_disconnect' }); + } +} \ No newline at end of file diff --git a/src/components/chain/PassportWallet.js b/src/components/chain/wallet/PassportWallet.js similarity index 84% rename from src/components/chain/PassportWallet.js rename to src/components/chain/wallet/PassportWallet.js index 5e2887f..9a9a6f8 100644 --- a/src/components/chain/PassportWallet.js +++ b/src/components/chain/wallet/PassportWallet.js @@ -1,5 +1,4 @@ import { config, passport, orderbook, checkout } from '@imtbl/sdk'; -import { createSingleton } from '@/utils/singleton'; import { providers } from 'ethers'; const environment = process.env.NODE_ENV === 'production' ? config.Environment.PRODUCTION : config.Environment.SANDBOX; @@ -10,8 +9,12 @@ const logoutRedirectUri = import.meta.env.VUE_APP_PASSPORT_LOGOUT_URI export const baseConfig = { environment, publishableKey } -class LPassportWallet { +export class PassportWallet { constructor() { + if (PassportWallet.instance) { + return PassportWallet.instance; + } + PassportWallet.instance = this; this.passportInstance = new passport.Passport({ baseConfig, clientId, // replace with your client ID from Hub @@ -55,9 +58,13 @@ class LPassportWallet { return this.passportInstance.connectEvm(); } - get web3Provider() { + async web3Provider() { const passportProvider = this.passportInstance.connectEvm(); - return new providers.Web3Provider(passportProvider); + const accounts = await passportProvider.request({ method: "eth_requestAccounts" }); + const provider = new providers.Web3Provider(passportProvider); + let accessToken = await this.passportInstance.getAccessToken() + console.log(`accesstoken`, accessToken) + return { provider, accounts }; } @@ -70,5 +77,3 @@ class LPassportWallet { } } - -export const PassportWallet = createSingleton(LPassportWallet) \ No newline at end of file diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index a75b5b7..06e4677 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -40,12 +40,12 @@
-
7
+
7
-
Login
+
Login
-
{{ formatAddress }}
+
{{ localWalletStore.showAddress }}
Logout
@@ -75,7 +75,10 @@ import WalletSelectModel from "@/components/chain/WalletSelectModel.vue" import { createModal } from "@/utils/model.util" import Cart from "@/components/cart/index.vue" +import { BlockChain } from "../chain/BlockChain"; +import {walletStore} from "@/store/wallet"; +const localWalletStore = walletStore() const immutableStore = useImmutableStore() const marketplaceStore = useMarketplaceStore() const AppModule = useAppStore(); @@ -230,10 +233,11 @@ watchEffect(() => { // -------------------------------- const immuTableLogin = async () => { - let rewardModal = createModal(WalletSelectModel, {}) + // let rewardModal = createModal(WalletSelectModel, {}) - let result = await rewardModal.show() - console.log(`select result : ${result.errcode}`) + // let result = await rewardModal.show() + // console.log(`select result : ${result.errcode}`) + await new BlockChain().connect() // try{ // const walletLogin = await new PassportWallet().connect() // immutableStore.accessToken = walletLogin.accessToken @@ -257,14 +261,15 @@ const immuTableLogin = async () => { // console.log(e); // } } - +//TODO:: const immuTableLogout = async () => { try { - localStorage.removeItem('assessToken') - localStorage.removeItem('assessAddress') - immutableStore.accessToken = '' - immutableStore.accounts = '' - await new PassportWallet().logout() + await new BlockChain().logout() + // localStorage.removeItem('assessToken') + // localStorage.removeItem('assessAddress') + // immutableStore.accessToken = '' + // immutableStore.accounts = '' + // await new PassportWallet().logout() } catch (e) { console.log(e) } diff --git a/src/main.js b/src/main.js index f12662f..51b7f59 100644 --- a/src/main.js +++ b/src/main.js @@ -18,9 +18,6 @@ import { notification } from 'ant-design-vue'; import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' -import { BlockChain } from '@/components/chain/BlockChain'; -new BlockChain().preparePassport(); - const pinia = createPinia() pinia.use(piniaPluginPersistedstate) diff --git a/src/store/wallet.js b/src/store/wallet.js new file mode 100644 index 0000000..cea342e --- /dev/null +++ b/src/store/wallet.js @@ -0,0 +1,34 @@ +import {defineStore} from "pinia"; +import {ref, computed} from "vue"; + +export const walletStore = defineStore( + "localwallet", + () => { + const walletType = ref(); + const address = ref(); + const chainId = ref(); + + const showAddress = computed(() => { + if (address.value.length > 10) { + return `${address.value.slice(0, 6)}...${address.value.slice(-4)}`; + } else { + return address.value + } + }) + function reset() { + walletType.value = ''; + address.value = ''; + chainId.value = ''; + } + return { + walletType, + address, + chainId, + showAddress, + reset, + }; + }, + { + persist: true, + } +);