fix: use new l1 rpc (#109)

.env

@@ -1,2 +1,3 @@
-WALLET_CONNECT_PROJECT_ID=09f1773e9dba3d802cf679bb1062544f
-TURNSTILE_KEY=0x4AAAAAAAEaW36j0kO81eAp
+WALLET_CONNECT_PROJECT_ID=373a8744ceaac00934aec708a3fceea6
+TURNSTILE_KEY=0x4AAAAAAAEaW36j0kO81eAp
+ANKR_TOKEN=

.github/workflows/feature.yml

@@ -29,6 +29,12 @@ jobs:
         run: |
           npm run lint
 
+      - name: Setup .env
+        run: |
+          echo "WALLET_CONNECT_PROJECT_ID=${{ secrets.WALLET_CONNECT_PROJECT_ID }}" > .env
+          echo "ANKR_TOKEN=${{ secrets.ANKR_TOKEN }}" >> .env
+          echo "TURNSTILE_KEY=${{ secrets.ANKR_TOKEN }}" >> .env
+
       - name: Build
         run: |
           npm run generate

.gitignore

@@ -11,4 +11,4 @@ tests/e2e/src/support/extension
 tests/e2e/reports
 tests/e2e/artifacts
 allure-results
-.env.local
+.env.local

README.md

@@ -53,6 +53,21 @@ To use Portal with your ZK Stack Hyperchain, see the guide [here](./hyperchains/
 
 ## 🛠 Development
 
+### Advanced configuration
+
+#### L1 Balances:
+By default, L1 balances are fetched via a public RPC. For faster loading speeds and reduced load on your L1 RPC provider, consider using [Ankr's RPC service](https://www.ankr.com/rpc/). Obtain an Ankr token and update the `.env` file:
+```bash
+ANKR_TOKEN=your_ankr_token_here
+```
+
+#### Wallet Connect Project Setup:
+Before deploying your own version of the Portal, ensure you create your own Wallet Connect project on [walletconnect.com](https://walletconnect.com). After creating the project, update the project ID in the `.env` file:
+```bash
+WALLET_CONNECT_PROJECT_ID=your_project_id_here
+```
+
+
 ### 🔧 Setup
 
 Ensure you've installed the necessary dependencies:

data/networks.ts

@@ -29,6 +29,10 @@ export const l1Networks = {
   sepolia: {
     ...sepolia,
     name: "Sepolia Testnet",
+    rpcUrls: {
+      public: { http: ["https://sepolia.gateway.tenderly.co"] },
+      default: { http: ["https://sepolia.gateway.tenderly.co"] },
+    },
   },
 } as const;
 export type L1Network = Chain;

hyperchains/README.md

@@ -90,6 +90,10 @@ Array<{
 ---
 
 ## 🛠 Development
+
+### Advanced configuration
+Read more in the main README: [Advanced configuration](../README.md#advanced-configuration)
+
 ### 🔧 Setup
 
 Make sure to install the dependencies:

nuxt.config.ts

@@ -67,6 +67,7 @@ export default defineNuxtConfig({
       walletConnectProjectID: process.env.WALLET_CONNECT_PROJECT_ID,
       turnstileKey: process.env.TURNSTILE_KEY,
       nodeType: process.env.NODE_TYPE as undefined | "memory" | "dockerized" | "hyperchain",
+      ankrToken: process.env.ANKR_TOKEN,
     },
   },
   vite: {

package.json

@@ -11,9 +11,9 @@
     "test:unit": "vitest --environment jsdom",
     "test:unit:ci": "TZ=UTC-3 vitest --environment jsdom --run",
     "generate": "nuxt generate && npm run generate-meta",
-    "generate:node:memory": "cross-env NODE_TYPE=memory nuxt generate",
-    "generate:node:docker": "cross-env NODE_TYPE=dockerized nuxt generate",
-    "generate:node:hyperchain": "ts-node --transpile-only scripts/hyperchains/empty-check.ts && cross-env NODE_TYPE=hyperchain nuxt generate",
+    "generate:node:memory": "cross-env NODE_TYPE=memory npm run generate",
+    "generate:node:docker": "cross-env NODE_TYPE=dockerized npm run generate",
+    "generate:node:hyperchain": "ts-node --transpile-only scripts/hyperchains/empty-check.ts && cross-env NODE_TYPE=hyperchain npm run generate",
     "generate-meta": "ts-node --transpile-only scripts/updateBridgeMetaTags.ts",
     "hyperchain:create": "ts-node --transpile-only scripts/hyperchains/create.ts",
     "hyperchain:migrate": "ts-node --transpile-only scripts/hyperchains/migrate.ts",
@@ -61,6 +61,7 @@
     "*.{vue,js,ts,html,json}": "npm run lint"
   },
   "dependencies": {
+    "@ankr.com/ankr.js": "^0.4.0",
     "@chenfengyuan/vue-qrcode": "^2.0.0",
     "@headlessui/vue": "^1.7.7",
     "@heroicons/vue": "^2.0.14",
@@ -80,7 +81,6 @@
     "@wagmi/core": "^1.3.3",
     "@web3modal/ethereum": "^2.6.2",
     "@web3modal/html": "^2.6.2",
-    "alchemy-sdk": "^2.8.1",
     "cheerio": "^1.0.0-rc.12",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",

store/ethereumBalance.ts

@@ -1,15 +1,17 @@
-import { Alchemy, BigNumber, TokenBalanceType } from "alchemy-sdk";
+import { AnkrProvider } from "@ankr.com/ankr.js";
+import { BigNumber } from "ethers";
 import { defineStore, storeToRefs } from "pinia";
 
-import type { Network as AlchemyNetwork, TokenBalance } from "alchemy-sdk";
+import type { TokenAmount } from "@/types";
+import type { Blockchain as AnkrSupportedChains } from "@ankr.com/ankr.js";
 
 import { useOnboardStore } from "@/store/onboard";
 import { useEraProviderStore } from "@/store/zksync/era/provider";
 import { ETH_L1_ADDRESS } from "@/utils/constants";
 import { checksumAddress } from "@/utils/formatters";
-import { retry } from "@/utils/helpers";
 
 export const useEthereumBalanceStore = defineStore("ethereumBalance", () => {
+  const runtimeConfig = useRuntimeConfig();
   const onboardStore = useOnboardStore();
   const { account } = storeToRefs(onboardStore);
   const { eraNetwork } = storeToRefs(useEraProviderStore());
@@ -20,49 +22,48 @@ export const useEthereumBalanceStore = defineStore("ethereumBalance", () => {
     error: balanceError,
     execute: requestBalance,
     reset: resetBalance,
-  } = usePromise(
+  } = usePromise<TokenAmount[]>(
     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");
 
-      const alchemy = new Alchemy({
-        network: `eth-${eraNetwork.value.l1Network.network}` as AlchemyNetwork,
+      const ankrProvider = new AnkrProvider(`https://rpc.ankr.com/multichain/${runtimeConfig.public.ankrToken}`);
+      const balances = await ankrProvider.getAccountBalance({
+        blockchain: [
+          eraNetwork.value.l1Network.network === "mainnet"
+            ? "eth"
+            : (`eth_${eraNetwork.value.l1Network.network}` as AnkrSupportedChains),
+        ],
+        walletAddress: account.value.address,
+        onlyWhitelisted: false,
       });
-      const balances: TokenBalance[] = [];
-      const fetchBalances = async (pageKey?: string) => {
-        const result = await alchemy.core.getTokenBalances(account.value.address!, {
-          type: TokenBalanceType.ERC20,
-          pageKey,
-        });
-        balances.push(
-          ...result.tokenBalances.map((token) => ({
-            ...token,
-            contractAddress: checksumAddress(token.contractAddress),
-          }))
-        );
-        if (result.pageKey) {
-          await fetchBalances(result.pageKey);
-        }
-      };
-      const [ethersBalance] = await Promise.all([
-        retry(() => alchemy.core.getBalance(account.value.address!)),
-        retry(() => fetchBalances()),
-      ]);
-      balances.push({
-        contractAddress: ETH_L1_ADDRESS,
-        tokenBalance: ethersBalance.toString(),
-      } as TokenBalance);
-      return balances;
+      return [
+        ...balances.assets
+          .filter((e) => e.contractAddress || e.tokenType === "NATIVE")
+          .map(
+            (e) =>
+              ({
+                address: e.tokenType === "NATIVE" ? ETH_L1_ADDRESS : checksumAddress(e.contractAddress!),
+                symbol: e.tokenSymbol,
+                name: e.tokenName,
+                decimals: e.tokenDecimals,
+                iconUrl: e.thumbnail,
+                price: e.tokenPrice,
+                amount: e.balanceRawInteger,
+              } as TokenAmount)
+          ),
+      ];
     },
     { cache: false }
   );
 
   const deductBalance = (tokenL1Address: string, amount: string) => {
     if (!balance.value) return;
-    const tokenBalance = balance.value.find((balance) => balance.contractAddress === tokenL1Address);
+    const tokenBalance = balance.value.find((balance) => balance.address === tokenL1Address);
     if (!tokenBalance) return;
-    const newBalance = BigNumber.from(tokenBalance.tokenBalance).sub(amount);
-    tokenBalance.tokenBalance = newBalance.isNegative() ? "0" : newBalance.toString();
+    const newBalance = BigNumber.from(tokenBalance.amount).sub(amount);
+    tokenBalance.amount = newBalance.isNegative() ? "0" : newBalance.toString();
   };
 
   onboardStore.subscribeOnAccountChange(() => {