feat(website): update setting up wallet docs (#14227)

Co-authored-by: d1onys1us <13951458+d1onys1us@users.noreply.github.com>
taikoxyz · Jul 23, 2023 · 3751198 · 3751198
1 parent ac52f57
commit 3751198
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 63 deletions.
diff --git a/...nding/testnet-token-images/bull_32x32.svg → ...es/branding/testnet-token-images/bull.svg b/...nding/testnet-token-images/bull_32x32.svg → ...es/branding/testnet-token-images/bull.svg
diff --git a/...site/components/Button/AddTokenButton.tsx → ...ite/components/Button/AddTokensButton.tsx b/...site/components/Button/AddTokenButton.tsx → ...ite/components/Button/AddTokensButton.tsx
@@ -1,9 +1,12 @@
 import {
   ELDFELL_ADD_ETHEREUM_CHAIN,
+  ELDFELL_ADD_TOKENS,
   ELDFELL_CONFIG,
   GRIMSVOTN_ADD_ETHEREUM_CHAIN,
+  GRIMSVOTN_ADD_TOKENS,
   GRIMSVOTN_CONFIG,
   SEPOLIA_ADD_ETHEREUM_CHAIN,
+  SEPOLIA_ADD_TOKENS,
   SEPOLIA_CONFIG,
 } from "../../domain/chain";
 
@@ -28,40 +31,42 @@ const configMap = {
   Sepolia: SEPOLIA_ADD_ETHEREUM_CHAIN,
 };
 
-interface AddTokenButtonProps {
-  address: string;
-  symbol: string;
-  decimals: number;
-  image: string;
+const tokenConfigMap = {
+  Grimsvotn: GRIMSVOTN_ADD_TOKENS,
+  Sepolia: SEPOLIA_ADD_TOKENS,
+  Eldfell: ELDFELL_ADD_TOKENS,
+};
+
+interface AddTokensButtonProps {
   network: ConnectButtonProps["network"];
 }
 
-const addTokenToWallet = async (token: AddTokenButtonProps) => {
+const addTokensToWallet = async ({ network }: AddTokensButtonProps) => {
   const { ethereum } = window as any;
-
-  if (ethereum.chainId != chainMap[token.network]) {
-    await ethereumRequest("wallet_addEthereumChain", [configMap[token.network]]);
+  if (ethereum.chainId != chainMap[network]) {
+    await ethereumRequest("wallet_addEthereumChain", [configMap[network]]);
+  }
+  for (const token of tokenConfigMap[network]) {
+    const params = {
+      options: {
+        address: token.address,
+        symbol: token.symbol,
+        decimals: token.decimals,
+        image: token.image,
+      },
+      type: "ERC20",
+    };
+    await ethereumRequest("wallet_watchAsset", params);
   }
-
-  const params = { options: { address: token.address, symbol: token.symbol, decimals: token.decimals, image: token.image }, type: "ERC20" };
-
-  await ethereumRequest("wallet_watchAsset", params);
-
 };
 
-export function AddTokenButton({
-  address,
-  symbol,
-  decimals,
-  image,
-  network,
-}: AddTokenButtonProps) {
+export function AddTokensButton({ network }: AddTokensButtonProps) {
   return (
     <div
-      onClick={() => addTokenToWallet({ address, symbol, decimals, image, network })}
-      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+      onClick={() => addTokensToWallet({ network })}
+      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center m-1 w-48 justify-center"
     >
-      Add {symbol} ({network})
+      Add {network} tokens
     </div>
   );
 }
diff --git a/packages/website/components/Button/ConnectToMetamaskButton.tsx b/packages/website/components/Button/ConnectToMetamaskButton.tsx
@@ -1,17 +1,18 @@
 import {
-  SEPOLIA_CONFIG,
-  GRIMSVOTN_CONFIG,
+  ELDFELL_ADD_ETHEREUM_CHAIN,
   ELDFELL_CONFIG,
   GRIMSVOTN_ADD_ETHEREUM_CHAIN,
-  ELDFELL_ADD_ETHEREUM_CHAIN,
+  GRIMSVOTN_CONFIG,
+  SEPOLIA_CONFIG,
 } from "../../domain/chain";
+
 import { ethereumRequest } from "../../utils/ethereumRequest";
 
 type ConnectButtonProps = {
   network:
-    | typeof SEPOLIA_CONFIG.names.shortName
-    | typeof ELDFELL_CONFIG.names.shortName
-    | typeof GRIMSVOTN_CONFIG.names.shortName;
+  | typeof SEPOLIA_CONFIG.names.shortName
+  | typeof ELDFELL_CONFIG.names.shortName
+  | typeof GRIMSVOTN_CONFIG.names.shortName;
 };
 
 const chainMap = {
@@ -52,7 +53,7 @@ async function ConnectToMetamask(network: ConnectButtonProps["network"]) {
   } catch (error) {
     alert(
       "Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " +
-        error.message
+      error.message
     );
   }
 }
@@ -61,7 +62,7 @@ export function ConnectToMetamaskButton(props: ConnectButtonProps) {
   return (
     <div
       onClick={() => ConnectToMetamask(props.network)}
-      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center m-1 w-48 justify-center"
     >
       Connect to {props.network}
     </div>

diff --git a/packages/website/domain/chain/baseTypes.ts b/packages/website/domain/chain/baseTypes.ts
@@ -54,6 +54,15 @@ interface AddEthereumChainParameter {
   rpcUrls: string[];
 }
 
+// Interface from EIP-747: https://eips.ethereum.org/EIPS/eip-747
+interface AddTokenParameter {
+  address: string;
+  symbol: string;
+  decimals: number;
+  image: string;
+}
+
+
 // Taiko network types
 interface BasedContracts {
   addressManager: Contract;
@@ -107,6 +116,7 @@ type TaikoL2Alpha4 = TaikoL2Alpha3;
 
 export type {
   AddEthereumChainParameter,
+  AddTokenParameter,
   TaikoL1Alpha3,
   TaikoL1Alpha4,
   TaikoL2Alpha3,

diff --git a/packages/website/domain/chain/eldfell/addTokens.ts b/packages/website/domain/chain/eldfell/addTokens.ts
@@ -0,0 +1,31 @@
+import { AddTokenParameter } from "../baseTypes";
+import { ELDFELL_CONFIG } from "./config";
+
+export const ELDFELL_ADD_TTKO: AddTokenParameter = {
+    address: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.address.impl,
+    symbol: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.symbol,
+    decimals: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg"
+};
+
+export const ELDFELL_ADD_BLL: AddTokenParameter = {
+    address: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.address.impl,
+    symbol: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.symbol,
+    decimals: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull.svg"
+};
+
+export const ELDFELL_ADD_HORSE: AddTokenParameter = {
+    address: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.address.impl,
+    symbol: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.symbol,
+    decimals: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg"
+};
+
+export const ELDFELL_ADD_TOKENS = [
+    ELDFELL_ADD_TTKO,
+    ELDFELL_ADD_BLL,
+    ELDFELL_ADD_HORSE
+]
+
+
diff --git a/packages/website/domain/chain/grimsvotn/addTokens.ts b/packages/website/domain/chain/grimsvotn/addTokens.ts
@@ -0,0 +1,39 @@
+import { AddTokenParameter } from "../baseTypes";
+import { GRIMSVOTN_CONFIG } from "./config";
+
+export const GRIMSVOTN_ADD_TTKO: AddTokenParameter = {
+    address: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.address.impl,
+    symbol: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.symbol,
+    decimals: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg"
+};
+
+export const GRIMSVOTN_ADD_TTKOE: AddTokenParameter = {
+    address: GRIMSVOTN_CONFIG.basedContracts.erc20Contracts.taikoToken.address.proxy,
+    symbol: GRIMSVOTN_CONFIG.basedContracts.erc20Contracts.taikoToken.symbol,
+    decimals: GRIMSVOTN_CONFIG.basedContracts.erc20Contracts.taikoToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg"
+};
+
+export const GRIMSVOTN_ADD_BLL: AddTokenParameter = {
+    address: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.address.impl,
+    symbol: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.symbol,
+    decimals: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull.svg"
+};
+
+export const GRIMSVOTN_ADD_HORSE: AddTokenParameter = {
+    address: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.address.impl,
+    symbol: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.symbol,
+    decimals: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg"
+};
+
+export const GRIMSVOTN_ADD_TOKENS = [
+    GRIMSVOTN_ADD_TTKO,
+    GRIMSVOTN_ADD_TTKOE,
+    GRIMSVOTN_ADD_BLL,
+    GRIMSVOTN_ADD_HORSE
+]
+
+
diff --git a/packages/website/domain/chain/index.ts b/packages/website/domain/chain/index.ts
@@ -7,3 +7,7 @@ export { ELDFELL_CONFIG } from "./eldfell/config";
 export { SEPOLIA_ADD_ETHEREUM_CHAIN } from "./sepolia/addEthereumChain";
 export { GRIMSVOTN_ADD_ETHEREUM_CHAIN } from "./grimsvotn/addEthereumChain";
 export { ELDFELL_ADD_ETHEREUM_CHAIN } from "./eldfell/addEthereumChain";
+
+export { SEPOLIA_ADD_TOKENS } from "./sepolia/addTokens";
+export { GRIMSVOTN_ADD_TOKENS } from "./grimsvotn/addTokens";
+export { ELDFELL_ADD_TOKENS } from "./eldfell/addTokens";
diff --git a/packages/website/domain/chain/sepolia/addTokens.ts b/packages/website/domain/chain/sepolia/addTokens.ts
@@ -0,0 +1,33 @@
+import { AddTokenParameter } from "../baseTypes";
+import { SEPOLIA_CONFIG } from "./config";
+
+export const SEPOLIA_ADD_TTKO: AddTokenParameter = {
+    address: SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.address.proxy,
+    symbol: SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.symbol,
+    decimals: SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg"
+};
+
+export const SEPOLIA_ADD_BLL: AddTokenParameter = {
+    address: SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.address.impl,
+    symbol: SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.symbol,
+    decimals: SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull.svg"
+};
+
+
+export const SEPOLIA_ADD_HORSE: AddTokenParameter = {
+    address: SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.address.impl,
+    symbol: SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.symbol,
+    decimals: SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.decimals,
+    image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg"
+};
+
+export const SEPOLIA_ADD_TOKENS = [
+    SEPOLIA_ADD_TTKO,
+    SEPOLIA_ADD_BLL,
+    SEPOLIA_ADD_HORSE
+]
+
+
+
diff --git a/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx b/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx
@@ -1,5 +1,5 @@
 import { Steps } from "nextra-theme-docs";
-import { AddTokenButton } from "components/Button/AddTokenButton";
+import { AddTokensButton } from "components/Button/AddTokensButton";
 import { ConnectToMetamaskButton } from "components/Button/ConnectToMetamaskButton";
 
 import { ELDFELL_CONFIG, GRIMSVOTN_CONFIG, SEPOLIA_CONFIG } from "domain/chain";
@@ -23,37 +23,14 @@ This guide helps you connect your wallet to Taiko's networks.
     <ConnectToMetamaskButton network={ELDFELL_CONFIG.names.shortName} />
 
     ### Add tokens to your wallet
-    <AddTokenButton address={SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.address.proxy}
-    symbol={SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.symbol}
-    decimals={SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.decimals}
-    image="https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg"
-    network="Sepolia"/>
-    <AddTokenButton address={SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.address.impl}
-    symbol={SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.symbol}
-    decimals={SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.decimals}
-    image="https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull_32x32.svg"
-    network="Sepolia"/>
-    <AddTokenButton address={SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.address.impl}
-    symbol={SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.symbol}
-    decimals={SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.decimals}
-    image="https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg"
-    network="Sepolia"/>
+    <AddTokensButton
+    network={SEPOLIA_CONFIG.names.shortName}/>
     <br />
-    <AddTokenButton address={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.address.impl}
-    symbol={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.symbol}
-    decimals={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.decimals}
-    image="https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg"
-    network="Grimsvotn"/>
-    <AddTokenButton address={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.address.impl}
-    symbol={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.symbol}
-    decimals={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.decimals}
-    image="https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull_32x32.svg"
-    network="Grimsvotn"/>
-    <AddTokenButton address={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.address.impl}
-    symbol={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.symbol}
-    decimals={GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.decimals}
-    image="https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg"
-    network="Grimsvotn"/>
+    <AddTokensButton
+    network={GRIMSVOTN_CONFIG.names.shortName}/>
+    <br />
+    <AddTokensButton
+    network={ELDFELL_CONFIG.names.shortName}/>
 
 </Steps>