Merge branch 'main' into add-dcent-wallet

AstarNetwork · Feb 14, 2024 · 04681da · 04681da
2 parents b25c86d + e0bf6a4
commit 04681da
Show file tree

Hide file tree

Showing 45 changed files with 2,546 additions and 152 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,8 @@
     "@quasar/app-webpack": "^3.11.2",
     "@quasar/extras": "^1.16.7",
     "@vue/apollo-composable": "^4.0.0-beta.4",
+    "@walletconnect/ethereum-provider": "^2.11.0",
+    "@walletconnect/modal": "^2.6.2",
     "animate.css": "^4.1.1",
     "apr-tools": "^0.1.3",
     "axios": "^0.24.0",
@@ -90,7 +92,7 @@
     "vue3-jazzicon": "^0.1.2",
     "vue3-recaptcha2": "^1.7.0",
     "vuex": "^4.0.1",
-    "web3": "^1.7.3"
+    "web3": "^1.10.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",

diff --git a/src/App.vue b/src/App.vue
@@ -28,6 +28,12 @@
     </transition>
     <notification-stack />
 
+    <modal-onboarding
+      v-if="showOnboardingModal"
+      :set-is-open="setShowOnboardingModal"
+      :show="showOnboardingModal"
+    />
+
     <modal-disclaimer
       v-if="showDisclaimerModal"
       :set-is-open="setShowDisclaimerModal"
@@ -53,6 +59,7 @@ import ModalLoading from 'components/common/ModalLoading.vue';
 import AlertBox from 'components/common/AlertBox.vue';
 import CookiePolicy from 'components/common/CookiePolicy.vue';
 import ModalDisclaimer from 'components/common/ModalDisclaimer.vue';
+import ModalOnboarding from 'src/staking-v3/components/ModalOnboarding.vue';
 import NotificationStack from './components/common/Notification/NotificationStack.vue';
 import 'animate.css';
 import {
@@ -86,6 +93,7 @@ export default defineComponent({
     CookiePolicy,
     ModalDisclaimer,
     NotificationStack,
+    ModalOnboarding,
     ModalDecommission,
   },
   setup() {
@@ -129,6 +137,21 @@ export default defineComponent({
       showDisclaimerModal.value = isOpen;
     };
 
+    // dApp staking onboarding modal
+    const showOnboardingModal = ref<boolean>(false);
+    if (
+      !localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING) &&
+      isDappStakingV3.value
+    ) {
+      setTimeout(() => {
+        showOnboardingModal.value = true;
+      }, 2000);
+    }
+
+    const setShowOnboardingModal = (isOpen: boolean): void => {
+      showOnboardingModal.value = isOpen;
+    };
+
     const setShowDecommissionModal = (isOpen: boolean): void => {
       showDecommissionModal.value = isOpen;
     };
@@ -253,6 +276,8 @@ export default defineComponent({
       showDisclaimerModal,
       showDecommissionModal,
       setShowDisclaimerModal,
+      showOnboardingModal,
+      setShowOnboardingModal,
       setShowDecommissionModal,
     };
   },

diff --git a/src/assets/img/wallet-connect.png b/src/assets/img/wallet-connect.png
diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
@@ -92,6 +92,15 @@
             </a>
           </div>
         </div>
+        <div v-if="isWalletConnect" class="row--wc-warning">
+          <span class="text--warning">
+            {{
+              $t('assets.verifyWalletCompatibility', {
+                network: currentNetworkName.replace('Network', ''),
+              })
+            }}
+          </span>
+        </div>
       </div>
     </div>
 
@@ -113,7 +122,7 @@ import { ethers } from 'ethers';
 import { $api } from 'src/boot/api';
 import AuIcon from 'src/components/header/modals/account-unification/AuIcon.vue';
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
-import { supportWalletObj } from 'src/config/wallets';
+import { SupportWallet, supportWalletObj } from 'src/config/wallets';
 import {
   ETHEREUM_EXTENSION,
   useAccount,
@@ -168,6 +177,12 @@ export default defineComponent({
     const isEthWallet = computed<boolean>(() => store.getters['general/isEthWallet']);
 
     const { currentNetworkIdx, isZkEvm } = useNetworkInfo();
+
+    const isWalletConnect = computed<boolean>(() => {
+      const currentWallet = store.getters['general/currentWallet'];
+      return currentWallet === SupportWallet.WalletConnect;
+    });
+
     const blockscout = computed<string>(
       () =>
         `${providerEndpoints[currentNetworkIdx.value].blockscout}/address/${currentAccount.value}`
@@ -298,6 +313,7 @@ export default defineComponent({
       bg,
       currentNetworkIdx,
       currentNetworkName,
+      isWalletConnect,
       getShortenAddress,
       copyAddress,
       showAccountUnificationModal,

diff --git a/src/components/assets/styles/account.scss b/src/components/assets/styles/account.scss
@@ -50,12 +50,27 @@
   position: relative;
   z-index: 1;
 }
+
 .body--dark {
   .row--account-info {
     color: white;
   }
 }
 
+.row--wc-warning {
+  font-size: 12px;
+  bottom: 14px;
+  position: absolute;
+  @media (min-width: $sm) {
+    font-size: 14px;
+  }
+}
+
+.text--warning {
+  color: $warning-red;
+  font-weight: 700;
+}
+
 .column--account-icon {
   img {
     width: 32px;

diff --git a/src/components/dapp-staking/StakingTop.vue b/src/components/dapp-staking/StakingTop.vue
@@ -23,6 +23,7 @@
       <dapp-list category="Tooling" />
       <dapp-list category="Utility" />
       <dapp-list category="Others" />
+      <dapp-list category="unstoppable-grants" />
     </div>
 
     <Teleport to="#staking-top-bg">

diff --git a/src/components/dapp-staking/my-staking/DappList.vue b/src/components/dapp-staking/my-staking/DappList.vue
@@ -2,9 +2,9 @@
   <div v-if="dapps && dapps.length > 0" class="wrapper">
     <div class="divider" />
     <div class="wrapper--header">
-      <div class="txt--header">{{ category }}</div>
+      <div class="txt--header">{{ categoryName }}</div>
     </div>
-    <card-list :category="category" :dapps="dapps" />
+    <card-list :category="categoryName" :dapps="dapps" />
   </div>
 </template>
 <script lang="ts">
@@ -27,8 +27,14 @@ export default defineComponent({
       return dappsArray.filter((it: DappCombinedInfo) => it.dapp);
     });
 
+    const categoryName = computed<string>(() => {
+      const name = props.category.replace(/-/g, ' ');
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    });
+
     return {
       dapps,
+      categoryName,
     };
   },
 });

diff --git a/src/components/dapp-staking/my-staking/components/CardList.vue b/src/components/dapp-staking/my-staking/components/CardList.vue
@@ -183,7 +183,7 @@ export default defineComponent({
     }
 
     .badge--tag {
-      width: 54px;
+      width: 64px;
       height: 18px;
       padding: 2px 8px;
       background: $navy-3;
@@ -196,6 +196,8 @@ export default defineComponent({
       color: #fff;
       margin-top: 16px;
       margin-bottom: 16px;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     .divider {

diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
@@ -62,7 +62,7 @@ import ModalAccountUnification from 'src/components/header/modals/ModalAccountUn
 import ModalNetworkWallet from 'src/components/header/modals/ModalNetworkWallet.vue';
 import Logo from 'src/components/common/Logo.vue';
 import HeaderComp from './HeaderComp.vue';
-import { WalletModalOption } from 'src/config/wallets';
+import { SupportWallet, WalletModalOption } from 'src/config/wallets';
 import { container } from 'src/v2/common';
 import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
 import { Symbols } from 'src/v2/symbols';
@@ -125,7 +125,11 @@ export default defineComponent({
     // Memo: open the network modal if there is no wallet address stored in the browser
     const initIsModalNetworkWallet = () => {
       const selectedAddress = String(localStorage.getItem(LOCAL_STORAGE.SELECTED_ADDRESS));
-      if (!currentNetworkName.value || selectedAddress !== 'null') return;
+      const wallet = localStorage.getItem(LOCAL_STORAGE.SELECTED_WALLET);
+      const isWalletConnect = wallet === SupportWallet.WalletConnect;
+      if (!currentNetworkName.value || selectedAddress !== 'null' || isWalletConnect) {
+        return;
+      }
       isModalNetworkWallet.value = true;
     };
 

diff --git a/src/components/header/modals/ModalNetworkWallet.vue b/src/components/header/modals/ModalNetworkWallet.vue
@@ -242,7 +242,8 @@ export default defineComponent({
           ? customEndpoint.value
           : getSelectedNetwork(networkIdxRef);
 
-      const isEndpointChange = currentEndpoint !== newEndpoint;
+      // Memo: there is no new endpoint for zkEVM network
+      const isEndpointChange = newEndpoint ? currentEndpoint !== newEndpoint : false;
       return { isEndpointChange, newEndpoint };
     };
 

diff --git a/src/components/header/modals/SelectWallet.vue b/src/components/header/modals/SelectWallet.vue
@@ -13,23 +13,23 @@
           </span>
         </div>
         <div class="wrapper--wallets">
-          <button
-            v-for="(wallet, index) in evmWallets"
-            :key="index"
-            class="box__row--wallet box--hover--active"
-            :class="currentWallet === wallet.source && 'border--active'"
-            :wallet="wallet"
-            @click="setEvmWalletModal(wallet.source)"
-          >
-            <div class="box--img">
-              <img :src="wallet.img" />
-            </div>
-            <div>
-              <span>
-                {{ castWalletName(wallet.name) }}
-              </span>
-            </div>
-          </button>
+          <div v-for="(wallet, index) in evmWallets" :key="index">
+            <button
+              v-if="wallet.source !== SupportWallet.WalletConnect"
+              class="box__row--wallet box--hover--active"
+              :class="currentWallet === wallet.source && 'border--active'"
+              @click="setEvmWalletModal(wallet.source)"
+            >
+              <div class="box--img">
+                <img :src="wallet.img" />
+              </div>
+              <div>
+                <span>
+                  {{ castWalletName(wallet.name) }}
+                </span>
+              </div>
+            </button>
+          </div>
         </div>
       </div>
       <div>
@@ -121,7 +121,7 @@
         </div>
       </div>
 
-      <button :disabled="!currentAccountName" class="btn--disconnect" @click="disconnectAccount()">
+      <button :disabled="!currentWallet" class="btn--disconnect" @click="disconnectAccount()">
         {{ $t('disconnect') }}
       </button>
     </div>
@@ -255,6 +255,7 @@ export default defineComponent({
       }
     };
     const setSubstrateWalletModal = async (source: string): Promise<void> => {
+      await disconnectAccount();
       if (source === SupportWallet.Snap) {
         await handleMetaMaskSnap();
       }
@@ -268,6 +269,7 @@ export default defineComponent({
     };
 
     const setEvmWalletModal = async (source: string): Promise<void> => {
+      await disconnectAccount();
       await props.connectEthereumWallet(source);
       await props.selectNetwork();
     };
@@ -298,6 +300,7 @@ export default defineComponent({
       isAccountUnification,
       isClosing,
       isEnablePolkasafe,
+      SupportWallet,
     };
   },
 });

diff --git a/src/config/chainEndpoints.ts b/src/config/chainEndpoints.ts
@@ -44,7 +44,7 @@ export const providerEndpoints: ChainProvider[] = [
       { name: 'Dwellir', endpoint: 'wss://astar-rpc.dwellir.com' },
       { name: 'Blast', endpoint: 'wss://astar.public.blastapi.io' },
       { name: 'OnFinality', endpoint: 'wss://astar.api.onfinality.io/public-ws' },
-      { name: 'RadiumBlock', endpoint: 'wss://astar.public.curie.radiumblock.co/ws' },
+      // { name: 'RadiumBlock', endpoint: 'wss://astar.public.curie.radiumblock.co/ws' },
       { name: 'Light Client (experimental)', endpoint: 'light://substrate-connect/polkadot/astar' },
     ],
     isSupportContract: true,
@@ -73,7 +73,7 @@ export const providerEndpoints: ChainProvider[] = [
       { name: 'Dwellir', endpoint: 'wss://shiden-rpc.dwellir.com' },
       { name: 'Blast', endpoint: 'wss://shiden.public.blastapi.io' },
       { name: 'OnFinality', endpoint: 'wss://shiden.api.onfinality.io/public-ws' },
-      { name: 'RadiumBlock', endpoint: 'wss://shiden.public.curie.radiumblock.co/ws' },
+      // { name: 'RadiumBlock', endpoint: 'wss://shiden.public.curie.radiumblock.co/ws' },
       { name: 'Light Client (experimental)', endpoint: 'light://substrate-connect/kusama/shiden' },
     ],
     isSupportContract: true,

diff --git a/src/config/localStorage.ts b/src/config/localStorage.ts
@@ -20,6 +20,7 @@ export enum LOCAL_STORAGE {
   THEME_COLOR = 'themeColor',
   IS_LEDGER = 'isLedger',
   MULTISIG = 'multisig',
+  CLOSE_DAPP_STAKING_V3_ONBOARDING = 'closeDappStakingV3Onboarding',
   DECOMMISSION = 'decommission',
 }
 

diff --git a/src/config/wallets.ts b/src/config/wallets.ts
@@ -27,6 +27,7 @@ export enum SupportWallet {
   Snap = 'Snap',
   EnkryptEvm = 'enkryptEvm',
   EnkryptNative = 'enkrypt',
+  WalletConnect = 'wallet-connect',
   Dcent = 'DcentWallet',
   DcentEvm = 'DcentWalletEvm',
 }
@@ -306,6 +307,16 @@ export const supportEvmWalletObj = {
     isSupportMobileApp: false,
     ethExtension: 'enkrypt.providers.ethereum',
   },
+  [SupportWallet.WalletConnect]: {
+    img: require('/src/assets/img/wallet-connect.png'),
+    name: 'WalletConnect',
+    source: SupportWallet.WalletConnect,
+    walletUrl: 'https://walletconnect.com/',
+    guideUrl: 'https://walletconnect.com/',
+    isSupportBrowserExtension: true,
+    isSupportMobileApp: false,
+    ethExtension: SupportWallet.WalletConnect,
+  },
   [SupportWallet.DcentEvm]: {
     img: require('/src/assets/img/icon_dcent.png'),
     name: "D'CENT Wallet (EVM)",