-
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(bridge-ui-v2): use web3modal (#14043)
- Loading branch information
1 parent
4eec587
commit 911c701
Showing
29 changed files
with
273 additions
and
39 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
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,3 @@ | ||
| { | ||
| "recommendations": ["esbenp.prettier-vscode", "eslint.vscode-eslint"] | ||
| } |
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,7 @@ | ||
| { | ||
| "editor.defaultFormatter": "esbenp.prettier-vscode", | ||
| "editor.formatOnSave": true, | ||
| "editor.codeActionsOnSave": { | ||
| "source.fixAll.eslint": true | ||
| } | ||
| } |
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
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 |
|---|---|---|
| @@ -1,17 +1,26 @@ | ||
| <script lang="ts"> | ||
| import { web3modal } from '$libs/connect'; | ||
| import { t } from '$libs/i18n'; | ||
| import Button from '../Button'; | ||
| import Icon from '../Icon'; | ||
| import Logo from '../Logo'; | ||
| import { LogoWithText } from '../Logo'; | ||
| import { drawerToogleId } from '../SideNavigation'; | ||
| </script> | ||
|
|
||
| <header class="sticky md:px-10 md:py-7 flex justify-between"> | ||
| <header class="sticky p-2 md:px-10 md:py-7 flex justify-between md:justify-end items-center"> | ||
| <div class="flex space-x-2 items-center md:hidden"> | ||
| <label for={drawerToogleId} class="btn btn-ghost drawer-button"> | ||
| <label for={drawerToogleId} class="btn btn-sm md:btn-md btn-ghost drawer-button"> | ||
| <Icon type="bars-menu" /> | ||
| </label> | ||
| <Logo /> | ||
| <LogoWithText class="w-[88px] h-[24px]" /> | ||
| </div> | ||
|
|
||
| <Button>Connect Wallet</Button> | ||
| <!-- <Button on:click={() => web3modal.openModal()} class="rounded-full" type="neutral"> | ||
| <Icon type="user-circle" /> | ||
| <span>{$t('wallet.connect')}</span> | ||
| </Button> --> | ||
|
|
||
| <!-- TODO: think about the possibility of actually using w3m-core-button component --> | ||
| <w3m-core-button balance="show" icon="hide" /> | ||
| </header> |
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
13 changes: 7 additions & 6 deletions
13
packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
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 |
|---|---|---|
| @@ -1,18 +1,19 @@ | ||
| <script lang="ts"> | ||
| import { classNames } from '@libs/classNames'; | ||
| type LinkTarget = '_blank' | '_self'; | ||
| import { classNames } from '$libs/util/classNames'; | ||
| export let active = false; | ||
| export let href = '/'; | ||
| export let target: LinkTarget = '_self'; | ||
| export let external = false; | ||
| $: activeClass = active ? 'bg-primary-interactive hover:bg-primary-interactive-hover' : ''; | ||
| </script> | ||
|
|
||
| <a | ||
| {href} | ||
| {target} | ||
| class={classNames('btn btn-ghost rounded-full body-bold flex justify-start content-center', activeClass)}> | ||
| target={external ? '_blank' : null} | ||
| class={classNames( | ||
| 'btn btn-sm md:btn-md btn-ghost p-3 rounded-full body-bold flex justify-start content-center', | ||
| activeClass, | ||
| )}> | ||
| <slot /> | ||
| </a> |
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
This file was deleted.
Oops, something went wrong.
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 @@ | ||
| export { web3modal } from './web3modal'; |
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,28 @@ | ||
| import { EthereumClient } from '@web3modal/ethereum'; | ||
| import { Web3Modal } from '@web3modal/html'; | ||
|
|
||
| import { PUBLIC_WEB3_MODAL_PROJECT_ID } from '$env/static/public'; | ||
| import { chains, wagmiConfig } from '$libs/wagmi'; | ||
|
|
||
| const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID; | ||
|
|
||
| const ethereumClient = new EthereumClient(wagmiConfig, chains); | ||
|
|
||
| export const web3modal = new Web3Modal( | ||
| { | ||
| projectId, | ||
| // TODO: can we bring these vars into Tailwind theme? | ||
| themeVariables: { | ||
| '--w3m-background-border-radius': '1.25rem', | ||
| '--w3m-container-border-radius': '0rem', | ||
| '--w3m-font-family': 'Public Sans, system-ui, sans-serif', | ||
| '--w3m-button-border-radius': '9999px', | ||
| '--w3m-accent-color': 'var(--primary-interactive)', | ||
| '--w3m-accent-fill-color': 'var(--primary-content)', | ||
| '--w3m-background-color': 'var(--neutral-background)', | ||
| // '--w3m-color-bg-1': 'var(--primary-background)', | ||
| // TODO: customize the rest of the theme variables | ||
| }, | ||
| }, | ||
| ethereumClient, | ||
| ); |
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,18 @@ | ||
| { | ||
| "nav": { | ||
| "bridge": "Bridge", | ||
| "faucet": "Faucet", | ||
| "activities": "Activities", | ||
| "explorer": "Explorer", | ||
| "guide": "Guide" | ||
| }, | ||
|
|
||
| "wallet": { | ||
| "connect": "Connect Wallet", | ||
| "status": { | ||
| "disconnected": "Disconnected", | ||
| "connected": "Connected", | ||
| "connecting": "Connecting..." | ||
| } | ||
| } | ||
| } |
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,14 @@ | ||
| import { addMessages, getLocaleFromNavigator, init } from 'svelte-i18n'; | ||
|
|
||
| import en from './en.json'; | ||
| // TODO: import other languages here... | ||
|
|
||
| export { _ } from 'svelte-i18n'; | ||
|
|
||
| addMessages('en', en); | ||
| // TODO: add other languages here... | ||
|
|
||
| init({ | ||
| fallbackLocale: 'en', | ||
| initialLocale: getLocaleFromNavigator(), | ||
| }); |
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 @@ | ||
| export { _ as t } from './i18n'; |
File renamed without changes.
File renamed without changes.
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,5 @@ | ||
| import debug from 'debug'; | ||
|
|
||
| export function getLogger(namesapce: string) { | ||
| return debug(`bridge:${namesapce}`); | ||
| } |
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 @@ | ||
| import { type Chain, configureChains, createConfig } from '@wagmi/core'; | ||
| import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'; | ||
|
|
||
| import { | ||
| PUBLIC_L1_CHAIN_ID, | ||
| PUBLIC_L1_CHAIN_NAME, | ||
| PUBLIC_L1_EXPLORER_URL, | ||
| PUBLIC_L1_RPC_URL, | ||
| PUBLIC_L2_CHAIN_ID, | ||
| PUBLIC_L2_CHAIN_NAME, | ||
| PUBLIC_L2_EXPLORER_URL, | ||
| PUBLIC_L2_RPC_URL, | ||
| PUBLIC_WEB3_MODAL_PROJECT_ID, | ||
| } from '$env/static/public'; | ||
|
|
||
| const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID; | ||
|
|
||
| const mainnet: Chain = { | ||
| id: parseInt(PUBLIC_L1_CHAIN_ID), | ||
| name: PUBLIC_L1_CHAIN_NAME, | ||
| network: 'L1', | ||
| nativeCurrency: { | ||
| name: 'Ether', | ||
| symbol: 'ETH', | ||
| decimals: 18, | ||
| }, | ||
| rpcUrls: { | ||
| public: { http: [PUBLIC_L1_RPC_URL] }, | ||
| default: { http: [PUBLIC_L1_RPC_URL] }, | ||
| }, | ||
| blockExplorers: { | ||
| default: { | ||
| name: 'Main', | ||
| url: PUBLIC_L1_EXPLORER_URL, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const taiko: Chain = { | ||
| id: parseInt(PUBLIC_L2_CHAIN_ID), | ||
| name: PUBLIC_L2_CHAIN_NAME, | ||
| network: 'L2', | ||
| nativeCurrency: { | ||
| name: 'Ether', | ||
| symbol: 'ETH', | ||
| decimals: 18, | ||
| }, | ||
| rpcUrls: { | ||
| public: { http: [PUBLIC_L2_RPC_URL] }, | ||
| default: { http: [PUBLIC_L2_RPC_URL] }, | ||
| }, | ||
| blockExplorers: { | ||
| default: { | ||
| name: 'Main', | ||
| url: PUBLIC_L2_EXPLORER_URL, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const chains = [mainnet, taiko]; | ||
|
|
||
| export const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]); | ||
|
|
||
| export const wagmiConfig = createConfig({ | ||
| autoConnect: true, | ||
| connectors: w3mConnectors({ projectId, version: 2, chains }), | ||
| publicClient, | ||
| }); |
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,2 @@ | ||
| export * from './client'; | ||
| export { startWatching, stopWatching } from './watcher'; |
Oops, something went wrong.