feat: enhance restricted address handling in App.vue and index.vue

packages/extension/env.d.ts

@@ -1,12 +1,5 @@
 /// <reference types="vite/client" />
 
-export namespace NodeJS {
-  export interface ProcessEnv {
-    BROWSER: 'chrome' | 'firefox' | 'edge' | 'opera' | 'safari';
-    MINIFY: 'true' | 'false';
-  }
-}
-
 declare module '*.svg' {
   const content: string;
   export default content;
@@ -20,3 +13,8 @@ declare let __IS_OPERA__: boolean;
 declare let __IS_CHROME__: boolean;
 declare let __IS_SAFARI__: boolean;
 declare let __BUILD_TIME__: string;
+
+interface Window {
+  // Declare your custom global variable here
+  readonly __PACKAGE_VERSION__: string;
+}

packages/extension/src/libs/json-tree-view/JsonTreeViewItem.vue

@@ -100,7 +100,7 @@ function getValueColor(value: ValueTypes): string {
     .is(v => v === 'boolean', then('var(--jtv-boolean-color)'))
     .is(v => v === 'object', then('var(--jtv-null-color)'))
     .is(v => v === 'undefined', then('var(--jtv-null-color)'))
-    .default(then('var(--jtv-valueKey-color)'));
+    .otherwise(then('var(--jtv-valueKey-color)'));
 }
 
 const classes = computed((): unknown => {

packages/extension/src/providers/ethereum/ui/eth-connect-dapp.vue

@@ -33,13 +33,23 @@
         />
       </div>
 
-      <div class="provider-connect-dapp__info">
+      <div v-if="!isRestricted" class="provider-connect-dapp__info">
         <info-icon-gray />
         <p>
           This will reveal your public address, wallet balance and activity to
           {{ Options.domain }}
         </p>
       </div>
+      <div v-if="isRestricted" class="provider-connect-dapp__info">
+        <info-icon-gray />
+        <p>
+          Your wallet address is restricted! if you believe this is an error
+          please contact us at
+          <a href="mailto:support@myetherwallet.com"
+            >support@myetherwallet.com</a
+          >.
+        </p>
+      </div>
 
       <modal-accounts
         :show-accounts="showAccounts"
@@ -55,7 +65,7 @@
     </template>
 
     <template #button-right>
-      <base-button title="Connect" :click="connect" />
+      <base-button :disabled="isRestricted" title="Connect" :click="connect" />
     </template>
   </common-popup>
 </template>
@@ -80,11 +90,13 @@ import { fromBase } from '@enkryptcom/utils';
 import { getError } from '@/libs/error';
 import { ErrorCodes } from '../types';
 import AccountState from '../libs/accounts-state';
+import { isWalletRestricted } from '@/libs/utils/screening';
 
 const windowPromise = WindowPromiseHandler(1);
 const network = ref<EvmNetwork>(DEFAULT_EVM_NETWORK);
 const identicon = ref<string>('');
 const displayAddress = ref<string>('');
+const isRestricted = ref(false);
 const accountHeaderData = ref<AccountsHeaderData>({
   activeAccounts: [],
   inactiveAccounts: [],
@@ -119,6 +131,9 @@ onBeforeMount(async () => {
     activeBalances: accounts.map(() => '~'),
     inactiveAccounts: [],
   };
+  isWalletRestricted(displayAddress.value).then(res => {
+    isRestricted.value = res;
+  });
   try {
     const api = await network.value.api();
     const activeBalancePromises = accountHeaderData.value.activeAccounts.map(
@@ -162,6 +177,9 @@ const toggleAccounts = () => {
 const onSelectedAddressChanged = async (newAccount: EnkryptAccount) => {
   accountHeaderData.value.selectedAccount = newAccount;
   displayAddress.value = network.value.displayAddress(newAccount.address);
+  isWalletRestricted(displayAddress.value).then(res => {
+    isRestricted.value = res;
+  });
   identicon.value = network.value.identicon(newAccount.address);
 };
 </script>

packages/extension/src/providers/ethereum/ui/send-transaction/index.vue

@@ -175,6 +175,7 @@ import { trackSendEvents } from '@/libs/metrics';
 import { SendEventType } from '@/libs/metrics/types';
 import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 import { parseCurrency } from '@/ui/action/utils/filters';
+import { isWalletRestricted } from '@/libs/utils/screening';
 
 const props = defineProps({
   network: {
@@ -211,6 +212,7 @@ const accountAssets = ref<Erc20Token[]>([]);
 const selectedAsset = ref<Erc20Token | Partial<Erc20Token>>(loadingAsset);
 const amount = ref<string>('');
 const isEstimateValid = ref(true);
+const isRestricted = ref(false);
 const hasValidDecimals = computed(() => {
   return isValidDecimals(sendAmount.value, selectedAsset.value.decimals!);
 });
@@ -436,6 +438,10 @@ const balanceAfterInUsd = computed(() => {
 });
 
 const errorMsg = computed(() => {
+  if (isRestricted.value) {
+    return `Restricted Address`;
+  }
+
   if (!hasValidDecimals.value) {
     return `Too many decimals.`;
   }
@@ -576,6 +582,7 @@ const sendButtonTitle = computed(() => {
 });
 
 const isValidSend = computed<boolean>(() => {
+  if (isRestricted.value) return false;
   if (!isInputsValid.value) return false;
   if (nativeBalanceAfterTransactionInBaseUnits.value.isNeg()) return false;
   if (!isEstimateValid.value) return false;
@@ -709,6 +716,7 @@ const selectAccountFrom = (account: string) => {
   addressFrom.value = account;
   isOpenSelectContactFrom.value = false;
   fetchAssets();
+  isWalletRestricted(account).then(res => (isRestricted.value = res));
 };
 
 const selectAccountTo = (account: string) => {

packages/extension/src/ui/action/App.vue

@@ -2,9 +2,14 @@
   <div>
     <div
       :class="['app', 'restricted-container', 'expanded']"
-      v-if="foundRestrictedAddress || geoRestricted"
+      v-if="isAddressRestricted.isRestricted || geoRestricted"
     >
-      <restricted :isInitialized="isWalletInitialized" />
+      <restricted
+        :isInitialized="isWalletInitialized"
+        :is-address-restricted="isAddressRestricted.isRestricted"
+        :restricted-address="isAddressRestricted.address"
+        @restricted:switch-account="switchToUnrestrictedAddress"
+      />
     </div>
     <div :class="[{ locked: isLocked }, 'app']" v-else>
       <div
@@ -122,7 +127,6 @@ import ModalRate from './views/modal-rate/index.vue';
 import Settings from './views/settings/index.vue';
 import ModalUpdates from './views/updates/index.vue';
 import Restricted from './views/restricted/index.vue';
-import { KadenaNetwork } from '@/providers/kadena/types/kadena-network';
 import { EnkryptProviderEventMethods, ProviderName } from '@/types/provider';
 import RateState from '@/libs/rate-state';
 import SwapLookingAnimation from '@action/icons/swap/swap-looking-animation.vue';
@@ -165,6 +169,10 @@ const currentVersion = __PACKAGE_VERSION__;
 const latestVersion = ref('');
 const geoRestricted = ref(false);
 const isWalletInitialized = ref(false);
+const isAddressRestricted = ref<{ isRestricted: boolean; address: string }>({
+  isRestricted: false,
+  address: '',
+});
 
 /** -------------------
  * Rate
@@ -213,16 +221,6 @@ const toggleDepositWindow = () => {
 const openBuyPage = () => {
   const buyLink = (() => {
     switch (currentNetwork.value.name) {
-      case NetworkNames.KadenaTestnet:
-        return (currentNetwork.value as KadenaNetwork).options.buyLink;
-      case NetworkNames.SyscoinNEVM:
-      case NetworkNames.Rollux:
-        return `${(currentNetwork.value as EvmNetwork).options.buyLink}&address=${currentNetwork.value.displayAddress(
-          accountHeaderData.value.selectedAccount!.address,
-        )}`;
-      case NetworkNames.SyscoinNEVMTest:
-      case NetworkNames.RolluxTest:
-        return (currentNetwork.value as EvmNetwork).options.buyLink;
       case NetworkNames.Massa:
         return 'https://www.massa.net/get-mas';
       default:
@@ -353,9 +351,7 @@ const setNetwork = async (network: BaseNetwork) => {
   };
 
   currentNetwork.value = network;
-
-  checkAddresses(activeAccounts);
-
+  checkAddress(selectedAccount);
   router.push({ name: 'assets', params: { id: network.name } });
   const tabId = await domainState.getCurrentTabId();
   const curSavedNetwork = await domainState.getSelectedNetWork();
@@ -440,17 +436,20 @@ const setNetwork = async (network: BaseNetwork) => {
   }
 };
 
-const foundRestrictedAddress = ref(false);
-
-const checkAddresses = async (
-  activeAccounts: AccountsHeaderData['activeAccounts'],
-) => {
-  const promises: Promise<boolean>[] = activeAccounts.map(ac =>
-    isWalletRestricted(currentNetwork.value.displayAddress(ac.address)),
+const checkAddress = async (activeAccount: EnkryptAccount) => {
+  isAddressRestricted.value = {
+    isRestricted: false,
+    address: '',
+  };
+  const isRestricted = await isWalletRestricted(
+    currentNetwork.value.displayAddress(activeAccount.address),
   );
-  await Promise.all(promises).then(results => {
-    if (results.includes(true)) foundRestrictedAddress.value = true;
-  });
+  if (isRestricted) {
+    isAddressRestricted.value = {
+      isRestricted,
+      address: currentNetwork.value.displayAddress(activeAccount.address),
+    };
+  }
 };
 
 const onSelectedSubnetworkChange = async (id: string) => {
@@ -461,32 +460,35 @@ const onSelectedSubnetworkChange = async (id: string) => {
 
 const onSelectedAddressChanged = async (newAccount: EnkryptAccount) => {
   accountHeaderData.value.selectedAccount = newAccount;
-  const accountStates = {
-    [ProviderName.ethereum]: EVMAccountState,
-    [ProviderName.bitcoin]: BTCAccountState,
-    [ProviderName.solana]: SolAccountState,
-  };
-  if (Object.keys(accountStates).includes(currentNetwork.value.provider)) {
-    const AccountState = new accountStates[
-      currentNetwork.value.provider as keyof typeof accountStates
-    ]();
-    const domain = await domainState.getCurrentDomain();
-    AccountState.addApprovedAddress(newAccount.address, domain);
+  await checkAddress(newAccount);
+  if (!isAddressRestricted.value.isRestricted) {
+    const accountStates = {
+      [ProviderName.ethereum]: EVMAccountState,
+      [ProviderName.bitcoin]: BTCAccountState,
+      [ProviderName.solana]: SolAccountState,
+    };
+    if (Object.keys(accountStates).includes(currentNetwork.value.provider)) {
+      const AccountState = new accountStates[
+        currentNetwork.value.provider as keyof typeof accountStates
+      ]();
+      const domain = await domainState.getCurrentDomain();
+      AccountState.addApprovedAddress(newAccount.address, domain);
+    }
+    await domainState.setSelectedAddress(newAccount.address);
+    await sendToBackgroundFromAction({
+      message: JSON.stringify({
+        method: InternalMethods.sendToTab,
+        params: [
+          {
+            method: MessageMethod.changeAddress,
+            params: [currentNetwork.value.displayAddress(newAccount.address)],
+          },
+        ],
+      }),
+      provider: currentNetwork.value.provider,
+      tabId: await domainState.getCurrentTabId(),
+    });
   }
-  await domainState.setSelectedAddress(newAccount.address);
-  await sendToBackgroundFromAction({
-    message: JSON.stringify({
-      method: InternalMethods.sendToTab,
-      params: [
-        {
-          method: MessageMethod.changeAddress,
-          params: [currentNetwork.value.displayAddress(newAccount.address)],
-        },
-      ],
-    }),
-    provider: currentNetwork.value.provider,
-    tabId: await domainState.getCurrentTabId(),
-  });
 };
 const showNetworkMenu = computed(() => {
   const selected = route.params.id as string;
@@ -499,6 +501,15 @@ const showNetworkMenu = computed(() => {
   );
 });
 
+const switchToUnrestrictedAddress = () => {
+  const newAccount = accountHeaderData.value.activeAccounts.find(
+    aa =>
+      currentNetwork.value.displayAddress(aa.address) !==
+      isAddressRestricted.value.address,
+  );
+  if (newAccount) onSelectedAddressChanged(newAccount);
+};
+
 const isLocked = computed(() => {
   return route.name == 'lock-screen';
 });