修改样式

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();
+});
 </script>
 
 <style lang="scss">

src/components/chain/BlockChain.js

@@ -1,20 +1,71 @@
-import {PassportWallet} from '@/components/chain/PassportWallet';
-import { createSingleton } from '@/utils/singleton';
+import {PassportWallet} from "@/components/chain/wallet/PassportWallet";
+import { MetaMaskWallet } from '@/components/chain/wallet/MetaMaskWallet';
+import { OkxWallet } from '@/components/chain/wallet/OkxWallet'; 
+import {walletStore} from "@/store/wallet";
+import WalletSelectModel from "@/components/chain/WalletSelectModel.vue";
+import {createModal} from "@/utils/model.util";
+import {ImtblMarket} from "@/components/chain/Market";
 
-const LOCAL_WALLET_KEY = 'wallet_type';
-
-class CBlockChain {
-  constructor() {
-
-  };
-
-  initWallet() {
-    console.log('init wallet')
-  };
-
-  preparePassport() {
-    new PassportWallet()
-  };
+export const allProviders = {
+  1: MetaMaskWallet,
+  2: OkxWallet,
+  3: PassportWallet
 }
 
-export const BlockChain = createSingleton(CBlockChain);
+export class BlockChain {
+  constructor() {
+    if (BlockChain.instance) {
+      return BlockChain.instance;
+    }
+    this.store = walletStore();
+    this.store.$hydrate({runHooks: false});
+    this.initWallet();
+    BlockChain.instance = this;
+    this.market = new ImtblMarket()
+  }
+
+  initWallet() {
+    console.log("init blockchain instance");
+    console.log(this.store.address);
+    if (!this.store.address) {
+      console.log("no wallet login");
+      return;
+    } else {
+      this.restoreWallet(this.store.walletType)
+    }
+  }
+
+  preparePassport() {
+    new PassportWallet();
+  }
+
+  async restoreWallet(walletType) {
+    this.wallet = new allProviders[walletType]();
+    const { provider } = await this.wallet.web3Provider();
+    this.provider = provider
+    this.market.updateProvider(provider);
+    return provider;
+  }
+
+  async connect() {
+    const rewardModal = createModal(WalletSelectModel, {});
+    let result = await rewardModal.show();
+    if (!result.errcode) {
+      this.provider = result.provider;
+      this.market.updateProvider(this.provider);
+      this.wallet = new allProviders[result.wallet]();
+      this.store.walletType = result.wallet;
+      this.store.address = result.accounts[0];
+      this.store.$persist();
+    } else {
+      console.log(`select result : ${result.errmsg}`);
+      throw new Error(result.errmsg);
+    }
+  }
+
+  async logout() {
+    this.store.reset();
+    this.store.$persist();
+    await this.wallet.logout();
+  }
+}

src/components/chain/Market.js

@@ -1,11 +1,11 @@
-import { baseConfig } from './PassportWallet';
+import { baseConfig } from './wallet/PassportWallet';
 import { orderbook } from '@imtbl/sdk';
 const marketAddress = import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
 
 const NATIVE = 'NATIVE'
 const ERC20 = 'ERC20'
 
-class ImtblMarket {
+export class ImtblMarket {
   constructor() {
     this.client = new orderbook.Orderbook({ baseConfig });
   }
@@ -218,5 +218,3 @@ class ImtblMarket {
     return receipt;
   }
 }
-
-export const Market = createSingleton(ImtblMarket)

src/components/chain/WalletSelectModel.vue

@@ -2,8 +2,19 @@
   <div class="chain-modal" v-if="props.visible" :class="{ mobile: 'mobile' }">
     <div class="modal-bg" @click="cancelSelect"></div>
     <div class="modal-content" :class="{ mobile: 'mobile' }">
-      <div class="modal-title">You need to connect to supported network</div>
-      <div
+      <div class="modal-title">
+        <div>Please connect your wallet</div>
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAAAXNSR0IArs4c6QAAApVJREFUWEe1lj1v01AUht9zEygDA0tYYAIJVWJL3KGtUZyFAQYWggQSqkgkhuQPMDDDHwBRYKIoHaJOSIgBNUlxUoY4KQtiRvwCFopEfA+yG4fE9ce1ayJPubrnffyeDx8CgE8d62ZO0GMiOM+T1XLxnfN/1r/BrnUdOXrkxGXIp7qx8pFMc3gpJ8U3ZpyeCtoAPVg3im+zBBh0h7dBYhvAqWnc37Bpmfp71j1iavnEbEmydq28spUFRID4UVimu2SaX64I2/4KIP8/IELFAZvz+avkiO7vjWvM/BqAyBIiQpyZuaFXtE0XwIXojutM/CoriChxgJvrhvbC0Z0BZAmhKn4MIAuIJOKBACeBSCoeCuAc9LvDOpEIrAkiqq2Viwstau5aVZFz29nrc6+8eD7n/rZeqAH/oSpEWvFIBzyYOAh7Ig/TvLkXP9IBFQgAMsh2wdRYrRQ34yapEkBMTfg1WFVcKQXz0SPSMSu4JOKJAZwLg97oJYCHQdYSaGvNKG7E2T5/rpwC55LZs6oC2AbI/+HyYtpBLRoFpAygID6DYOa6XtHeqDihBBAhzu5yE/AVVYWIBYgSdwrOhv0nbGKqQEQC7PcOqgw7KOcLrRY1rOIgQgHCxIlISomm7hsyaSECAZKKq0zMMCeOAaQVTwuxuBGF5DzM9rA2i9oxmbiul/+16Ayg3xndIcEt/5BJKu5BqUK4AIPO8BaE2PGv5mnFlSAYG3ql1DoC6Fk/ALq4MKPdapdNZ3VWmWgp0vHzXOHMeWJmGvTGh0RYmi0JGYnHOMH5yaQwdWD0HEBjekEy84nf3O+IvyYY+KAbpRsuQLvdzl0oXL4P0DITv9eNknkS28Pufu4eGJJkFcD3pbP8TNO0X38BHAnKrhM25C0AAAAASUVORK5CYII="
+          alt="close"
+          class="close"
+          @click="cancelSelect"/>
+      </div>
+      <div class="modal-sub-title">
+        Connect your wallet to start your Counter Fire journey
+      </div>
+      <div class="modal-body">
+        <div
         class="chain-modal-card"
         v-for="data in currentDatas"
         :key="data.name"
@@ -13,39 +24,36 @@
           <img :src="data.logo" :alt="data.name" />
         </div>
         <div class="name">{{ data.name }}</div>
-        <div class="desc">{{ data.desc }}</div>
       </div>
+      </div>
+      
     </div>
   </div>
 </template>
 <script setup>
 import { computed } from "vue";
 import { ALL_PROVIDERS } from "@/configs/configchain";
-import { PassportWallet } from '@/components/chain/PassportWallet';
-import { providers } from "ethers"
+import { allProviders } from "@/components/chain/BlockChain"
+
+import {walletStore} from "@/store/wallet";
+
+const localWalletStore = walletStore()
 
 const props = defineProps({
   visible: Boolean,
   close: Function,
 });
 
-const allProviders = {
-  1: window.ethereum,
-  2: window.okxwallet,
-  3: new PassportWallet().nativeProvider
-}
-
 const currentDatas = computed(() => {
   return ALL_PROVIDERS;
 });
 
 async function cardClicked(id) {
   console.log("card clicked:", id);
-  const provider = allProviders[id];
-  const web3Provider = new providers.Web3Provider(provider);
-  const accounts = await web3Provider.provider.request({ method: "eth_requestAccounts" });
+  const Provider = allProviders[id];
+  const { provider, accounts } = await new Provider().web3Provider();
   console.log(accounts)
-  hideModal({errcode: 0, provider: web3Provider, wallet: id, accounts});
+  hideModal({errcode: 0, provider, wallet: id, accounts});
 }
 
 function cancelSelect() {
@@ -77,84 +85,93 @@ function hideModal(result = null) {
     background-color: #000000a3;
   }
   .modal-content {
-    width: 500px;
-    max-height: 400px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    width: 31.25vw;
+    background-color: #2d2738;
+    border-radius: 20px;
+    color: white;
     margin: auto;
     display: flex;
+    position: relative;
+    margin-top: 15vh;
     flex-direction: column;
     .mobile {
       width: 100vw;
     }
     .modal-title {
-      background-color: rgb(255, 255, 255);
-      color: black;
       border-radius: 12px 12px 0 0;
       padding: 15px 20px;
       border-bottom: 1px solid rgba(195, 195, 195, 0.14);
-    }
-    .chain-modal-card {
-      background-color: rgb(255, 255, 255);
-      transition: background-color 0.2s ease-in-out 0s;
       display: flex;
-      flex-direction: column;
-      -webkit-box-pack: center;
-      justify-content: center;
-      -webkit-box-align: center;
+      flex-direction: row;
       align-items: center;
-      padding: 24px 16px;
-      text-align: center;
-      cursor: pointer;
-      &:first-child {
-        border-radius: 12px 12px 0 0;
-      }
-      &:not(:first-child) {
-        border-top: 1px solid rgba(195, 195, 195, 0.14);
-      }
-      &:last-child {
-        border-radius: 0 0 12px 12px;
-      }
-      .icon {
-        width: 45px;
-        height: 45px;
+      justify-content: space-between;
+    }
+    .modal-sub-title {
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(195, 195, 195, 0.14);
+      font-size: 16px;
+      font-weight: 400;
+    }
+    .modal-body {
+      padding: 0 1.5625vw 1.04167vw;
+      .chain-modal-card {
+        transition: background-color 0.2s ease-in-out 0s;
         display: flex;
-        border-radius: 50%;
-        overflow: visible;
-        box-shadow: none;
+        flex-direction: row;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
-        img {
-          width: 100%;
-          height: 100%;
+        padding: .78125vw 1.5625vw;
+        text-align: center;
+        cursor: pointer;
+        border: .10417vw solid #625a6b;
+        border-radius: .41667vw;
+        padding: .78125vw 1.5625vw;
+        margin: 1.04167vw 0;
+        // &:first-child {
+        //   border-radius: 12px 12px 0 0;
+        // }
+        // &:not(:first-child) {
+        //   border-top: 1px solid rgba(195, 195, 195, 0.14);
+        // }
+        // &:last-child {
+        //   border-radius: 0 0 12px 12px;
+        // }
+        .icon {
+          width: 45px;
+          height: 45px;
+          display: flex;
+          border-radius: 50%;
+          overflow: visible;
+          box-shadow: none;
+          -webkit-box-pack: center;
+          justify-content: center;
+          -webkit-box-align: center;
+          align-items: center;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+          .icon-svg {
+            width: 100%;
+            height: 100%;
+            fill: currentColor;
+            color: unset;
+            stroke: none;
+          }
         }
-        .icon-svg {
-          width: 100%;
-          height: 100%;
-          fill: currentColor;
-          color: unset;
-          stroke: none;
+        .name {
+          width: 80%;
+          font-size: 24px;
+          font-weight: 700;
+          margin-top: 0.5em;
+          text-align: left;
+          margin-left: 20px;
         }
       }
-      .name {
-        width: 100%;
-        font-size: 24px;
-        font-weight: 700;
-        margin-top: 0.5em;
-        color: rgb(12, 12, 13);
-      }
-      .desc {
-        width: 100%;
-        font-size: 18px;
-        margin: 0.333em 0px;
-        color: rgb(169, 169, 188);
-      }
     }
+    
   }
 }
 </style>

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": {}
+        }
+      ]
+    });
+  }
+}

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' });
+  }
+}

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)

src/components/layout/NavBar.vue

@@ -40,12 +40,12 @@
           <div class="immutable-cart-img">
             <img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
           </div>
-          <div v-if="immutableStore.accessToken" class="immutable-cart-amount">7</div>
+          <div v-if="localWalletStore.address" class="immutable-cart-amount">7</div>
         </div>
-        <div class="metaMask-login" v-if="!immutableStore.accessToken" @click="immuTableLogin">Login</div>
+        <div class="metaMask-login" v-if="!localWalletStore.address" @click="immuTableLogin">Login</div>
         <div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
           <div class="matamask">
-            <div class="title">{{ formatAddress }}</div>
+            <div class="title">{{ localWalletStore.showAddress }}</div>
           </div>
           <div class="menu" v-show="showMenu">
             <div class="menu-item" @click="immuTableLogout">Logout</div>
@@ -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)
   }

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)
 

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,
+  }
+);