-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs-site): enhance some sections (#18850)
Co-authored-by: Roger <[email protected]> Co-authored-by: RogerLamTd <[email protected]>
- Loading branch information
3 people
authored
Feb 5, 2025
1 parent
02ae1cf
commit 61fff4e
Showing
16 changed files
with
1,355 additions
and
413 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| export const customIcons = { | ||
| custom: { | ||
| icons: { | ||
| 'metamask-logo': { | ||
| body: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| viewBox="0 0 204.8 192.4" style="enable-background:new 0 0 204.8 192.4;" xml:space="preserve"> | ||
| <style type="text/css"> | ||
| .st0{display:none;} | ||
| .st1{fill:#F5841F;} | ||
| .st2{fill:#E27625;} | ||
| .st3{fill:#D7C1B3;} | ||
| .st4{fill:#2F343B;} | ||
| .st5{fill:#CC6228;} | ||
| .st6{fill:#C0AD9E;} | ||
| .st7{fill:#763E1A;} | ||
| </style> | ||
| <g id="bg_x28_do_not_export_x29_" class="st0"> | ||
| </g> | ||
| <g id="MM_Head_background__x28_Do_not_edit_x29_"> | ||
| <g> | ||
| <path class="st1" d="M167.4,96.1l6.9-8.1l-3-2.2l4.8-4.4l-3.7-2.8l4.8-3.6l-3.1-2.4l5-24.4l-7.6-22.6 M171.5,25.6l-48.8,18.1l0,0 | ||
| l0,0H82l0,0L33.2,25.6l0.3,0.2l-0.3-0.2l-7.6,22.6l5.1,24.4L27.5,75l4.9,3.6l-3.7,2.8l4.8,4.4l-3,2.2l6.9,8.1l-10.5,32.4h0l0,0 | ||
| l9.7,33.1l34.1-9.4l0-0.1l0,0.1l0,0l0,0l0,0v0l0,0l0,0l0,0l6.6,5.4l13.5,9.2h23.1l13.5-9.2l6.6-5.4l0,0v0l0,0l0,0l34.2,9.4 | ||
| l9.8-33.1l0,0h0l-10.6-32.4 M70.7,152.1L70.7,152.1L70.7,152.1"/> | ||
| </g> | ||
| </g> | ||
| <g id="Logos"> | ||
| <g> | ||
| <polygon class="st2" points="171.5,25.6 111.6,69.7 122.7,43.7 "/> | ||
| <polygon class="st2" points="33.2,25.6 92.6,70.1 82,43.7 "/> | ||
| <polygon class="st2" points="150,127.9 134,152.1 168.2,161.5 178,128.4 "/> | ||
| <polygon class="st2" points="26.9,128.4 36.6,161.5 70.7,152.1 54.8,127.9 "/> | ||
| <polygon class="st2" points="68.9,86.9 59.4,101.2 93.2,102.7 92.1,66.5 "/> | ||
| <polygon class="st2" points="135.9,86.9 112.3,66.1 111.6,102.7 145.4,101.2 "/> | ||
| <polygon class="st2" points="70.7,152.1 91.2,142.3 73.5,128.7 "/> | ||
| <polygon class="st2" points="113.6,142.3 134,152.1 131.2,128.7 "/> | ||
| <polygon class="st3" points="134,152.1 113.6,142.3 115.3,155.5 115.1,161.1 "/> | ||
| <polygon class="st3" points="70.7,152.1 89.7,161.1 89.6,155.5 91.2,142.3 "/> | ||
| <polygon class="st4" points="90,119.9 73.1,115 85.1,109.5 "/> | ||
| <polygon class="st4" points="114.7,119.9 119.7,109.5 131.7,115 "/> | ||
| <polygon class="st5" points="70.7,152.1 73.7,127.9 54.8,128.4 "/> | ||
| <polygon class="st5" points="131.1,127.9 134,152.1 150,128.4 "/> | ||
| <polygon class="st5" points="145.4,101.2 111.6,102.7 114.7,119.9 119.7,109.5 131.7,115 "/> | ||
| <polygon class="st5" points="73.1,115 85.1,109.5 90,119.9 93.2,102.7 59.4,101.2 "/> | ||
| <polygon class="st2" points="59.4,101.2 73.5,128.7 73.1,115 "/> | ||
| <polygon class="st2" points="131.7,115 131.2,128.7 145.4,101.2 "/> | ||
| <polygon class="st2" points="93.2,102.7 90,119.9 94,140.3 94.9,113.5 "/> | ||
| <polygon class="st2" points="111.6,102.7 109.9,113.4 110.7,140.3 114.7,119.9 "/> | ||
| <polygon class="st1" points="114.7,119.9 110.7,140.3 113.6,142.3 131.2,128.7 131.7,115 "/> | ||
| <polygon class="st1" points="73.1,115 73.5,128.7 91.2,142.3 94,140.3 90,119.9 "/> | ||
| <polygon class="st6" points="115.1,161.1 115.3,155.5 113.7,154.2 91,154.2 89.6,155.5 89.7,161.1 70.7,152.1 77.3,157.5 | ||
| 90.8,166.8 113.9,166.8 127.4,157.5 134,152.1 "/> | ||
| <polygon class="st4" points="113.6,142.3 110.7,140.3 94,140.3 91.2,142.3 89.6,155.5 91,154.2 113.7,154.2 115.3,155.5 "/> | ||
| <polygon class="st7" points="174.1,72.6 179.1,48.2 171.5,25.6 113.6,68.2 135.9,86.9 167.4,96.1 174.3,88 171.3,85.8 176.1,81.5 | ||
| 172.4,78.6 177.2,75 "/> | ||
| <polygon class="st7" points="25.6,48.2 30.7,72.6 27.5,75 32.3,78.7 28.6,81.5 33.4,85.8 30.4,88 37.4,96.1 68.9,86.9 91.2,68.2 | ||
| 33.2,25.6 "/> | ||
| <polygon class="st1" points="167.4,96.1 135.9,86.9 145.4,101.2 131.2,128.7 150,128.4 178,128.4 "/> | ||
| <polygon class="st1" points="68.9,86.9 37.4,96.1 26.9,128.4 54.8,128.4 73.5,128.7 59.4,101.2 "/> | ||
| <polygon class="st1" points="111.6,102.7 113.6,68.2 122.7,43.7 82,43.7 91.2,68.2 93.2,102.7 94,113.5 94,140.3 110.7,140.3 | ||
| 110.8,113.5 "/> | ||
| </g> | ||
| </g> | ||
| </svg>`, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| --- | ||
| import { customIcons } from '../assets/custom-icons'; | ||
| interface Props { | ||
| network: 'mainnet' | 'testnet'; | ||
| } | ||
| const { network } = Astro.props; | ||
| const chainName = network === 'mainnet' ? 'Taiko Alethia' : 'Taiko Hekla'; | ||
| const metamaskIcon = customIcons.custom.icons['metamask-logo'].body; | ||
| --- | ||
|
|
||
| <button | ||
| type="button" | ||
| class={`network-button ${network === 'mainnet' ? 'mainnet' : 'testnet'}`} | ||
| data-network={network} | ||
| > | ||
| <span class="metamask-icon" set:html={metamaskIcon} /> | ||
| <span class="button-text">Add {chainName}</span> | ||
| </button> | ||
|
|
||
| <style> | ||
| .network-button { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 1rem; | ||
| padding: 0.75rem 1.5rem; | ||
| border-radius: 3rem; | ||
| font-size: 1.125rem; | ||
| font-weight: 500; | ||
| cursor: pointer; | ||
| transition: all 0.2s ease; | ||
| min-width: 250px; | ||
| justify-content: center; | ||
| border: none; | ||
| margin: 0.5rem; | ||
| font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | ||
| } | ||
|
|
||
| .mainnet { | ||
| background-color: #bc007a; | ||
| color: white; | ||
| } | ||
|
|
||
| .testnet { | ||
| background-color: transparent; | ||
| color: #bc007a; | ||
| border: 2px solid #bc007a; | ||
| } | ||
|
|
||
| .network-button:hover { | ||
| transform: translateY(-1px); | ||
| } | ||
|
|
||
| .mainnet:hover { | ||
| background-color: #d4008a; | ||
| } | ||
|
|
||
| .testnet:hover { | ||
| background-color: rgba(188, 0, 122, 0.1); | ||
| } | ||
|
|
||
| .metamask-icon { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .metamask-icon :global(svg) { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .metamask-icon :global(svg path.st2), | ||
| .metamask-icon :global(svg path.st5) { | ||
| fill: currentColor; | ||
| } | ||
|
|
||
| .button-text { | ||
| margin-left: 0.25rem; | ||
| } | ||
|
|
||
| /* Dark mode adjustments */ | ||
| :global(.dark) .testnet { | ||
| color: #f3b3d0; | ||
| border-color: #f3b3d0; | ||
| } | ||
|
|
||
| :global(.dark) .testnet:hover { | ||
| background-color: rgba(243, 179, 208, 0.1); | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| declare global { | ||
| interface Window { | ||
| ethereum: any; | ||
| } | ||
| } | ||
|
|
||
| const config = { | ||
| mainnet: { | ||
| chainId: '0x28c58', | ||
| chainName: 'Taiko Alethia', | ||
| rpcUrls: ['https://rpc.taiko.xyz'], | ||
| blockExplorerUrls: ['https://taikoscan.io/'], | ||
| }, | ||
| testnet: { | ||
| chainId: '0x28c61', | ||
| chainName: 'Taiko Hekla', | ||
| rpcUrls: ['https://rpc.hekla.taiko.xyz'], | ||
| blockExplorerUrls: ['https://hekla.taikoscan.io/'], | ||
| } | ||
| }; | ||
|
|
||
| function initializeNetworkButtons() { | ||
| const buttons = document.querySelectorAll('.network-button'); | ||
|
|
||
| buttons.forEach(button => { | ||
| button.addEventListener('click', async () => { | ||
| const network = button.getAttribute('data-network') as 'mainnet' | 'testnet'; | ||
| const networkConfig = config[network]; | ||
|
|
||
| if (typeof window.ethereum === 'undefined') { | ||
| alert('No Ethereum wallet detected. Please install MetaMask or another Ethereum wallet.'); | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| await window.ethereum.request({ | ||
| method: 'wallet_addEthereumChain', | ||
| params: [{ | ||
| chainId: networkConfig.chainId, | ||
| chainName: networkConfig.chainName, | ||
| nativeCurrency: { | ||
| name: 'Ethereum', | ||
| symbol: 'ETH', | ||
| decimals: 18, | ||
| }, | ||
| rpcUrls: networkConfig.rpcUrls, | ||
| blockExplorerUrls: networkConfig.blockExplorerUrls, | ||
| }], | ||
| }); | ||
| } catch (error) { | ||
| console.error('Failed to add network:', error); | ||
| alert('Failed to add network. Please check your wallet and try again.'); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| // Initialize when the DOM is ready | ||
| if (document.readyState === 'loading') { | ||
| document.addEventListener('DOMContentLoaded', initializeNetworkButtons); | ||
| } else { | ||
| initializeNetworkButtons(); | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.