feat: pangolin and crab connect wallet

package.json

@@ -17,11 +17,14 @@
     "@docusaurus/core": "2.0.0-beta.6 ",
     "@docusaurus/preset-classic": "2.0.0-beta.6",
     "@mdx-js/react": "^1.6.21",
+    "@metamask/detect-provider": "^1.2.0",
+    "antd": "^4.16.13",
     "clsx": "^1.1.1",
-    "docusaurus-plugin-sass": "^0.1.12",
+    "docusaurus-plugin-sass": "^0.2.1",
     "raw-loader": "^4.0.2",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "sass": "^1.42.1"
   },
   "browserslist": {
     "production": [

src/component/ConnectWalletButton/index.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState } from 'react';
+import clsx from 'clsx';
+
+import { Modal, Button, notification } from "antd";
+import detectEthereumProvider from '@metamask/detect-provider';
+
+import styles from './styles.module.scss';
+
+interface AddEthereumChainParameter {
+  chainId: string; // A 0x-prefixed hexadecimal string
+  chainName: string;
+  nativeCurrency: {
+    name: string;
+    symbol: string; // 2-6 characters long
+    decimals: 18;
+  };
+  rpcUrls: string[];
+  blockExplorerUrls?: string[];
+  iconUrls?: string[]; // Currently ignored.
+}
+
+const chainsParameter: AddEthereumChainParameter[] = [
+  {
+    chainId: '0x2b',
+    chainName: 'Pangolin',
+    nativeCurrency: {
+      name: 'PRING',
+      symbol: 'PRING',
+      decimals: 18,
+    },
+    rpcUrls: ['https://pangolin-rpc.darwinia.network/'],
+    blockExplorerUrls: ['https://pangolin.subscan.io/'],
+  },
+  {
+    chainId: '0x2c',
+    chainName: 'Crab',
+    nativeCurrency: {
+      name: 'CRAB',
+      symbol: 'CRAB',
+      decimals: 18,
+    },
+    rpcUrls: ['https://crab-rpc.darwinia.network/'],
+    blockExplorerUrls: ['https://crab.subscan.io/'],
+  }
+];
+
+const ellipsisAddress = (address: string): string => {
+  return `${address.substr(0, 6)}...${address.substring(address.length-4)}`
+};
+
+type Props = {
+  className?: string;
+}
+
+const ConnectWalletButton: React.FC<Props> = ({ className }) => {
+  const provider = useRef();
+  const [connected, setConnected] = useState<{index: number; account: string; chainName: string} | null>(null);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  const handleConnectClick = () => {
+    setIsVisible(true);
+  };
+
+  const handleSelectChainClick = async (index: number) => {
+    if (!provider.current) {
+      provider.current = await detectEthereumProvider();
+    }
+
+    if (provider.current) {
+      const chainParameter = chainsParameter[index];
+      try {
+        const ret = await provider.current.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: chainParameter.chainId }],
+        });
+        if (!ret) {
+          const accounts = await provider.current.request({ method: 'eth_requestAccounts' });
+          setConnected({ index, account: accounts[0], chainName: chainParameter.chainName });
+        }
+      } catch (switchError) {
+        if (switchError.code === 4902) {
+          try {
+            const ret = await provider.current.request({
+              method: 'wallet_addEthereumChain',
+              params: [{
+                chainId: chainParameter.chainId,
+                chainName: chainParameter.chainName,
+                nativeCurrency: chainParameter.nativeCurrency,
+                rpcUrls: [...chainParameter.rpcUrls],
+                blockExplorerUrls: [...chainParameter.blockExplorerUrls],
+              }],
+            });
+            if (!ret) {
+              const accounts = await provider.current.request({ method: 'eth_requestAccounts' });
+              setConnected({ index, account: accounts[0], chainName: chainParameter.chainName });
+            }
+          } catch (addError) {
+            notification.error({
+              message: 'Oops, something wrong',
+              description: (addError as Error).message,
+            });
+          }
+        } else {
+          notification.error({
+            message: 'Oops, something wrong',
+            description: (switchError as Error).message,
+          });
+        }
+      }
+    } else {
+      notification.info({
+        message: 'Oops, something is not quite right.',
+        description: <p>It looks like MetaMask hasn't been installed. Please <a target='_blank' rel='noopener noreferrer' href='https://metamask.io/download.html'>install MetaMask</a> and try again.</p>,
+      });
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        visible={isVisible}
+        title={<h3 className={styles.chainSelectModalTitle}>Please select a network to connect:</h3>}
+        footer={null}
+        onCancel={() => setIsVisible(false)}
+        className={styles.chainSelectModal}
+      >
+        <ul className={styles.chainSelectList}>
+          {chainsParameter.map((chain, index) => (
+            <li key={index}>
+              {connected && connected.index === index ? (
+                <span className={styles.chainSelected}>
+                  Connected to {connected.chainName}: {ellipsisAddress(connected.account)}
+                </span>
+              ) : (
+                <button className={styles.chainSelectBtn} onClick={() => handleSelectChainClick(index)}>
+                  <span>{chain.chainName}</span>
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      </Modal>
+      <button className={clsx(styles.mainBtn, className)} onClick={handleConnectClick}>
+        <span>Connect Wallet</span>
+      </button>
+    </>
+  );
+};
+
+export default React.memo<Props>(ConnectWalletButton);

src/component/ConnectWalletButton/styles.module.scss

@@ -0,0 +1,76 @@
+.chainSelectModal {
+  :global {
+    .ant-modal-content {
+      border-radius: 10px;
+
+      .ant-modal-header {
+        border-radius: 10px 10px 0 0;
+      }
+    }
+  }
+}
+
+%-base-btn {
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    top: 2px;
+  }
+}
+
+.mainBtn {
+  @extend %-base-btn;
+  border-radius: 20px;
+  padding: 5px 10px;
+  background: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.7);
+
+  >span {
+    font-weight: bold;
+    font-size: medium;
+  }
+}
+
+.chainSelectModalTitle {
+  font-weight: bold;
+  font-size: larger;
+  margin: 0;
+}
+
+.chainSelectList {
+  > li {
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+%-chain-select-list-text {
+  color: black;
+  font-weight: bolder;
+  font-size: 1.1em
+}
+
+.chainSelectBtn {
+  @extend %-base-btn;
+  border-radius: 14px;
+  padding: 6px 14px;
+  background: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.7);
+
+  >span {
+    @extend %-chain-select-list-text;
+  }
+}
+
+.chainSelected {
+  @extend %-chain-select-list-text;
+}