From 64dec359d950957e29e6e195fe3c140890f594d0 Mon Sep 17 00:00:00 2001 From: Daniel Helm Date: Fri, 17 May 2024 18:24:34 +0800 Subject: [PATCH 1/6] update node version --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index 13480246a..67d2ffed5 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.14.1 \ No newline at end of file +v20.13.1 \ No newline at end of file From b0a13973f6cbef6cbb2a944942847544cb94bfb7 Mon Sep 17 00:00:00 2001 From: isabelle Date: Fri, 17 May 2024 16:49:45 -0400 Subject: [PATCH 2/6] amend bridge instructions to not be sepolia specific, add new deposit modes --- src/content/docs/en/user-guide/bridge.mdx | 56 ++++++++++------------- 1 file changed, 24 insertions(+), 32 deletions(-) diff --git a/src/content/docs/en/user-guide/bridge.mdx b/src/content/docs/en/user-guide/bridge.mdx index 06fed6bc3..6c3f0bfcf 100644 --- a/src/content/docs/en/user-guide/bridge.mdx +++ b/src/content/docs/en/user-guide/bridge.mdx @@ -20,32 +20,25 @@ excerpt: "To start bridging assets from Sepolia, navigate to the portal bridge a {/* TODO: Update all instructions after being able to walk through the whole flow. */} -Visit our [Bridge](https://sepolia.scroll.io/bridge) app to get started![^thanks-hop] The Bridge supports both **Deposit** and **Withdraw** operations, allowing users to trustlessly move assets from Sepolia Testnet to Scroll Sepolia Testnet. +Visit our bridge app on [Sepolia](https://sepolia.scroll.io/bridge) or [Mainnet](https://scroll.io/bridge) to get started![^thanks-hop] The Bridge supports both **Deposit** and **Withdraw** operations, allowing users to trustlessly move assets from L1 to L2. [^thanks-hop]: Forked from [Hop Exchange](https://hop.exchange/)'s UI 🙌 -Deposits can take up to 15 minutes to be available on Scroll. - -Withdrawals, which require a second interaction on Sepolia after the withdrawal is finalized, can take much longer. - -:::caution[Waiting a long time for a bridge transaction?] -The time estimates above are typical for normal network behavior and activity levels. Because we only process so many queued L1 transactions per an L2 block, bridged messages may take longer to be included on Scroll in times of exceptional network usage. -::: - -## Deposit from Sepolia to Scroll Sepolia +## Deposit from L1 to L2 ### Instructions -1. First, navigate to the [Scroll Bridge](https://sepolia.scroll.io/bridge) and press the "Connect Wallet" button. -1. In the app, ensure that **Ethereum Sepolia** is on top and **Scroll Sepolia** is on the bottom. You can click the "**↓**" button to switch their positions. -1. Select the token you want to transfer from Sepolia to Scroll Sepolia. If it's you're first time bridging, try "ETH." -1. If this is your first time transferring a specific ERC20 token, you must **Approve** the Sepolia Bridge contract to access your ERC20 token. -1. Next, click the **Send to Scroll Sepolia** button to make the deposit. Your wallet will ask to confirm the transfer transaction. -1. Once the transfer transaction is sent and confirmed, the token will be deducted from your Sepolia wallet. -1. You can always check the status of a transaction by pressing the "History" icon next to your wallet address in the top-right corner. +1. After navigating to the bridge app, press the "Connect Wallet" button. You might need to switch your wallet to the right network. +1. In the app, select the **Deposit to Scroll** tab. +1. Select the token you want to transfer from the L1 network. If it's your first time bridging, try "ETH." +1. If this is your first time transferring a specific ERC20 token, you must **Approve** the Sepolia or Ethereum Bridge contract to access your ERC20 token. +1. Select your deposit mode. The Fast option initiates a bridge transfer immediately, while the Economy option groups multiple requests together and initiates a single bridge transfer for the batch, sharing the cost among all included requests. +1. Next, slide the **Deposit funds** button to make the deposit. Your wallet will ask to confirm the transfer transaction. +1. Once the transfer transaction is sent and confirmed, the token will be deducted from your wallet. +1. You can always check the status of a transaction by pressing the "Transaction History" icon next to your wallet address in the top-right corner. -### When will the token arrive in your Scroll Sepolia wallet? +{/* ### When will the token arrive in your Scroll Sepolia wallet? -It could take between **8 to 14 minutes** (awaiting block to become [_Safe_](https://www.alchemy.com/overviews/ethereum-commitment-levels#what-are-ethereum-commitment-levels) on Sepolia) before the token shows up in your Scroll Sepolia wallet. +It could take between **8 to 14 minutes** (awaiting block to become [_Safe_](https://www.alchemy.com/overviews/ethereum-commitment-levels#what-are-ethereum-commitment-levels) on Sepolia) before the token shows up in your Scroll Sepolia wallet. */} {/* You can check the progress of deposit transactions as follows: */} @@ -71,37 +64,36 @@ It could take between **8 to 14 minutes** (awaiting block to become [_Safe_](htt {/* */} -## Withdraw from Scroll Sepolia to Sepolia +## Withdraw from L2 to L1 ### Instructions #### Submitting your Initial Withdrawal Transaction -1. First, switch to the **Scroll Sepolia** network in your wallet. -1. In the app, ensure that **Scroll Sepolia** is on top and **Ethereum Sepolia** is on the bottom. You can click the "**↓**" button to switch the positions. -1. Select the token you want to transfer from **Scroll Sepolia** to **Sepolia**. If it's you're first time bridging, try "ETH." -1. If this is your first time transferring a specific ERC20 token, you must **Approve** the Scroll Sepolia Bridge contract to access your ERC20 token. -1. Next, click the **Send to Ethereum Sepolia** button to make the withdrawal. Your wallet will ask to confirm the transfer transaction. -1. Once the transfer transaction is sent and confirmed, the token will be deducted from your Scroll Sepolia wallet. +1. First, select the **Withdraw to Ethereum** tab in the app. You might need to switch your wallet to the right network. +1. Select the token you want to transfer, If it's you're first time bridging, try "ETH." +1. If this is your first time transferring a specific ERC20 token, you must **Approve** the Scroll Bridge contract to access your ERC20 token. +1. Next, slide the **Withdraw funds** button to make the withdrawal. Your wallet will ask to confirm the transfer transaction. +1. Once the transfer transaction is sent and confirmed, the token will be deducted from your wallet. #### Submitting an Execute Withdrawal Transaction {/* TODO: finish the additional instructions, better estimate "wait time" */} -_The remaining steps happen on Scroll Sepolia, but you first must wait for your transaction to be fully proven ("finalized") on Ethereum Sepolia. This process can take up to four hours._ +_The remaining steps happen on Scroll, but you first must wait for your transaction to be fully proven ("finalized") on the L1 side. This process can take up to four hours._ -1. When your withdrawal transaction is completed finalizing on Ethereum Sepolia, you will see the "Claim" button in the Recent Transactions area become solid. +1. When your withdrawal transaction is completed finalizing on Sepolia or Ethereum, you will see the "Claim" button in the Recent Transactions area become solid. 1. Click the "Claim" button to submit the Execute Withdrawal transaction. -1. Once submitted, your withdrawn funds should appear immediately in your Sepolia wallet. +1. Once submitted, your withdrawn funds should appear immediately in your wallet. -### When will the token arrive in your Sepolia wallet? +### When will the token arrive in your wallet? -The transferred token will arrive in your Sepolia wallet immediately after the block containing your Execute Withdrawal transaction is confirmed on Sepolia. +The transferred token will arrive in your wallet immediately after the block containing your Execute Withdrawal transaction is confirmed. {/* TODO: check architecture link is live */} :::tip[Rollup Status] -The rollup status `Finalized` indicates that the correct execution of transactions in this block has been proven by verifying a validity proof on-chain on Sepolia. For more information about rollup status, see [Scroll's Architecture Overview](/technology). +The rollup status `Finalized` indicates that the correct execution of transactions in this block has been proven by verifying a validity proof on-chain on the L1 chain. For more information about rollup status, see [Scroll's Architecture Overview](/technology). ::: {/* You can check the progress of withdrawal transactions as follows: */} From 0eefc025334142dced627f35181d0ba8ad4ae7db Mon Sep 17 00:00:00 2001 From: zhengqi zhang <770166635@qq.com> Date: Sat, 18 May 2024 19:44:42 +0800 Subject: [PATCH 3/6] improve tabs style --- src/components/Tabs/Tabs.module.css | 15 +++++++++++++++ src/components/Tabs/Tabs.tsx | 4 ++-- src/components/Tabs/TabsContent.tsx | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css index 59cf80bd9..2a1c43175 100644 --- a/src/components/Tabs/Tabs.module.css +++ b/src/components/Tabs/Tabs.module.css @@ -1,6 +1,21 @@ .container { @apply mt-4; } +.tablist { + @apply border-0 border-b border-solid border-black mb-4; +} + +.tablist button { + @apply bg-transparent text-black border-none text-xl font-semibold leading-8 outline-none mb-[-1px] mr-12 capitalize; +} + +button.primary, +button.contentTabPrimary { + @apply text-link border-link border-0 border-b-4 border-solid; +} + +button.secondary { +} .tab { @apply py-1 px-2 mr-2; diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 6860905bc..664790ede 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -65,7 +65,7 @@ export function Tabs({ sharedStore, ...slots }: Props) { return (
-
+
{tabs.map(([key, content]) => ( diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/TabsContent.tsx index f076839ee..5742968fe 100644 --- a/src/components/Tabs/TabsContent.tsx +++ b/src/components/Tabs/TabsContent.tsx @@ -64,7 +64,7 @@ export function TabsContent({ sharedStore, ...slots }: Props) { return (
-
+
{tabs.map(([key, content]) => (