Merge branch 'main' into feat/20240523_v24_support

matter-labs · Jun 4, 2024 · 8471411 · 8471411
2 parents 2827173 + 3e22241
commit 8471411
Show file tree

Hide file tree

Showing 19 changed files with 168 additions and 115 deletions.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,5 +1,5 @@
 html.dark {
-  @apply bg-neutral-950;
+  @apply bg-black;
 }
 html,
 body {

diff --git a/components/common/Alert.vue b/components/common/Alert.vue
@@ -30,14 +30,6 @@ defineProps({
   &.has-icon {
     @apply grid grid-cols-[max-content_1fr] gap-block-padding-1/2;
   }
-  /* &.size- {
-    &md {
-      @apply p-4;
-    }
-    &sm {
-      @apply p-2;
-    }
-  } */
   &.variant- {
     &info {
       @apply border bg-primary-300 text-primary-700;
@@ -76,8 +68,7 @@ defineProps({
       }
     }
     &warning {
-      @apply border p-block-padding-1/2;
-      @apply border-warning-400/30 bg-warning-400/10;
+      @apply border border-warning-400/30 bg-warning-400/10;
       &.size-md {
         .alert-icon-container {
           @apply h-12 w-12 bg-warning-400;
@@ -90,6 +81,8 @@ defineProps({
         @apply sm:p-block-padding;
       }
       &.size-sm {
+        @apply p-block-padding-1/2;
+
         .alert-icon {
           @apply text-warning-400;
         }

diff --git a/components/transaction/CustomBridge.vue b/components/transaction/CustomBridge.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
-    <CommonAlert variant="warning" size="sm" :icon="ExclamationTriangleIcon" class="mb-block-gap">
+    <CommonAlert
+      v-if="customBridgeToken.bridgingDisabled"
+      variant="warning"
+      size="sm"
+      :icon="ExclamationTriangleIcon"
+      class="mb-block-gap"
+    >
       <p>Bridging {{ customBridgeToken.symbol }} is not supported by zkSync Portal.</p>
     </CommonAlert>
     <TypographyCategoryLabel>
-      Use 3rd party bridges or CEXs to bridge {{ customBridgeToken.symbol }} to
+      Use 3rd party bridges to get native {{ customBridgeToken.symbol }} on
       {{ type === "deposit" ? eraNetwork.name : eraNetwork.l1Network?.name }}.
     </TypographyCategoryLabel>
     <CommonCardWithLineButtons>

diff --git a/composables/usePortalRuntimeConfig.ts b/composables/usePortalRuntimeConfig.ts
@@ -0,0 +1,19 @@
+export const usePortalRuntimeConfig = () => {
+  const runtimeConfig = window && window["##runtimeConfig"];
+
+  // Important: before adding new env variables, make sure to list them as public in `nuxt.config.ts`
+  return {
+    nodeType: runtimeConfig?.nodeType || (process.env.NODE_TYPE as undefined | "memory" | "dockerized" | "hyperchain"),
+    walletConnectProjectId: runtimeConfig?.walletConnectProjectId || process.env.WALLET_CONNECT_PROJECT_ID,
+    ankrToken: runtimeConfig?.ankrToken || process.env.ANKR_TOKEN,
+    screeningApiUrl: runtimeConfig?.screeningApiUrl || process.env.SCREENING_API_URL,
+    analytics: {
+      rudder: runtimeConfig?.analytics?.rudder
+        ? {
+            key: (runtimeConfig.analytics.rudder.key || process.env.RUDDER_KEY)!,
+            dataplaneUrl: (runtimeConfig.analytics.rudder.dataplaneUrl || process.env.DATAPLANE_URL)!,
+          }
+        : undefined,
+    },
+  };
+};
diff --git a/composables/useScreening.ts b/composables/useScreening.ts
@@ -4,11 +4,10 @@ import { $fetch } from "ofetch";
 /* Returns void if address screening was successful */
 /* Fails if address screening was unsuccessful */
 const validateAddress = useMemoize(async (address: string) => {
-  const runtimeConfig = useRuntimeConfig();
-  if (!runtimeConfig.public.screeningApiUrl) {
-    return;
-  }
-  const url = new URL(runtimeConfig.public.screeningApiUrl);
+  const portalRuntimeConfig = usePortalRuntimeConfig();
+  if (!portalRuntimeConfig.screeningApiUrl) return;
+
+  const url = new URL(portalRuntimeConfig.screeningApiUrl);
   url.searchParams.append("address", address);
   const response = await $fetch(url.toString()).catch(() => ({ result: true }));
   if (!response.result) {

diff --git a/composables/zksync/deposit/useFee.ts b/composables/zksync/deposit/useFee.ts
@@ -59,24 +59,12 @@ export default (tokens: Ref<Token[]>, balances: Ref<TokenAmount[] | undefined>)
     const signer = getL1VoidSigner();
     if (!signer) throw new Error("Signer is not available");
 
-    return await retry(async () => {
-      try {
-        return await signer.getFullRequiredDepositFee({
-          token: ETH_TOKEN.l1Address!,
-          to: params.to,
-        });
-      } catch (err) {
-        if (err instanceof Error && err.message.startsWith("Not enough balance for deposit!")) {
-          const match = err.message.match(/([\d\\.]+) ETH/);
-          if (feeToken.value && match?.length) {
-            const ethAmount = match[1].split(" ")?.[0];
-            recommendedBalance.value = parseEther(ethAmount);
-            return;
-          }
-        }
-        throw err;
-      }
-    });
+    return await retry(() =>
+      signer.getFullRequiredDepositFee({
+        token: ETH_TOKEN.l1Address!,
+        to: params.to,
+      })
+    );
   };
   const getERC20TransactionFee = () => {
     return {
@@ -98,10 +86,25 @@ export default (tokens: Ref<Token[]>, balances: Ref<TokenAmount[] | undefined>)
       recommendedBalance.value = undefined;
       if (!feeToken.value) throw new Error("Fee tokens is not available");
 
-      if (params.tokenAddress === feeToken.value?.address) {
-        fee.value = await getEthTransactionFee();
-      } else {
-        fee.value = getERC20TransactionFee();
+      try {
+        if (params.tokenAddress === feeToken.value?.address) {
+          fee.value = await getEthTransactionFee();
+        } else {
+          fee.value = getERC20TransactionFee();
+        }
+      } catch (err) {
+        const message = (err as any)?.message;
+        if (message?.startsWith("Not enough balance for deposit!")) {
+          const match = message.match(/([\d\\.]+) ETH/);
+          if (feeToken.value && match?.length) {
+            const ethAmount = match[1].split(" ")?.[0];
+            recommendedBalance.value = parseEther(ethAmount);
+            return;
+          }
+        } else if (message?.includes("insufficient funds for gas * price + value")) {
+          throw new Error("Insufficient funds to cover deposit fee! Please, top up your account with ETH.");
+        }
+        throw err;
       }
       /* It can be either maxFeePerGas or gasPrice */
       if (fee.value && !fee.value?.maxFeePerGas) {

diff --git a/data/customBridgeTokens.ts b/data/customBridgeTokens.ts
@@ -3,7 +3,10 @@ export type CustomBridgeToken = {
   l1Address: string;
   l2Address: string;
   symbol: string;
+  bridgedSymbol: string;
   name?: string;
+  bridgingDisabled?: true;
+  learnMoreUrl?: string;
   bridges: {
     label: string;
     iconUrl: string;
@@ -26,21 +29,18 @@ export const customBridgeTokens: CustomBridgeToken[] = [
       },
     ],
     symbol: "wstETH",
+    bridgedSymbol: "wstETH",
     name: "Wrapped liquid staked Ether 2.0",
+    bridgingDisabled: true,
   },
   {
     chainId: 1,
     l1Address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
     l2Address: "0x3355df6D4c9C3035724Fd0e3914dE96A5a83aaf4",
-    bridges: [
-      {
-        label: "Symbiosis",
-        iconUrl: "/img/symbiosis.svg",
-        depositUrl:
-          "https://app.symbiosis.finance/swap?amountIn&chainIn=Ethereum&chainOut=ZkSync%20Era&tokenIn=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&tokenOut=0x1d17CBcF0D6D143135aE902365D2E5e2A16538D4",
-      },
-    ],
+    learnMoreUrl: "https://www.circle.com/blog/native-usdc-now-available-on-zksync",
+    bridges: [],
     symbol: "USDC",
+    bridgedSymbol: "USDC.e",
     name: "USD Coin",
   },
 ];
diff --git a/data/networks.ts b/data/networks.ts
@@ -5,6 +5,8 @@ import Hyperchains from "@/hyperchains/config.json";
 import type { Token } from "@/types";
 import type { Chain } from "@wagmi/core/chains";
 
+const portalRuntimeConfig = usePortalRuntimeConfig();
+
 export const l1Networks = {
   mainnet: {
     ...mainnet,
@@ -99,6 +101,7 @@ const publicChains: ZkSyncNetwork[] = [
   },
 ];
 
+const nodeType = portalRuntimeConfig.nodeType;
 const determineChainList = (): ZkSyncNetwork[] => {
   switch (nodeType) {
     case "memory":
@@ -114,7 +117,6 @@ const determineChainList = (): ZkSyncNetwork[] => {
       return [...publicChains];
   }
 };
-const nodeType = process.env.NODE_TYPE as undefined | "memory" | "dockerized" | "hyperchain";
 export const isCustomNode = !!nodeType;
 export const chainList: ZkSyncNetwork[] = determineChainList();
 export const defaultNetwork = chainList[0];
diff --git a/data/wagmi.ts b/data/wagmi.ts
@@ -4,22 +4,24 @@ import { defaultWagmiConfig } from "@web3modal/wagmi";
 
 import { chainList, type ZkSyncNetwork } from "@/data/networks";
 
+const portalRuntimeConfig = usePortalRuntimeConfig();
+
 const metadata = {
   name: "zkSync Portal",
   description: "zkSync Portal - view balances, transfer and bridge tokens",
   url: "https://portal.zksync.io",
   icons: ["https://portal.zksync.io/icon.png"],
 };
 
-if (!process.env.WALLET_CONNECT_PROJECT_ID) {
+if (!portalRuntimeConfig.walletConnectProjectId) {
   throw new Error("WALLET_CONNECT_PROJECT_ID is not set. Please set it in .env file");
 }
 
 const useExistingEraChain = (network: ZkSyncNetwork) => {
   const existingNetworks = [zkSync, zkSyncSepoliaTestnet, zkSyncTestnet];
   return existingNetworks.find((existingNetwork) => existingNetwork.id === network.id);
 };
-const createZKChain = (network: ZkSyncNetwork) => {
+const formatZkSyncChain = (network: ZkSyncNetwork) => {
   return {
     id: network.id,
     name: network.name,
@@ -48,10 +50,10 @@ const getAllChains = () => {
     }
   };
   for (const network of chainList) {
+    addUniqueChain(useExistingEraChain(network) ?? formatZkSyncChain(network));
     if (network.l1Network) {
       addUniqueChain(network.l1Network);
     }
-    addUniqueChain(useExistingEraChain(network) ?? createZKChain(network));
   }
 
   return chains;
@@ -63,7 +65,7 @@ export const wagmiConfig = defaultWagmiConfig({
   transports: Object.fromEntries(
     chains.map((chain) => [chain.id, fallback(chain.rpcUrls.default.http.map((e) => http(e)))])
   ),
-  projectId: process.env.WALLET_CONNECT_PROJECT_ID,
+  projectId: portalRuntimeConfig.walletConnectProjectId,
   metadata,
   enableCoinbase: false,
 });
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -37,10 +37,15 @@ export default defineNuxtConfig({
       ],
       script: [
         {
-          hid: "Rudder-JS",
-          src: "https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js",
-          defer: true,
+          src: "/config.js",
         },
+        process.env.RUDDER_KEY
+          ? {
+              hid: "Rudder-JS",
+              src: "https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js",
+              defer: true,
+            }
+          : undefined,
       ],
     },
   },
@@ -72,24 +77,13 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
-  runtimeConfig: {
-    public: {
-      ankrToken: process.env.ANKR_TOKEN,
-      screeningApiUrl: process.env.SCREENING_API_URL,
-      analytics: {
-        rudder: {
-          key: process.env.RUDDER_KEY,
-          dataplaneUrl: process.env.DATAPLANE_URL,
-        },
-      },
-    },
-  },
   vite: {
-    define: {
-      // make these env available even outside of the Nuxt context
-      "process.env.NODE_TYPE": JSON.stringify(process.env.NODE_TYPE),
-      "process.env.WALLET_CONNECT_PROJECT_ID": JSON.stringify(process.env.WALLET_CONNECT_PROJECT_ID),
-    },
+    // Make listed envs public and accessible in the runtime
+    define: Object.fromEntries(
+      ["NODE_TYPE", "WALLET_CONNECT_PROJECT_ID", "ANKR_TOKEN", "SCREENING_API_URL", "RUDDER_KEY", "DATAPLANE_URL"].map(
+        (key) => [`process.env.${key}`, JSON.stringify(process.env[key])]
+      )
+    ),
     css: {
       preprocessorOptions: {
         scss: {

diff --git a/public/config.js b/public/config.js
diff --git a/scripts/create-release-assets.sh b/scripts/create-release-assets.sh
@@ -3,13 +3,11 @@
 # Ensure the script stops if any command fails
 set -e
 
+# Run the final npm command
+npm run generate
+
 # Run the first npm command and move folder
-npm run generate:node:memory
-mv .output/public ./dist-node-memory
+cp -r .output/public/ ./dist-node-memory/
 
 # Run the second npm command and move folder
-npm run generate:node:docker
-mv .output/public ./dist-node-docker
-
-# Run the final npm command
-npm run generate
+cp -r .output/public/ ./dist-node-docker/
diff --git a/store/ethereumBalance.ts b/store/ethereumBalance.ts
@@ -7,7 +7,8 @@ import type { TokenAmount } from "@/types";
 import type { Blockchain as AnkrSupportedChains } from "@ankr.com/ankr.js";
 
 export const useEthereumBalanceStore = defineStore("ethereumBalance", () => {
-  const runtimeConfig = useRuntimeConfig();
+  const portalRuntimeConfig = usePortalRuntimeConfig();
+
   const onboardStore = useOnboardStore();
   const { account } = storeToRefs(onboardStore);
   const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
@@ -22,9 +23,9 @@ export const useEthereumBalanceStore = defineStore("ethereumBalance", () => {
     async () => {
       if (!account.value.address) throw new Error("Account is not available");
       if (!eraNetwork.value.l1Network) throw new Error(`L1 network is not available on ${eraNetwork.value.name}`);
-      if (!runtimeConfig.public.ankrToken) throw new Error("Ankr token is not available");
+      if (!portalRuntimeConfig.ankrToken) throw new Error("Ankr token is not available");
 
-      const ankrProvider = new AnkrProvider(`https://rpc.ankr.com/multichain/${runtimeConfig.public.ankrToken}`);
+      const ankrProvider = new AnkrProvider(`https://rpc.ankr.com/multichain/${portalRuntimeConfig.ankrToken}`);
       const networkIdToAnkr = new Map<number, AnkrSupportedChains>([[l1Networks.mainnet.id, "eth"]]);
       if (!networkIdToAnkr.has(eraNetwork.value.l1Network.id)) {
         throw new Error(`Ankr does not support ${eraNetwork.value.l1Network.name}`);

diff --git a/store/onboard.ts b/store/onboard.ts
@@ -14,6 +14,7 @@ import { wagmiConfig } from "@/data/wagmi";
 import { confirmedSupportedWallets, disabledWallets } from "@/data/wallets";
 
 export const useOnboardStore = defineStore("onboard", () => {
+  const portalRuntimeConfig = usePortalRuntimeConfig();
   const { selectedColorMode } = useColorMode();
   const { selectedNetwork, l1Network } = storeToRefs(useNetworkStore());
 
@@ -49,7 +50,7 @@ export const useOnboardStore = defineStore("onboard", () => {
 
   const web3modal = createWeb3Modal({
     wagmiConfig,
-    projectId: process.env.WALLET_CONNECT_PROJECT_ID!,
+    projectId: portalRuntimeConfig.walletConnectProjectId!,
     termsConditionsUrl: "https://zksync.io/terms",
     privacyPolicyUrl: "https://zksync.io/privacy",
     themeMode: selectedColorMode.value,

diff --git a/store/zksync/ethereumBalance.ts b/store/zksync/ethereumBalance.ts
@@ -6,7 +6,8 @@ import { wagmiConfig } from "@/data/wagmi";
 import type { Hash, TokenAmount } from "@/types";
 
 export const useZkSyncEthereumBalanceStore = defineStore("zkSyncEthereumBalances", () => {
-  const runtimeConfig = useRuntimeConfig();
+  const portalRuntimeConfig = usePortalRuntimeConfig();
+
   const onboardStore = useOnboardStore();
   const ethereumBalancesStore = useEthereumBalanceStore();
   const tokensStore = useZkSyncTokensStore();
@@ -73,7 +74,7 @@ export const useZkSyncEthereumBalanceStore = defineStore("zkSyncEthereumBalances
     async () => {
       if (!l1Network.value) throw new Error(`L1 network is not available on ${selectedNetwork.value.name}`);
 
-      if (([l1Networks.mainnet.id] as number[]).includes(l1Network.value?.id) && runtimeConfig.public.ankrToken) {
+      if (([l1Networks.mainnet.id] as number[]).includes(l1Network.value?.id) && portalRuntimeConfig.ankrToken) {
         return await getBalancesFromApi();
       } else {
         return await getBalancesFromRPC();