Upgrade rainbowkit (#1062)

* Upgrade rainbowkit

* fix unsupported network issues

* adjust wallets order

* support nestwallet

* upgrade rainbowkit

* add back package

Dockerfile

@@ -14,6 +14,8 @@ WORKDIR /usr/share/nginx/html
 RUN rm -rf ./*
 COPY --from=build /app/build .
 
+COPY nginx.conf /etc/nginx/nginx.conf
+
 COPY entrypoint.sh /usr/local/bin/
 RUN chmod +x /usr/local/bin/entrypoint.sh
 

craco.config.js

@@ -62,6 +62,16 @@ module.exports = {
           fullySpecified: false,
         },
       })
+
+      webpackConfig.module.rules.push({
+        test: /\.m?js$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+        resolve: {
+          fullySpecified: false,
+        },
+      })
+
       return webpackConfig
     },
   },

nginx.conf

@@ -0,0 +1,45 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        listen       80;
+        server_name  localhost;
+
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            log_not_found off;
+        }
+
+        error_page  500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}

package.json

@@ -41,7 +41,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.108",
     "@mui/material": "^5.11.15",
-    "@rainbow-me/rainbowkit": "^2.1.0",
+    "@rainbow-me/rainbowkit": "^2.1.2",
     "@tanstack/react-query": "^5.28.9",
     "@types/jest": "^27.5.2",
     "@types/node": "^20.10.6",

src/constants/common.ts

@@ -5,7 +5,7 @@ export const WETH_SYMBOL = "WETH"
 export const USDC_SYMBOL = "USDC"
 
 export const L1_NAME = requireEnv("REACT_APP_BASE_CHAIN")
-export const L2_NAME = requireEnv("REACT_APP_ROLLUP")
+export const L2_NAME = requireEnv("REACT_APP_ROLLUP") || "ScrollStack"
 
 export const CHAIN_ID = {
   L1: parseInt(requireEnv("REACT_APP_CHAIN_ID_L1") as string),

src/contexts/RainbowProvider/configs.tsx

@@ -3,54 +3,75 @@ import {
   bitgetWallet,
   coinbaseWallet,
   metaMaskWallet,
+  nestWallet,
   okxWallet,
   rabbyWallet,
-  safeWallet,
+  trustWallet,
   walletConnectWallet,
   zerionWallet,
 } from "@rainbow-me/rainbowkit/wallets"
-import { Chain, mainnet, scroll, scrollSepolia, sepolia } from "@wagmi/core/chains"
-import { parseUnits } from "ethers"
-import produce from "immer"
 
-import { RPC_URL } from "@/constants"
+import { CHAIN_ID, ETH_SYMBOL, EXPLORER_URL, L1_NAME, L2_NAME, RPC_URL } from "@/constants/common"
 import { requireEnv } from "@/utils"
 
 const projectId = requireEnv("REACT_APP_CONNECT_WALLET_PROJECT_ID")
 
 const wallets = [
   {
     groupName: "Popular",
-    wallets: [metaMaskWallet, walletConnectWallet, coinbaseWallet, okxWallet, bitgetWallet, rabbyWallet, safeWallet, zerionWallet],
+    wallets: [metaMaskWallet, coinbaseWallet, rabbyWallet, okxWallet, zerionWallet, trustWallet],
+  },
+  {
+    groupName: "More",
+    wallets: [bitgetWallet, nestWallet, walletConnectWallet],
   },
 ]
 
-const sepoliaChain = produce(sepolia, draft => {
-  draft.rpcUrls.default.http = [RPC_URL.L1 as any]
-  draft.fees = {
-    // adopt MetaMask params
-    baseFeeMultiplier: 1,
-    defaultPriorityFee() {
-      return parseUnits("1.5", "gwei")
+const BaseChain = {
+  id: CHAIN_ID.L1,
+  name: L1_NAME,
+  nativeCurrency: {
+    name: "Ether",
+    symbol: ETH_SYMBOL,
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: [RPC_URL.L1],
     },
-  }
-})
+  },
+  blockExplorers: {
+    default: {
+      name: L1_NAME + "Explorer",
+      url: EXPLORER_URL.L1,
+    },
+  },
+}
 
-const mainnetChain = produce(mainnet, draft => {
-  draft.rpcUrls.default.http = [RPC_URL.L1 as any]
-  draft.fees = {
-    // adopt MetaMask params
-    baseFeeMultiplier: 1,
-    // defaultPriorityFee: parseUnits("0.05", "gwei"),
-    defaultPriorityFee() {
-      return parseUnits("0.05", "gwei")
+const RollupChain = {
+  id: CHAIN_ID.L2,
+  name: L2_NAME,
+  nativeCurrency: {
+    name: "Ether",
+    symbol: ETH_SYMBOL,
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: [RPC_URL.L2],
     },
-  }
-})
+  },
+  blockExplorers: {
+    default: {
+      name: L2_NAME + "Explorer",
+      url: EXPLORER_URL.L2,
+    },
+  },
+}
 
 export const config = getDefaultConfig({
   wallets,
-  appName: "Scroll",
+  appName: L1_NAME,
   projectId,
-  chains: [mainnetChain, sepoliaChain as unknown as Chain, scroll, scrollSepolia],
+  chains: [RollupChain, BaseChain],
 })

src/pages/portal/index.tsx

@@ -12,7 +12,7 @@ const Portal = () => {
   return (
     <Container>
       <Box sx={{ textAlign: "center", mt: ["6.8rem", "13.8rem"] }}>
-        <Typography sx={{ fontSize: ["4rem", "7.8rem"], lineHeight: 1, fontWeight: 600 }}>{L2_NAME} Stack</Typography>
+        <Typography sx={{ fontSize: ["4rem", "7.8rem"], lineHeight: 1, fontWeight: 600 }}>{L2_NAME} Chain</Typography>
         <Typography sx={{ fontSize: ["2rem", "2.6rem"], mt: ["2rem", "1.4rem"] }}>Get started with us now!</Typography>
       </Box>
       <Stack

yarn.lock

@@ -2405,10 +2405,10 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
 
-"@rainbow-me/rainbowkit@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@rainbow-me/rainbowkit/-/rainbowkit-2.1.0.tgz#15295852ce9e4196f6510894a54f448835010163"
-  integrity sha512-KUkEHcVfqVuDHS2cxvaoy8R4N1EC/t/x0uYkgUkbDS8ShoW6ZJeP4qocxyvKsdYynm5srI/FPmbTSdgojV279Q==
+"@rainbow-me/rainbowkit@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@rainbow-me/rainbowkit/-/rainbowkit-2.1.2.tgz#57d0eae082fe4132d89f4bffd88cf6edd4c26141"
+  integrity sha512-nzhS4p7rtE9bAkOKSq+J761+gn6UseVxMdDpRBAr+0+ct/Hv1STErq9TT3GEXNrnAeSldtbxBVIkepa4uGykDA==
   dependencies:
     "@vanilla-extract/css" "1.14.0"
     "@vanilla-extract/dynamic" "2.1.0"