fix: improve code

matter-labs · Apr 7, 2024 · 5a0524b · 5a0524b
1 parent 23c74fa
commit 5a0524b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 83 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -84,9 +84,16 @@ export default defineNuxtConfig({
     public: {
       ankrToken: process.env.ANKR_TOKEN,
       screeningApiUrl: process.env.SCREENING_API_URL,
-      dataplaneUrl: process.env.DATAPLANE_URL,
-      rudderKey: process.env.RUDDER_KEY,
-      masaKey: process.env.MASA_KEY,
+      analytics: {
+        rudder: {
+          key: process.env.RUDDER_KEY,
+          dataplaneUrl: process.env.DATAPLANE_URL,
+        },
+        masa: {
+          clientId: process.env.MASA_KEY,
+          appId: process.env.MASA_APP_ID,
+        },
+      },
     },
   },
   vite: {

diff --git a/store/onboard.ts b/store/onboard.ts
@@ -12,7 +12,6 @@ import { createWeb3Modal } from "@web3modal/wagmi";
 
 import { wagmiConfig } from "@/data/wagmi";
 import { confirmedSupportedWallets, disabledWallets } from "@/data/wallets";
-import { identifyWallet } from "~/utils/analytics";
 
 export const useOnboardStore = defineStore("onboard", () => {
   const { selectedColorMode } = useColorMode();

diff --git a/utils/analytics.ts b/utils/analytics.ts
@@ -1,84 +1,80 @@
-let analyticsLoaded = false;
+import type { Hash } from "@/types";
 
-const isRudderReady = (): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    if (!window.rudderanalytics) {
-      reject(new Error("Rudder not loaded"));
-    }
-    resolve();
-  });
-};
+let analyticsLoaded = false;
 
-const isMasaReady = (): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    if (!window.masaAnalytics) {
-      reject(new Error("Masa not loaded"));
-    }
+async function loadRudder() {
+  if (!window.rudderanalytics) {
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    throw new Error("Rudder not loaded");
+  }
+  const runtimeConfig = useRuntimeConfig();
+  window.rudderanalytics.load(
+    runtimeConfig.public.analytics.rudder.key,
+    runtimeConfig.public.analytics.rudder.dataplaneUrl
+  );
+}
 
-    resolve();
+async function loadMasa() {
+  if (!window.MA) {
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    throw new Error("Masa not loaded");
+  }
+  const runtimeConfig = useRuntimeConfig();
+  window.masaAnalytics = new window.MA.MasaAnalytics({
+    clientId: runtimeConfig.public.analytics.masa.clientId,
   });
-};
+}
 
 export async function initAnalytics(): Promise<boolean> {
+  if (analyticsLoaded) return true;
+
   const runtimeConfig = useRuntimeConfig();
-  const useRudder = Boolean(runtimeConfig.public.rudderKey && runtimeConfig.public.dataplaneUrl);
-  const useMasa = Boolean(runtimeConfig.public.masaKey);
-  if (!useRudder && !useMasa) {
+  const useRudder = Boolean(
+    runtimeConfig.public.analytics.rudder.key && runtimeConfig.public.analytics.rudder.dataplaneUrl
+  );
+  const useMasa = Boolean(runtimeConfig.public.analytics.masa.clientId);
+  if ((!useRudder && !useMasa) || analyticsLoaded) {
     return false;
   }
 
-  if (analyticsLoaded) {
-    await Promise.all([await isRudderReady(), await isMasaReady()]);
-    return true;
-  }
-  const rudderWait = retry(async () => {
-    if (useRudder && !window.rudderanalytics) {
-      await new Promise((resolve) => setTimeout(resolve, 250));
-      throw new Error("Rudder not loaded");
-    }
-  });
-  const masaWait = retry(async () => {
-    if (useMasa && !window.MA) {
-      await new Promise((resolve) => setTimeout(resolve, 250));
-      throw new Error("Rudder not loaded");
-    }
-  });
-  await Promise.all([await rudderWait, await masaWait]);
-  useRudder && window.rudderanalytics?.load(runtimeConfig.public.rudderKey, runtimeConfig.public.dataplaneUrl);
-  if (useMasa && window.MA) {
-    window.masaAnalytics = new window.MA!.MasaAnalytics({
-      clientId: runtimeConfig.public.masaKey,
-    });
-  }
-  analyticsLoaded = true;
+  const services = [];
+  if (useRudder) services.push(loadRudder());
+  if (useMasa) services.push(loadMasa());
 
-  await Promise.all([await isRudderReady(), await isMasaReady()]);
+  await Promise.all(services);
+  analyticsLoaded = true;
   return true;
 }
 
 export async function trackPage(): Promise<void> {
   if (await initAnalytics()) {
+    const runtimeConfig = useRuntimeConfig();
     window.rudderanalytics?.page();
     window.masaAnalytics?.firePageViewEvent({
       page: window.location.href,
-      additionalEventData: { appId: "zksync-portal" },
+      additionalEventData: { appId: runtimeConfig.public.analytics.masa.appId },
     });
   }
 }
 
 export async function trackEvent(eventName: string, params?: object): Promise<void> {
   if (await initAnalytics()) {
+    const runtimeConfig = useRuntimeConfig();
     window.rudderanalytics?.track(eventName, params);
-    window.masaAnalytics?.trackCustomEvent({ eventName, additionalEventData: { appId: "zksync-portal", ...params } });
+    window.masaAnalytics?.trackCustomEvent({
+      eventName,
+      additionalEventData: { appId: runtimeConfig.public.analytics.masa.appId, ...params },
+    });
   }
 }
 
-export async function identifyWallet(userAddress: `0x${string}` | undefined, walletType?: string): Promise<void> {
+export async function identifyWallet(userAddress: Hash | undefined, walletType?: string): Promise<void> {
   if (await initAnalytics()) {
+    const runtimeConfig = useRuntimeConfig();
     window.masaAnalytics?.fireConnectWalletEvent({
       user_address: userAddress,
       wallet_type: walletType,
-      additionalEventData: { appId: "zksync-portal" },
+      additionalEventData: { appId: runtimeConfig.public.analytics.masa.appId },
     });
   }
 }
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
@@ -363,7 +363,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute, useRouter } from "#app";
 import {
   ArrowTopRightOnSquareIcon,
   CheckIcon,
@@ -381,22 +380,6 @@ import useFee from "@/composables/zksync/deposit/useFee";
 import useTransaction from "@/composables/zksync/deposit/useTransaction";
 import { customBridgeTokens } from "@/data/customBridgeTokens";
 import { isCustomNode } from "@/data/networks";
-import { useDestinationsStore } from "@/store/destinations";
-import { useNetworkStore } from "@/store/network";
-import { useOnboardStore } from "@/store/onboard";
-import { usePreferencesStore } from "@/store/preferences";
-import { useZkSyncEthereumBalanceStore } from "@/store/zksync/ethereumBalance";
-import { useZkSyncProviderStore } from "@/store/zksync/provider";
-import { useZkSyncTokensStore } from "@/store/zksync/tokens";
-import { ESTIMATED_DEPOSIT_DELAY, useZkSyncTransactionStatusStore } from "@/store/zksync/transactionStatus";
-import { useZkSyncTransfersHistoryStore } from "@/store/zksync/transfersHistory";
-import { useZkSyncWalletStore } from "@/store/zksync/wallet";
-import { trackEvent } from "@/utils/analytics";
-import { ETH_TOKEN } from "@/utils/constants";
-import { TOKEN_ALLOWANCE } from "@/utils/doc-links";
-import { checksumAddress, decimalToBigNumber, parseTokenAmount } from "@/utils/formatters";
-import { silentRouterChange } from "@/utils/helpers";
-import { TransitionAlertScaleInOutTransition, TransitionOpacity } from "@/utils/transitions";
 import DepositSubmitted from "@/views/transactions/DepositSubmitted.vue";
 
 import type { Token, TokenAmount } from "@/types";

diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
@@ -299,20 +299,6 @@ import useFee from "@/composables/zksync/useFee";
 import useTransaction, { isWithdrawalManualFinalizationRequired } from "@/composables/zksync/useTransaction";
 import { customBridgeTokens } from "@/data/customBridgeTokens";
 import { isCustomNode } from "@/data/networks";
-import { useDestinationsStore } from "@/store/destinations";
-import { useOnboardStore } from "@/store/onboard";
-import { usePreferencesStore } from "@/store/preferences";
-import { useZkSyncProviderStore } from "@/store/zksync/provider";
-import { useZkSyncTokensStore } from "@/store/zksync/tokens";
-import { WITHDRAWAL_DELAY, useZkSyncTransactionStatusStore } from "@/store/zksync/transactionStatus";
-import { useZkSyncTransfersHistoryStore } from "@/store/zksync/transfersHistory";
-import { useZkSyncWalletStore } from "@/store/zksync/wallet";
-import { trackEvent } from "@/utils/analytics";
-import { ETH_TOKEN } from "@/utils/constants";
-import { ZKSYNC_WITHDRAWAL_DELAY } from "@/utils/doc-links";
-import { checksumAddress, decimalToBigNumber } from "@/utils/formatters";
-import { calculateFee, silentRouterChange } from "@/utils/helpers";
-import { TransitionAlertScaleInOutTransition, TransitionOpacity } from "@/utils/transitions";
 import TransferSubmitted from "@/views/transactions/TransferSubmitted.vue";
 import WithdrawalSubmitted from "@/views/transactions/WithdrawalSubmitted.vue";