Skip to content

Commit

Permalink
feat(website): update website with alpha-3 docs (#13723)
Browse files Browse the repository at this point in the history
Co-authored-by: Kenk <kenghin_lim@hotmail.com>
  • Loading branch information
d1onys1us and 2manslkh committed Jun 7, 2023
1 parent 7b0976f commit 95303a5
Show file tree
Hide file tree
Showing 40 changed files with 1,630 additions and 339 deletions.
2 changes: 1 addition & 1 deletion packages/website/components/BlogSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function BlogSection() {
Check out the full blog at{" "}
<a
className="underline"
href="https://mirror.xyz/labs.taiko.eth"
href="https://taiko.mirror.xyz"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
3 changes: 1 addition & 2 deletions packages/website/components/EcosystemCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ function EcosystemCard({ icon, name, link, description }) {
href={link}
target="_blank"
rel="noopener noreferrer"
className="rounded-xl shadow-md bg-white dark:bg-neutral-800 p-6 flex flex-col justify-start items-start
transition-colors duration-200 hover:shadow-xl dark:hover:bg-neutral-700"
className="rounded-xl shadow-md bg-white dark:bg-neutral-800 p-6 flex flex-col justify-start items-start transition-colors duration-200 hover:shadow-xl dark:hover:bg-neutral-700"
>
<img src={icon} alt={`${name}-logo`} className="w-16 h-16 mb-4" />
<h2 className="text-2xl text-black dark:text-white font-bold mb-2">
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/EcosystemSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function EcosystemSection() {
{
icon: "/images/ecosystem/loopring.svg",
name: "Loopring Wallet",
link: "https://loopring.io/#/wallet",
link: "https://loopring.io/wallet.html",
description:
"Loopring is your mobile gateway to Ethereum L2, enabling you to easily trade, swap, collect, stake, and invest without the costly gas fees.",
},
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/FeaturesSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const features = [

export default function FeaturesSection() {
return (
<div className="mx-auto max-w-md px-6 text-center sm:max-w-2xl lg:max-w-7xl lg:px-8 dark:bg-neutral-950">
<div className="mx-auto max-w-md px-6 text-center sm:max-w-2xl lg:max-w-7xl lg:px-8">
<div className="my-20">
<div className="grid grid-cols-1 gap-12 sm:grid-cols-1 lg:grid-cols-3">
{features.map((feature) => (
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function Hero() {
<div className="mt-10 flex md:justify-left">
<div className="inline-flex rounded-md shadow">
<a
href="/docs"
href="/docs/guides"
className="inline-flex items-center rounded-md border border-transparent bg-[#e81899] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#d1168a] hover:no-underline hover:text-white"
>
Get started →
Expand Down
11 changes: 5 additions & 6 deletions packages/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,18 @@
"@vercel/analytics": "^1.0.1",
"next": "^13.4.4",
"next-themes": "^0.2.1",
"nextra": "^2.6.2",
"nextra-theme-docs": "^2.6.2",
"nextra": "^2.7.0",
"nextra-theme-docs": "^2.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sharp": "^0.31.3"
"react-dom": "^18.2.0"
},
"devDependencies": {
"@heroicons/react": "^2.0.18",
"@types/node": "^18.16.16",
"@types/node": "^20.2.5",
"@types/react": "^18.2.8",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2",
"typescript": "^4.9.5"
"typescript": "^5.1.3"
}
}
13 changes: 8 additions & 5 deletions packages/website/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import "../styles.css";
import localFont from "next/font/local";

import { Analytics } from "@vercel/analytics/react";
import localFont from "next/font/local";

const grotesk = localFont({
src: "../fonts/ClashGrotesk-Semibold.woff2",
Expand All @@ -16,9 +17,11 @@ const groteskmedium = localFont({

export default function App({ Component, pageProps }) {
return (
<main className={`${grotesk.variable} ${groteskmedium.variable}`}>
<Component {...pageProps} />
<Analytics />
</main>
<>
<main className={`${grotesk.variable} ${groteskmedium.variable}`}>
<Component {...pageProps} />
<Analytics />
</main>
</>
);
}
46 changes: 43 additions & 3 deletions packages/website/pages/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,63 @@
"title": "Docs",
"type": "page"
},
"blog": {
"title": "Blog",
"bridge": {
"title": "Bridge",
"type": "page",
"href": "https://mirror.xyz/labs.taiko.eth",
"href": "https://bridge.test.taiko.xyz",
"newWindow": true
},
"swap": {
"title": "Swap",
"type": "page",
"display": "hidden",
"href": "https://swap.test.taiko.xyz",
"newWindow": true
},
"explorers": {
"title": "Explorers",
"type": "menu",
"items": {
"status": {
"title": "Protocol Status",
"href": "https://status.test.taiko.xyz",
"newWindow": true
},
"l1-block-explorer": {
"title": "L1 Block Explorer",
"href": "https://sepolia.etherscan.io",
"newWindow": true
},
"l2-block-explorer": {
"title": "L2 Block Explorer",
"href": "https://explorer.test.taiko.xyz",
"newWindow": true
}
}
},
"ecosystem": {
"title": "Ecosystem",
"type": "page",
"theme": {
"layout": "full"
}
},
"blog": {
"title": "Blog",
"type": "page",
"href": "https://mirror.xyz/labs.taiko.eth",
"newWindow": true
},
"forum": {
"title": "Forum",
"type": "page",
"href": "https://community.taiko.xyz/",
"newWindow": true
},
"feedback": {
"title": "Feedback",
"type": "page",
"href": "https://forms.gle/9JWjWtjbWytZZcNRA",
"newWindow": true
}
}
7 changes: 5 additions & 2 deletions packages/website/pages/docs/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@
"index": {
"title": "Hello 👋"
},
"concepts": {
"title": "Concepts"
"guides": {
"title": "Guides"
},
"reference": {
"title": "Reference"
},
"concepts": {
"title": "Concepts"
},
"resources": {
"title": "Resources"
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Taiko's bridge utilizes the Signal Service we described. Here is the general use

## How does ERC-20 bridging work?

ERC-20 tokens originate from a canonical chain. To send a token and bridge it to the other chain, a new BridgedERC20 contract needs to be deployed on the destination chain. For example, the HORSE token's canonical chain is [deployed on Ethereum (Sepolia)](https://explorer.a2.taiko.xyz/address/0x3E3a3416DbCc5cb4448B6b171fF15f9Da35Ab72d). To enable bridging to Taiko, there is also a BridgedERC20 contract for it [deployed on Taiko (Askja)](https://explorer.a2.taiko.xyz/address/0xb8eA36284d1Fa062cc0c969E28a49f3531cFB1bf).
ERC-20 tokens originate from a canonical chain. To send a token and bridge it to the other chain, a new BridgedERC20 contract needs to be deployed on the destination chain.

### Bridge from canonical chain to destination chain

Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
The bridge is a set of smart contracts and a frontend web app that allow you to send testnet ETH and ERC-20 tokens between Sepolia and Taiko. This bridge is just one possible implementation built on top of Taiko's core protocol, specifically the signal service which anybody can use to build bridges. You can try the bridge [here](https://bridge.a2.taiko.xyz).
The bridge is a set of smart contracts and a frontend web app that allow you to send testnet ETH and ERC-20 tokens between Sepolia and Taiko. This bridge is just one possible implementation built on top of Taiko's core protocol, specifically the signal service which anybody can use to build bridges. You can try the bridge [here](https://bridge.test.taiko.xyz).
2 changes: 1 addition & 1 deletion packages/website/pages/docs/concepts/overview.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Taiko aims to build a secure, decentralized, and permissionless rollup on Ethereum. These requirements dictate the following properties:
Taiko aims to build a secure, decentralized, and permissionless [rollup](https://www.youtube.com/watch?v=7pWxCklcNsU) on Ethereum. These requirements dictate the following properties:

1. All block data required to reconstruct the post-block state needs to be put on Ethereum so it is publicly available. If this would not be the case, Taiko would not only fail to be a rollup but would also fail to be fully decentralized. This data is required so that anyone can know the latest chain state and so that useful new blocks can be appended to the chain. For the decentralization of the proof generation Taiko requires an even stronger requirement: all block data needed to be able to re-execute all work in a block in a step-by-step fashion needs to be made public. This makes it possible for provers to generate a proof for a block using only publicly known data.
2. Creating and proposing blocks should be a fast and efficient process. Anyone should be able to add blocks to the chain on a level playing field, having access to the same chain data at all times. Proposers, of course, should be able to compete on e.g. transaction fees and [Maximal Extractable Value (MEV)](https://ethereum.org/en/developers/docs/mev/).
Expand Down
13 changes: 13 additions & 0 deletions packages/website/pages/docs/guides.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Guides

You can leave feedback [here](https://forms.gle/RZsweAPy5RhQSP6j7) and ask any questions on the [Taiko Discord](https://discord.gg/taikoxyz)!

- 💻 [Configure your wallet](/docs/guides/configure-your-wallet)
- 🎈 [Receive tokens](/docs/guides/receive-tokens)
- 🌉 [Use the bridge](/docs/guides/use-the-bridge){/* - 🔄 [Swap tokens](/docs/guides/swap-tokens) */}
- 🌐 [Run a node](/docs/guides/run-a-node)
- 📤 [Enable a proposer](/docs/guides/enable-a-proposer)
-[Enable a prover](/docs/guides/enable-a-prover)
- 🚀 [Deploy a contract](/docs/guides/deploy-a-contract)
- 📜 [Verify a contract](/docs/guides/verify-a-contract)
- 🛠️ [Build a dapp](/docs/guides/build-a-dapp)
33 changes: 33 additions & 0 deletions packages/website/pages/docs/guides/_meta.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"configure-your-wallet": {
"title": "💻 Configure your wallet"
},
"receive-tokens": {
"title": "🎈 Receive tokens"
},
"use-the-bridge": {
"title": "🌉 Use the bridge"
},
"swap-tokens": {
"title": "🔄 Swap tokens",
"display": "hidden"
},
"run-a-node": {
"title": "🌐 Run a node"
},
"enable-a-proposer": {
"title": "📤 Enable a proposer"
},
"enable-a-prover": {
"title": "✅ Enable a prover"
},
"deploy-a-contract": {
"title": "🚀 Deploy a contract"
},
"verify-a-contract": {
"title": "📜 Verify a contract"
},
"build-a-dapp": {
"title": "🛠️ Build a dapp"
}
}
12 changes: 12 additions & 0 deletions packages/website/pages/docs/guides/build-a-dapp.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Build a dapp

## Overview

This guide will help you build a dapp on Taiko in one click!

## Prerequisites

- A curiosity to learn and build 🙃.

## Steps
1. Visit the [dapp-slaps starter template](https://github.com/d1onys1us/dapp-slaps) to create an Ethereum dapp in one click.
31 changes: 31 additions & 0 deletions packages/website/pages/docs/guides/configure-your-wallet.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Steps } from "nextra-theme-docs";

# Configure your wallet

## Overview

This guide help you connect your wallet to Taiko (Alpha-3 testnet). There are two networks to configure your wallet with: Ethereum (Sepolia testnet) and Taiko (Alpha-3 testnet).

## Prerequisites

- You have a wallet installed and ready to use. Some examples are MetaMask and Frame. Please use a hot wallet (not a hardware wallet) for this guide, preferably a throwaway wallet.

## Steps

<Steps>
### Visit chainlist
Visit [https://chainlist.org/](https://chainlist.org/) and check the box for "Include Testnets".

### Add the Sepolia testnet
Search for "Sepolia", and click the "Add Chain" button.

### Add the Taiko testnet
Search for "Taiko", and click the "Add Chain" button for Taiko (Alpha-3 testnet).

### 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) with [this configuration](https://gist.githubusercontent.com/d1onys1us/8f8824daed0882b1094296f824fae53c/raw/15204c4a4927a7f48a78c195323ce0d573d6b7c0/taiko_tokens.json) (HORSE, BLL, and TTKO).
</Steps>

## Troubleshooting
### The add chain buttons did not work
Try to manually add the network to your wallet using the [RPC configuration](/docs/reference/rpc-configuration).
101 changes: 101 additions & 0 deletions packages/website/pages/docs/guides/deploy-a-contract.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { Callout, Steps, Tab, Tabs } from "nextra-theme-docs";

# Deploy a contract

## Overview

This guide will help you deploy a smart contract to Taiko using Foundry or Hardhat.

## Prerequisites

- You have [Foundry](https://book.getfoundry.sh/getting-started/installation) or [Hardhat](https://hardhat.org/hardhat-runner/docs/getting-started#quick-start) installed.
- You have testnet ETH on Taiko (to pay the transaction fee for deploying the contract).
- You can [request Sepolia ETH](/docs/guides/receive-tokens#receive-sepolia-eth) from the faucet and then [use the bridge](/docs/guides/use-the-bridge) to send the testnet ETH to Taiko.
- You have the private key to the account with testnet ETH on Taiko.

### Additional Remix prerequisites
- You have [configured your wallet](/docs/guides/configure-your-wallet) to connect to Taiko.

## Steps

<Tabs items={["Foundry", "Hardhat", "Remix"]} defaultIndex="0">
<Tab>
<Steps>
### Create a project with Foundry
```sh
forge init hello_foundry && cd hello_foundry
```

### Deploy your contract
Deploy the contract located at `src/Counter.sol`. Replace `YOUR_PRIVATE_KEY` below with your private key which has some testnet ETH on Taiko.
<Callout type="warning">
Use a throwaway wallet to be safe. Don't reveal the private key of a wallet with significant value!
</Callout>

```sh
forge create --rpc-url https://rpc.test.taiko.xyz --private-key YOUR_PRIVATE_KEY src/Counter.sol:Counter
```

### View your contract
Paste the address from the output into the [Taiko block explorer](https://explorer.test.taiko.xyz) and verify that the contract was deployed.
</Steps>
</Tab>
<Tab>
<Steps>
### Create a project with Hardhat
```sh
npx hardhat
```

### Add Taiko to your Hardhat config
<Callout type="warning">
For the `accounts` array, you will need to enter the private key of the account you are deploying the contract with. It is **not recommended** to hardcode the private key like this (an environment variable would be better, but is still risky).

Use a throwaway wallet to be safe. Don't reveal the private key of a wallet with significant value!
</Callout>

```ts {6-13} filename=hardhat.config.ts
import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";

const config: HardhatUserConfig = {
solidity: "0.8.18",
networks: {
taiko: {
url: "http://rpc.test.taiko.xyz",
accounts: [
"0xf214f2b2cd398c806f84e317254e0f0b801d0643303237d97a22a48e01628897",
],
},
},
};

export default config;
```

### Deploy your contract on Taiko
```sh
npx hardhat run --network taiko scripts/deploy.ts
```

### View your contract
Paste the address from the output into the [Taiko block explorer](https://explorer.test.taiko.xyz) and verify that the contract was deployed.
</Steps>
</Tab>
<Tab>
<Steps>
### Visit Remix and connect your wallet to Taiko
Visit [remix.ethereum.org](https://remix.ethereum.org) and connect your wallet to Taiko.

### Select a smart contract
![select a smart contract](/images/guides/deploy-remix/select.png)

### Compile your smart contract
![compile your smart contract](/images/guides/deploy-remix/compile.png)


### Deploy your smart contract
![deploy your smart contract](/images/guides/deploy-remix/deploy.png)
</Steps>
</Tab>
</Tabs>
Loading

0 comments on commit 95303a5

Please sign in to comment.