Fix some issue

lxdao-official · Oct 26, 2023 · 8012d8a · 8012d8a · vercel · Oct 26, 2023
1 parent d2d6a96
commit 8012d8a
Show file tree

Hide file tree

Showing 8 changed files with 9,190 additions and 89 deletions.
diff --git a/components/Diploma.js b/components/Diploma.js
@@ -1,16 +1,15 @@
 import { Box, Link, Typography, useMediaQuery, useTheme, CircularProgress } from '@mui/material';
 import { useNetwork, useSwitchNetwork } from 'wagmi';
-
-
 import MintBadge from './MintBadge';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { networkList } from '../config/config';
 
 export default function Diploma() {
   const { chain = {} } = useNetwork();
-  const [newWorkType, setNewWorkType] = useState('test')
+  const [newWorkType, setNewWorkType] = useState('test');
   const t = useTranslations('Diploma');
+  const locale = useLocale();
   const theme = useTheme();
   const mdScreen = useMediaQuery(theme.breakpoints.up('md'));
   const { chains, isLoading: swichLoading, switchNetwork } = useSwitchNetwork();
@@ -25,13 +24,13 @@ export default function Diploma() {
   };
 
   const changeNetwork = (type) => {
-    setNewWorkType(type)
-  }
+    setNewWorkType(type);
+  };
   const changeChain = (id) => {
-    console.log(chains)
-    console.log(switchNetwork)
-    switchNetwork?.(id)
-  }
+    console.log(chains);
+    console.log(switchNetwork);
+    switchNetwork?.(id);
+  };
 
   return (
     <Box
@@ -62,39 +61,105 @@ export default function Diploma() {
               textAlign: 'left',
             }}
           >
-            Select a layer2 chain to mint your graduation badge
+            {t('title')}
           </h1>
         </Box>
-        <div style={{display: 'flex', alignItems: 'flex-start', marginTop: '24px'}}>
-          <div style={{flex: 1, marginRight: '24px'}}>
-            <div style={{display: 'flex', alignItems: 'center'}}>
-              <div style={{width: '150px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px', borderRadius: '6px', border: '1px solid #eee', cursor: 'pointer', background: newWorkType == 'main' ? '#000' : '#fff', color: newWorkType == 'main' ? '#fff' : '#000'}} onClick={() => changeNetwork('main')}>Mainnet</div>
-              <div style={{width: '150px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px', borderRadius: '6px', border: '1px solid #eee', cursor: 'pointer', marginLeft: '20px', background: newWorkType == 'test' ? '#000' : '#fff', color: newWorkType == 'test' ? '#fff' : '#000'}} onClick={() => changeNetwork('test')}>Testnet</div>
+        <h2>{t('content-1')}</h2>
+        <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+          <div style={{ flex: 1, marginRight: '24px' }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                marginTop: '24px',
+                fontSize: '14px',
+                borderRadius: '6px',
+                border: '1px solid #eee',
+                padding: '16px 12px',
+              }}
+            >
+              <h3 style={{ textIndent: '2rem' }}>{t('content-2')}</h3>
+              <div style={{ marginTop: '16px' }}>{t('content-3')}</div>
+              <ol style={{ gap: '12px', marginTop: '16px', color: 'black', fontSize: '14px' }}>
+                <li>{t('content-4')}</li>
+                <li>{t('content-5')}</li>
+                <li>{t('content-6')}</li>
+              </ol>
+              <h4 style={{ marginTop: '16px', textIndent: '2rem' }}>{t('content-7')}</h4>
             </div>
-            <div style={{marginTop: '20px'}}>
-              {
-                networkList[newWorkType].map((item, i) => (
-                  <div onClick={() => changeChain(item.chainId)} key={i} style={{width: '100%', padding: '16px 12px', boxSizing: 'border-box', border: '1px solid #eee', borderRadius: '10px', marginTop: '12px',  background: (chain.id == item.chainId || (isHover == i)) ? '#000' : '#fff', color: (chain.id == item.chainId || (isHover == i)) ? '#fff' : '#000', cursor: 'pointer'}} 
-                    onMouseEnter={() => handleMouseEnter(i)}
-                    onMouseLeave={handleMouseLeave}
-                  >
-                    <div style={{fontSize: '16px', fontWeight: 500}}>{item.name}</div>
-                    <div style={{fontSize: '14px',marginTop: '12px'}}>{item.desc}</div>
-                  </div>
-                ))
-              }
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: '24px' }}>
+              <div
+                style={{
+                  width: '150px',
+                  height: '48px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '14px',
+                  borderRadius: '6px',
+                  border: '1px solid #eee',
+                  cursor: 'pointer',
+                  background: newWorkType == 'main' ? '#000' : '#fff',
+                  color: newWorkType == 'main' ? '#fff' : '#000',
+                }}
+                onClick={() => changeNetwork('main')}
+              >
+                Mainnet
+              </div>
+              <div
+                style={{
+                  width: '150px',
+                  height: '48px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '14px',
+                  borderRadius: '6px',
+                  border: '1px solid #eee',
+                  cursor: 'pointer',
+                  marginLeft: '20px',
+                  background: newWorkType == 'test' ? '#000' : '#fff',
+                  color: newWorkType == 'test' ? '#fff' : '#000',
+                }}
+                onClick={() => changeNetwork('test')}
+              >
+                Testnet
+              </div>
+            </div>
+            <div style={{ marginTop: '20px' }}>
+              {networkList[locale][newWorkType].map((item, i) => (
+                <div
+                  onClick={() => changeChain(item.chainId)}
+                  key={i}
+                  style={{
+                    width: '100%',
+                    padding: '16px 12px',
+                    boxSizing: 'border-box',
+                    border: '1px solid #eee',
+                    borderRadius: '10px',
+                    marginTop: '12px',
+                    background: chain.id == item.chainId || isHover == i ? '#000' : '#fff',
+                    color: chain.id == item.chainId || isHover == i ? '#fff' : '#000',
+                    cursor: 'pointer',
+                  }}
+                  onMouseEnter={() => handleMouseEnter(i)}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{item.name}</div>
+                  <div style={{ fontSize: '14px', marginTop: '12px' }}>{item.desc}</div>
+                </div>
+              ))}
             </div>
           </div>
-          <MintBadge style={{flex: 1}} />
+          <MintBadge style={{ flex: 1 }} />
         </div>
-        {
-          swichLoading ? (
-            <div style={{position: 'fixed', top: 0, bottom: 0, left: 0, right: 0, background: 'rgba(0, 0, 0, .2)',display:'flex', alignItems: 'center', justifyContent: 'center'}}>
-              <CircularProgress color="inherit" />
-            </div>
-          ) : ''
-        }
-
+        {swichLoading ? (
+          <div style={{ position: 'fixed', top: 0, bottom: 0, left: 0, right: 0, background: 'rgba(0, 0, 0, .2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <CircularProgress color="inherit" />
+          </div>
+        ) : (
+          ''
+        )}
       </Box>
     </Box>
   );

diff --git a/components/MintBadge.js b/components/MintBadge.js
@@ -46,7 +46,7 @@ export default function MintBadge() {
   });
   const toFaucet = () => {
     window.open(CONTRACT_MAP[chain.id]?.facute, '_blank');
-  }
+  };
   const handleMint = async () => {
     // if (read != counter) {
     //   showMessage({
@@ -247,30 +247,30 @@ export default function MintBadge() {
           {isLoading | mintLoading ? 'Claiming...' : 'Claim'}
         </Button>
       )}
-      {
-        CONTRACT_MAP[chain.id]?.facute ? (
-          <Button
-            variant="contained"
-            onClick={toFaucet}
-            sx={{
-              width: '255px',
-              height: '64px',
-              fontSize: '20px',
-              fontWeight: '800',
-              textTransform: 'capitalize',
-              borderRadius: '18px',
-              background: '#fff',
-              color: '#000',
-              border: '1px solid #333',
-              '&:hover': {
-                backgroundColor: '#eee',
-              },
-            }}
-          >
-            Faucet
-          </Button>
-        ) : ''
-      }
+      {CONTRACT_MAP[chain.id]?.facute ? (
+        <Button
+          variant="contained"
+          onClick={toFaucet}
+          sx={{
+            width: '255px',
+            height: '64px',
+            fontSize: '16px',
+            fontWeight: '800',
+            textTransform: 'capitalize',
+            borderRadius: '18px',
+            background: '#fff',
+            color: '#000',
+            border: '1px solid #333',
+            '&:hover': {
+              backgroundColor: '#eee',
+            },
+          }}
+        >
+          Optimism Goerli Faucet
+        </Button>
+      ) : (
+        ''
+      )}
     </Stack>
   );
 }
diff --git a/components/showMessage.js b/components/showMessage.js
@@ -71,17 +71,11 @@ function showMessage(options) {
   const container = document.createDocumentFragment();
 
   function render({ visible }) {
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <ThemeProvider theme={getTheme('light')}>
-        <SimpleModal
-          title={title}
-          visible={visible}
-          body={body}
-          type={type}
-          onClose={close}
-        />
-      </ThemeProvider>,
-      container
+        <SimpleModal title={title} visible={visible} body={body} type={type} onClose={close} />
+      </ThemeProvider>
     );
   }
 

diff --git a/config/config.js b/config/config.js
@@ -1,21 +1,40 @@
-
 export const CONTRACT_MAP = {
-    420: {address: '0x1188bd52703cc560a0349d5a80dad3d8c799e103', rpc: 'https://opt-goerli.g.alchemy.com/v2/0nH0WXQaohzjhfuOIsjzYWj6MnJpl_4E', facute: 'https://faucet.quicknode.com/optimism/goerli'},
-    421613: {address: '0x1188Bd52703Cc560A0349D5a80DAD3d8c799E103', rpc: 'https://arb-goerli.g.alchemy.com/v2/a-yu04ERGsxtgYyZ3BuioJ09VSZv4FQm', facute: 'https://faucet.quicknode.com/arbitrum/goerli'}
+  420: { address: '0x1188bd52703cc560a0349d5a80dad3d8c799e103', rpc: 'https://opt-goerli.g.alchemy.com/v2/0nH0WXQaohzjhfuOIsjzYWj6MnJpl_4E', facute: 'https://faucet.quicknode.com/optimism/goerli' },
+  421613: { address: '0x1188Bd52703Cc560A0349D5a80DAD3d8c799E103', rpc: 'https://arb-goerli.g.alchemy.com/v2/a-yu04ERGsxtgYyZ3BuioJ09VSZv4FQm', facute: 'https://faucet.quicknode.com/arbitrum/goerli' },
 };
 
 export const networkList = {
+  zh: {
     main: [],
-    test: [{
+    test: [
+      {
         chainId: 420,
         name: 'Optimism Goerli',
-        desc: 'Optimism Goerli is a Layer 2 Optimistic Rollup network designed to utilize the strong security guarantees of Ethereum whilereducing its cost and latency'
-    }, {
+        desc: 'Optimism Goerli 是一个 Layer 2 乐观 Rollup 网络，通过利用以太坊的强大安全性，来降低成本和延迟。',
+      },
+      {
         chainId: 421613,
         name: 'Arbitrum Goerli',
-        desc: 'Officially the Nitro Goerli Rollup Testnet (421613), is now the primary, stable Arbitrum testnet moving forward.  As of late 2022, developers and validator node runners can now use Infura, QuickNode, and Alchemy,  to interact with Arbitrum One, which is in mainnet beta, including the admin controls.'
-    }]
-}
+        desc: 'Arbitrum Goerli Rollup Testnet(421613)现在已成为 Arbitrum 的主要稳定测试网。从 2022 年年底开始，开发人员和验证节点运营商现在可以使用 Infura、QuickNode 和 Alchemy 来与 Arbitrum One(mainnet)进行交互,包括管理员控制权。',
+      },
+    ],
+  },
+  en: {
+    main: [],
+    test: [
+      {
+        chainId: 420,
+        name: 'Optimism Goerli',
+        desc: 'Optimism Goerli is a Layer 2 Optimistic Rollup network designed to utilize the strong security guarantees of Ethereum whilereducing its cost and latency',
+      },
+      {
+        chainId: 421613,
+        name: 'Arbitrum Goerli',
+        desc: 'Officially the Nitro Goerli Rollup Testnet (421613), is now the primary, stable Arbitrum testnet moving forward.  As of late 2022, developers and validator node runners can now use Infura, QuickNode, and Alchemy,  to interact with Arbitrum One, which is in mainnet beta, including the admin controls.',
+      },
+    ],
+  },
+};
 
 // export const networkList = {
 //     main: [{
@@ -32,4 +51,4 @@ export const networkList = {
 //         name: 'Arbitrum Goerli',
 //         desc: 'Arbitrum Goerli is a Layer 2 Optimistic Rollup network designed to utilize the strong security guarantees of Ethereum whilereducing its cost and latency'
 //     }]
-// }
+// }
diff --git a/locale/en.json b/locale/en.json
@@ -91,9 +91,9 @@
     "content-1": "Congratulations on completing all the chapters of MyFirstLayer2!",
     "content-2": "In recognition of your efforts and achievements, we've prepared a special graduation badge for you. This badge stands as an acknowledgement of your learning accomplishments and is a cherished honor.",
     "content-3": "Claiming the badge is an easy process. Here's what you need to do:",
-    "content-4": "1. Click the \"Connect Wallet\" button situated in the top right corner of our website to link your wallet. (Make sure you switch to the Optimism network.)",
-    "content-5": "2*.Navigate to the OP testnet faucet address to collect test tokens. (At present, we'll provide the link to the test network, and in due course, we'll offer the link to the OP mainnet's Claim interaction component.)",
-    "content-6": "3.Hit the \"Claim\" button and voila! You've successfully received your graduation badge!",
+    "content-4": "Click the \"Connect Wallet\" button situated in the top right corner of our website to link your wallet. (Make sure you switch to the Optimism Goerli / Arbitrum Goerli network.)",
+    "content-5": "Navigate to the Optimism Goerli faucet address to collect test tokens. (At present, we'll provide the link to the test network, and in due course, we'll offer the link to the OP mainnet's / Arb mainnet's Claim interaction component.)",
+    "content-6": "Hit the \"Claim\" button and voila! You've successfully received your graduation badge!",
     "content-7": "Congratulations! You've successfully claimed your graduation badge! We hope this badge acts as a source of inspiration and motivation for your ongoing journey. We eagerly anticipate your sustained dedication to learning and your adventurous journey into the world of Web3!"
   },
   "SectionLXDAOIntro": {

diff --git a/locale/zh.json b/locale/zh.json
@@ -87,9 +87,9 @@
     "content-1": "恭喜您完成了 MyFirstLayer2 全部章节内容的学习！",
     "content-2": "为了表彰您的努力与成就，我们特别为您准备了一个结业徽章这个徽章是对您学习成果的认可，也是一份珍贵的荣誉。",
     "content-3": "领取徽章很简单，请您按照以下步骤进行操作：",
-    "content-4": "1. 点击网站主页右上角的 “ Connect Wallet ” 按钮，连接钱包；（请切换至 Optimism 网络）",
-    "content-5": "2*.于 OP testnet 水龙头地址领取测试代币；（暂时留测试网的链接，未来只留下 OP 主网的 Claim 交互组件）",
-    "content-6": "3.点击 “ Claim ” 按钮即可成功获得结业徽章！",
+    "content-4": "点击网站主页右上角的 “ Connect Wallet ” 按钮，连接钱包；（请切换至 Optimism Goerli / Arbitrum Goerli 网络）",
+    "content-5": "于 Optimism Goerli 水龙头地址领取测试代币；（暂时留测试网的链接，未来只留下 OP 主网 / Arb 主网 的 Claim 交互组件）",
+    "content-6": "点击 “ Claim ” 按钮即可成功获得结业徽章！",
     "content-7": "到这里，您已经成功地领取了结业徽章！希望这枚徽章能够成为您不断前行的鼓励与动力，也期待您继续保持追求学习的态度，在 Web3 的世界扬帆起航！"
   },
   "SectionLXDAOIntro": {

diff --git a/pages/_app.js b/pages/_app.js
@@ -16,7 +16,7 @@ import '../common/global.css';
 import getTheme from '../common/theme';
 
 /* RainbowKit variables */
-const { chains, provider } = configureChains([chain.optimismGoerli], [publicProvider()]);
+const { chains, provider } = configureChains([chain.optimismGoerli, chain.arbitrumGoerli], [publicProvider()]);
 const { connectors } = getDefaultWallets({
   appName: 'My First Layer2',
   chains,