Skip to content

Commit

Permalink
updating imagery for Linea Bridge UI
Browse files Browse the repository at this point in the history
  • Loading branch information
sammysango committed Sep 18, 2024
1 parent 5f1990b commit c50b2be
Show file tree
Hide file tree
Showing 35 changed files with 67 additions and 30 deletions.
4 changes: 2 additions & 2 deletions docs/developers/guides/bridge/how-to-bridge-erc20-tokens.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ and appropriately fund your wallet.
2. Connect your wallet in the top-right corner of the page.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ERC20_tokens_between_Ethereum_and_Linea/Linea_Bridge_connect_wallet_button.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_connect_wallet_button.png"
alt="Linea bridge connect wallet button"
/>
</div>
Expand Down
93 changes: 65 additions & 28 deletions docs/developers/guides/bridge/how-to-bridge-eth.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ until you can cover the fees.
2. Connect your wallet in the top-right corner of the page.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_connect_wallet_button.png"
alt="Linea bridge connect wallet button"
Expand All @@ -61,12 +61,21 @@ until you can cover the fees.

3. Verify that the bridge is set to Ethereum → Linea Mainnet and that automatic claiming is enabled.

<div class="center-container">
<div class="img-medium">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_automatic_claim_set_eth_to_linea.png"
alt="Linea bridge choose networks"
/>
</div>
</div>

4. Enter the amount of ETH you want to bridge over to Linea Mainnet, and click the “Bridge” button.

<div class="center-container">
<div class="img-medium">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_automatic_claiming_choose_amount.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_automatic_claim_eth_to_linea_amount.png"
alt="Linea bridge choose amount"
/>
</div>
Expand All @@ -77,7 +86,7 @@ until you can cover the fees.
<div class="center-container">
<div class="img-small">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_confirm_transaction_MetaMask.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_eth_to_linea_confirm.png"
alt="Confirm Linea bridge transaction in MetaMask"
/>
</div>
Expand All @@ -87,21 +96,21 @@ until you can cover the fees.
Linea Mainnet. You can see your pending transaction under the "Transactions" tab.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_automatic_claiming_pending_transaction.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_eth_to_linea_pending.png"
alt="Linea bridge pending transaction"
/>
</div>
</div>

7. When your transaction is complete, it should say "Bridging complete" and your ETH should be on
7. When your transaction is complete, it should say "Complete" and your ETH should be on
Linea Mainnet.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_L1_to_L2_bridging_complete.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_automatic_claim_eth_to_linea_completed.png"
alt="Linea bridge complete transaction"
/>
</div>
Expand All @@ -119,7 +128,7 @@ account's balance.
2. Connect your wallet in the top-right corner of the page.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_connect_wallet_button.png"
alt="Linea bridge connect wallet button"
Expand All @@ -129,13 +138,22 @@ account's balance.

3. Verify that the bridge is set to Ethereum → Linea Mainnet, and that manual claiming is enabled.

<div class="center-container">
<div class="img-medium">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_manual_claim_set_eth_to_linea.png"
alt="Linea bridge choose networks"
/>
</div>
</div>

4. Enter the amount of ETH you want to bridge over to Linea Mainnet, and click the "Bridge"
button.

<div class="center-container">
<div class="img-medium">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_manual_claiming_choose_amount.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_manual_claim_eth_to_linea_amount.png"
alt="Linea bridge choose amount"
/>
</div>
Expand All @@ -146,21 +164,31 @@ button.
<div class="center-container">
<div class="img-small">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_confirm_transaction_MetaMask.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_eth_to_linea_confirm.png"
alt="Confirm Linea bridge transaction in MetaMask"
/>
</div>
</div>

6. Once confirmed, head to the "Transactions" tab in the sidebar. Here you'll see your transaction
labelled "Pending" until it is ready to claim. When it is ready, it will change to "Ready to claim".
labelled "Pending" until it is ready to claim. When it is ready, it will change to "Ready to claim".

<div class="center-container">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_eth_to_linea_ready_to_claim.png"
alt="Linea bridge transaction ready to claim"
/>
</div>
</div>

To claim, click on the transaction to open its details, then click "Claim".

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_manual_claiming_claim_button.png"
alt="Linea bridge claim funds button"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_manual_claim_button.png"
alt="Confirm Linea bridge claim funds manually"
/>
</div>
</div>
Expand All @@ -170,8 +198,8 @@ To claim, click on the transaction to open its details, then click "Claim".
<div class="center-container">
<div class="img-small">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_confirm_switch_network_MetaMask.png"
alt="MetaMask contract interaction notification"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_manual_claim_confirm.png"
alt="Linea Bridge MetaMask manual claim confirmation"
/>
</div>
</div>
Expand All @@ -180,9 +208,9 @@ To claim, click on the transaction to open its details, then click "Claim".
should be on Linea Mainnet.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_L1_to_L2_bridging_complete.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_automatic_claim_eth_to_linea_completed.png"
alt="Linea bridge complete transaction"
/>
</div>
Expand All @@ -207,7 +235,7 @@ this option for L2 to L1 bridging.
2. Connect your wallet in the top-right corner of the page.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_connect_wallet_button.png"
alt="Linea bridge connect wallet button"
Expand All @@ -218,13 +246,22 @@ this option for L2 to L1 bridging.
3. Verify that the bridge is set to Linea Mainnet -> Ethereum. Manual claiming is the only available
option for L2 to L1 bridging.

<div class="center-container">
<div class="img-medium">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_set_linea_to_eth.png"
alt="Linea bridge set Linea mainnet to Ethereum"
/>
</div>
</div>

4. Enter the amount of ETH you want to bridge over to Ethereum Mainnet, and select the "Bridge"
button.

<div class="center-container">
<div class="img-medium">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_L2_to_L1_choose_amount.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_linea_to_eth_amount.png"
alt="Linea bridge choose amount"
/>
</div>
Expand All @@ -235,7 +272,7 @@ button.
<div class="center-container">
<div class="img-small">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_confirm_transaction_MetaMask.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_linea_to_eth_confirm.png"
alt="Confirm Linea bridge transaction in MetaMask"
/>
</div>
Expand All @@ -245,9 +282,9 @@ button.
at least 8 hours for the transaction to go through from L2 to L1.

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_L2_to_L1_pending_transaction.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_linea_to_eth_pending.png"
alt="Linea bridge pending transaction"
/>
</div>
Expand All @@ -258,10 +295,10 @@ labelled "Pending" until it is ready to claim. When it is ready, it will change
To claim, click on the transaction to open its details, then click "Claim".

<div class="center-container">
<div class="img-medium">
<div class="img-large">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_L2_to_L1_claim_button.png"
alt="Linea bridge claim funds button"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_linea_to_eth_manual_claim_button.png"
alt="Linea bridge claim manual transaction"
/>
</div>
</div>
Expand All @@ -271,7 +308,7 @@ To claim, click on the transaction to open its details, then click "Claim".
<div class="center-container">
<div class="img-small">
<img
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_confirm_switch_network_MetaMask.png"
src="/img/article_images/Use_Linea/Bridge_your_tokens/How_to_bridge_ETH_between_Ethereum_and_Linea/Linea_Bridge_linea_to_eth_manual_claim_confirm.png"
alt="MetaMask contract interaction notification"
/>
</div>
Expand Down
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Diff not rendered.

0 comments on commit c50b2be

Please sign in to comment.