Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 16 commits into from
Jul 23, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
41eed48
feat(website): update wallet setup docs
2manslkh Jul 19, 2023
405c399
feat: further simplification
2manslkh Jul 19, 2023
659c7e8
update image name
2manslkh Jul 20, 2023
1ca02e0
feat: create add tokens button
2manslkh Jul 20, 2023
2ba3e01
update css
2manslkh Jul 20, 2023
8f5df05
Trigger build
dionysuzx Jul 20, 2023
0caae2d
Merge branch 'main' into testnet-token-buttons
dionysuzx Jul 21, 2023
c070345
add eldfell tokens
2manslkh Jul 21, 2023
6b61d95
Merge branch 'main' into testnet-token-buttons
2manslkh Jul 21, 2023
ab3f8d6
add TTKOe on L2
2manslkh Jul 21, 2023
0479dd5
feat(website): add node runner manuals (#14236)
dionysuzx Jul 21, 2023
f9faa6e
feat(website): add warning for casual provers (#14232)
2manslkh Jul 21, 2023
ad4df33
feat(website): add l3 error handling (#14231)
2manslkh Jul 21, 2023
a7707e7
feat(website): add private key warning (#14240)
dionysuzx Jul 21, 2023
e47df35
Merge branch 'main' into testnet-token-buttons
2manslkh Jul 22, 2023
134dabb
Merge branch 'main' into testnet-token-buttons
2manslkh Jul 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...nding/testnet-token-images/bull_32x32.svg → ...es/branding/testnet-token-images/bull.svg
View file
Open in desktop
File renamed without changes
53 changes: 29 additions & 24 deletions ...site/components/Button/AddTokenButton.tsx → ...ite/components/Button/AddTokensButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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>
);
}
17 changes: 9 additions & 8 deletions packages/website/components/Button/ConnectToMetamaskButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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
);
}
}
Expand All @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions packages/website/domain/chain/baseTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -107,6 +116,7 @@ type TaikoL2Alpha4 = TaikoL2Alpha3;

export type {
AddEthereumChainParameter,
AddTokenParameter,
TaikoL1Alpha3,
TaikoL1Alpha4,
TaikoL2Alpha3,
Expand Down
31 changes: 31 additions & 0 deletions packages/website/domain/chain/eldfell/addTokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
]


39 changes: 39 additions & 0 deletions packages/website/domain/chain/grimsvotn/addTokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
]


4 changes: 4 additions & 0 deletions packages/website/domain/chain/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
33 changes: 33 additions & 0 deletions packages/website/domain/chain/sepolia/addTokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
]



39 changes: 8 additions & 31 deletions packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>

Expand Down