Skip to content

Commit

Permalink
feat(website): update wallet setup docs (#14209)
Browse files Browse the repository at this point in the history
  • Loading branch information
2manslkh authored Jul 19, 2023
1 parent a7fd219 commit 57ef8f2
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 7 deletions.
46 changes: 42 additions & 4 deletions packages/website/components/Button/AddTokenButton.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,67 @@
import {
ELDFELL_ADD_ETHEREUM_CHAIN,
ELDFELL_CONFIG,
GRIMSVOTN_ADD_ETHEREUM_CHAIN,
GRIMSVOTN_CONFIG,
SEPOLIA_ADD_ETHEREUM_CHAIN,
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;
};

const chainMap = {
Eldfell: ELDFELL_CONFIG.chainId.hex, // 167005
Grimsvotn: GRIMSVOTN_CONFIG.chainId.hex, // 167005
Sepolia: SEPOLIA_CONFIG.chainId.hex, // 11155111
};

const configMap = {
Eldfell: ELDFELL_ADD_ETHEREUM_CHAIN,
Grimsvotn: GRIMSVOTN_ADD_ETHEREUM_CHAIN,
Sepolia: SEPOLIA_ADD_ETHEREUM_CHAIN,
};

interface AddTokenButtonProps {
address: string;
symbol: string;
decimals: number;
image: string;
network: ConnectButtonProps["network"];
}

const addTokenToWallet = async (token: AddTokenButtonProps) => {
const options = { ...token, type: "ERC20" };
await ethereumRequest("wallet_watchAsset", options);
const { ethereum } = window as any;

if (ethereum.chainId != chainMap[token.network]) {
await ethereumRequest("wallet_addEthereumChain", [configMap[token.network]]);
}

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) {
return (
<div
onClick={() => addTokenToWallet({ address, symbol, decimals, image })}
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"
>
Add {symbol} to wallet
Add {symbol} ({network})
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Steps } from "nextra-theme-docs";
import { AddTokenButton } from "components/Button/AddTokenButton";
import { ConnectToMetamaskButton } from "components/Button/ConnectToMetamaskButton";

import {
ELDFELL_CONFIG,
GRIMSVOTN_CONFIG,
SEPOLIA_CONFIG,
} from "domain/chain";

# Setup your wallet

Expand All @@ -11,11 +19,45 @@ This guide helps you connect your wallet to Taiko's networks.
## Steps

<Steps>
### Visit RPC configuration
Visit the [RPC configuration page](/docs/reference/rpc-configuration) and click the buttons to add the networks. Or, add them manually in your wallet with the provided configuration.
### Add chains to your wallet
<ConnectToMetamaskButton network={SEPOLIA_CONFIG.names.shortName} />
<br />
<ConnectToMetamaskButton network={GRIMSVOTN_CONFIG.names.shortName} />
<br />
<ConnectToMetamaskButton network={ELDFELL_CONFIG.names.shortName} />

### Add tokens to your wallet
Use your wallet (e.g., Metamask) to [import the tokens](https://support.ledger.com/hc/en-us/articles/6375103346077-Add-custom-tokens-to-MetaMask?docs=true). You can find all deployed tokens contract addresses [here](/docs/reference/contract-addresses).
<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"/>
<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"/>

</Steps>

Expand Down

0 comments on commit 57ef8f2

Please sign in to comment.