From 1638cf86c7a9af490c0d7e40861ea36903ce5b48 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 12:28:02 +0200 Subject: [PATCH 01/14] add i18n --- lefthook.yml | 3 +++ packages/bridge-ui-v2/package.json | 1 + .../src/components/Button/Button.svelte | 2 +- .../src/components/Header/Header.svelte | 6 ++++- .../src/components/Icon/Icon.svelte | 8 +++++- .../components/LinkButton/LinkButton.svelte | 8 +++--- .../src/components/Main/Main.svelte | 3 +++ .../bridge-ui-v2/src/components/Main/index.ts | 1 + .../SideNavigation/SideNavigation.svelte | 4 +-- packages/bridge-ui-v2/src/libs/i18n/en.json | 12 +++++++++ packages/bridge-ui-v2/src/libs/i18n/i18n.ts | 14 +++++++++++ packages/bridge-ui-v2/src/libs/i18n/index.ts | 1 + .../bridge-ui-v2/src/routes/+layout.svelte | 9 +++---- packages/bridge-ui-v2/tsconfig.json | 4 +-- pnpm-lock.yaml | 25 ++++++++++++++++--- 15 files changed, 80 insertions(+), 21 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Main/Main.svelte create mode 100644 packages/bridge-ui-v2/src/components/Main/index.ts create mode 100644 packages/bridge-ui-v2/src/libs/i18n/en.json create mode 100644 packages/bridge-ui-v2/src/libs/i18n/i18n.ts create mode 100644 packages/bridge-ui-v2/src/libs/i18n/index.ts diff --git a/lefthook.yml b/lefthook.yml index d63dedfe182..f222f5a812c 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -5,6 +5,9 @@ pre-commit: bridge-ui: glob: "packages/bridge-ui/**.{js,svelte,ts}" run: pnpm -F bridge-ui lint:fix && git add {staged_files} + bridge-ui-v2: + glob: "packages/bridge-ui-v2/**.{js,svelte,ts}" + run: pnpm -F bridge-ui-v2 lint:fix && git add {staged_files} protocol_sol: glob: "packages/protocol/**.{sol}" run: pnpm -F protocol lint:sol && git add {staged_files} diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index d03290e2c23..6af4c010f4e 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -47,6 +47,7 @@ "@web3modal/ethereum": "^2.4.7", "@web3modal/html": "^2.4.7", "debug": "^4.3.4", + "svelte-i18n": "^3.5.1", "viem": "^1.0.7" } } diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte index 4b04c59208a..5769c602140 100644 --- a/packages/bridge-ui-v2/src/components/Button/Button.svelte +++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte @@ -1,5 +1,5 @@
@@ -13,5 +14,8 @@ - +
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte index 7e58622bb19..652fb88d063 100644 --- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte +++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bridge-ui-v2/src/components/Main/Main.svelte b/packages/bridge-ui-v2/src/components/Main/Main.svelte new file mode 100644 index 00000000000..0f3e77f9724 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Main/Main.svelte @@ -0,0 +1,3 @@ +
+ +
diff --git a/packages/bridge-ui-v2/src/components/Main/index.ts b/packages/bridge-ui-v2/src/components/Main/index.ts new file mode 100644 index 00000000000..66dd2112977 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Main/index.ts @@ -0,0 +1 @@ +export { default } from './Main.svelte'; diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte index ef59e7520a4..5f9b583ac10 100644 --- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte +++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte @@ -44,13 +44,13 @@
  • - + Exploreer
  • - + Guide diff --git a/packages/bridge-ui-v2/src/libs/i18n/en.json b/packages/bridge-ui-v2/src/libs/i18n/en.json new file mode 100644 index 00000000000..e680453515b --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/i18n/en.json @@ -0,0 +1,12 @@ +{ + "wallet": { + "button": { + "connect": "Connect Wallet" + }, + "status": { + "disconnected": "Disconnected", + "connected": "Connected", + "connecting": "Connecting..." + } + } +} diff --git a/packages/bridge-ui-v2/src/libs/i18n/i18n.ts b/packages/bridge-ui-v2/src/libs/i18n/i18n.ts new file mode 100644 index 00000000000..f40b3626f5c --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/i18n/i18n.ts @@ -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(), +}) diff --git a/packages/bridge-ui-v2/src/libs/i18n/index.ts b/packages/bridge-ui-v2/src/libs/i18n/index.ts new file mode 100644 index 00000000000..453140dc7e5 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/i18n/index.ts @@ -0,0 +1 @@ +export { _ as t } from './i18n' diff --git a/packages/bridge-ui-v2/src/routes/+layout.svelte b/packages/bridge-ui-v2/src/routes/+layout.svelte index dbeaca9ae28..2a12666ffdb 100644 --- a/packages/bridge-ui-v2/src/routes/+layout.svelte +++ b/packages/bridge-ui-v2/src/routes/+layout.svelte @@ -1,13 +1,12 @@
    -
    - -
    +
    diff --git a/packages/bridge-ui-v2/tsconfig.json b/packages/bridge-ui-v2/tsconfig.json index e7077ce86cd..3b1aad995cb 100644 --- a/packages/bridge-ui-v2/tsconfig.json +++ b/packages/bridge-ui-v2/tsconfig.json @@ -11,8 +11,8 @@ "strict": true, "paths": { - "@components/*": ["./src/components/*"], - "@libs/*": ["./src/libs/*"] + "$components/*": ["./src/components/*"], + "$libs/*": ["./src/libs/*"] }, // https://vitest.dev/config/#globals diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a300d9fa0a..736961d8526 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -214,6 +214,9 @@ importers: debug: specifier: ^4.3.4 version: 4.3.4 + svelte-i18n: + specifier: ^3.5.1 + version: 3.5.2(svelte@3.59.1) viem: specifier: ^1.0.7 version: 1.0.7(typescript@5.1.3) @@ -5334,7 +5337,7 @@ packages: /@types/connect@3.4.35: resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} dependencies: - '@types/node': 12.20.55 + '@types/node': 20.3.1 /@types/cookie@0.5.1: resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==} @@ -5684,7 +5687,7 @@ packages: /@types/ws@7.4.7: resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==} dependencies: - '@types/node': 12.20.55 + '@types/node': 20.3.1 /@types/yargs-parser@21.0.0: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} @@ -10883,7 +10886,6 @@ packages: /deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} - dev: true /defaults@1.0.4: resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==} @@ -22338,6 +22340,22 @@ packages: tiny-glob: 0.2.9 dev: false + /svelte-i18n@3.5.2(svelte@3.59.1): + resolution: {integrity: sha512-7Ub895Fqo2KRUCBAYSGjBQzaCOfDdgg6VwBT/mq6/EJqyP18DNIcNzeE2tiZejJ46R70npBR31Q1p9ywQ8L7BA==} + engines: {node: '>= 16'} + hasBin: true + peerDependencies: + svelte: ^3.25.1 + dependencies: + cli-color: 2.0.3 + deepmerge: 4.3.1 + estree-walker: 2.0.2 + intl-messageformat: 9.13.0 + sade: 1.8.1 + svelte: 3.59.1 + tiny-glob: 0.2.9 + dev: false + /svelte-jester@2.3.2(jest@27.5.1)(svelte@3.53.1): resolution: {integrity: sha512-JtxSz4FWAaCRBXbPsh4LcDs4Ua7zdXgLC0TZvT1R56hRV0dymmNP+abw67DTPF7sQPyNxWsOKd0Sl7Q8SnP8kg==} engines: {node: '>=14'} @@ -22583,7 +22601,6 @@ packages: /svelte@3.59.1: resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==} engines: {node: '>= 8'} - dev: true /swarm-js@0.1.42: resolution: {integrity: sha512-BV7c/dVlA3R6ya1lMlSSNPLYrntt0LUq4YMgy3iwpCIc6rZnS5W2wUoctarZ5pXlpKtxDDf9hNziEkcfrxdhqQ==} From 859349cf172505551b9d168bd9477a4160b90718 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 12:37:39 +0200 Subject: [PATCH 02/14] wip --- .../bridge-ui-v2/src/components/Header/Header.svelte | 5 +++-- .../components/SideNavigation/SideNavigation.svelte | 11 ++++++----- packages/bridge-ui-v2/src/libs/i18n/en.json | 12 +++++++++--- packages/bridge-ui-v2/src/libs/i18n/i18n.ts | 10 +++++----- packages/bridge-ui-v2/src/libs/i18n/index.ts | 2 +- 5 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 685422fbe68..7a8dc8ee2c7 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -1,9 +1,10 @@
    @@ -16,6 +17,6 @@
    diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte index 5f9b583ac10..326da788b64 100644 --- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte +++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte @@ -4,6 +4,7 @@ -
    +
    - diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte index 3db332325a1..07d4ff4afdf 100644 --- a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte +++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte @@ -11,6 +11,6 @@ + class={classNames('btn btn-ghost p-3 rounded-full body-bold flex justify-start content-center', activeClass)}> diff --git a/packages/bridge-ui-v2/src/libs/wagmi/client.ts b/packages/bridge-ui-v2/src/libs/wagmi/client.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js index c9c5c38b697..e52c13fbed6 100644 --- a/packages/bridge-ui-v2/tailwind.config.js +++ b/packages/bridge-ui-v2/tailwind.config.js @@ -194,6 +194,10 @@ export default { 'primary-focus': '#E81899', // pink-400 'primary-content': '#F3F3F3', // grey-10 + neutral: '#2B303B', // grey-700 + 'neutral-focus': '#444A55', // grey-600 + 'neutral-content': '#F3F3F3', // grey-10 + 'base-100': '#0B101B', // grey-900 'base-content': '#F3F3F3', // grey-10 From c7b0b522feb6ce4f7e14daf0110f262bbae14d0b Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 14:35:29 +0200 Subject: [PATCH 04/14] add wagmi client --- .../bridge-ui-v2/src/libs/wagmi/client.ts | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/packages/bridge-ui-v2/src/libs/wagmi/client.ts b/packages/bridge-ui-v2/src/libs/wagmi/client.ts index e69de29bb2d..e221ffa7bf3 100644 --- a/packages/bridge-ui-v2/src/libs/wagmi/client.ts +++ b/packages/bridge-ui-v2/src/libs/wagmi/client.ts @@ -0,0 +1,67 @@ +import { type Chain,configureChains, createConfig } from '@wagmi/core'; +import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'; +import { Web3Modal } from '@web3modal/html'; + +import { + PUBLIC_L1_CHAIN_ID, + PUBLIC_L1_CHAIN_NAME, + PUBLIC_L1_EXPLORER_URL, + PUBLIC_L2_CHAIN_ID, + PUBLIC_L2_CHAIN_NAME, + PUBLIC_L2_EXPLORER_URL, + PUBLIC_WEB3_MODAL_PROJECT_ID, +} from '$env/static/public'; + +const mainnet: Chain = { + id: PUBLIC_L1_CHAIN_ID, + name: PUBLIC_L1_CHAIN_NAME, + nativeCurrency: { + name: 'Ether', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: { + default: { http: [PUBLIC_L1_RPC_URL] }, + }, + blockExplorers: { + default: { + name: 'Main', + url: PUBLIC_L1_EXPLORER_URL, + }, + }, +}; + +const taiko: Chain = { + id: PUBLIC_L2_CHAIN_ID, + name: PUBLIC_L2_CHAIN_NAME, + nativeCurrency: { + name: 'Ether', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: { + default: { http: [PUBLIC_L2_RPC_URL] }, + }, + blockExplorers: { + default: { + name: 'Main', + url: PUBLIC_L2_EXPLORER_URL, + }, + }, +}; + +const chains = [mainnet, taiko]; + +const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID; + +export const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]); + +const wagmiConfig = createConfig({ + autoConnect: true, + connectors: w3mConnectors({ projectId, version: 2, chains }), + publicClient, +}); + +export const ethereumClient = new EthereumClient(wagmiConfig, chains); + +export const web3modal = new Web3Modal({ projectId }, ethereumClient); From 1e5408b16936dcbbac7d9346f8a27170e07c37ca Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 14:42:19 +0200 Subject: [PATCH 05/14] wip --- packages/bridge-ui-v2/src/components/Header/Header.svelte | 3 ++- packages/bridge-ui-v2/src/components/Main/Main.svelte | 3 --- packages/bridge-ui-v2/src/components/Main/index.ts | 1 - packages/bridge-ui-v2/src/libs/wagmi/client.ts | 2 ++ packages/bridge-ui-v2/src/routes/+layout.svelte | 5 +++-- 5 files changed, 7 insertions(+), 7 deletions(-) delete mode 100644 packages/bridge-ui-v2/src/components/Main/Main.svelte delete mode 100644 packages/bridge-ui-v2/src/components/Main/index.ts diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 03892b24046..bf080873a60 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -1,5 +1,6 @@
    -
    +
    + +
    From 2af5369bd5f12bdb986ecbbfb9251586ed3da9b6 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 14:45:06 +0200 Subject: [PATCH 06/14] wip --- lefthook.yml | 2 +- packages/bridge-ui-v2/src/libs/wagmi/client.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lefthook.yml b/lefthook.yml index f222f5a812c..f8ec27262a7 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -6,7 +6,7 @@ pre-commit: glob: "packages/bridge-ui/**.{js,svelte,ts}" run: pnpm -F bridge-ui lint:fix && git add {staged_files} bridge-ui-v2: - glob: "packages/bridge-ui-v2/**.{js,svelte,ts}" + glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}" run: pnpm -F bridge-ui-v2 lint:fix && git add {staged_files} protocol_sol: glob: "packages/protocol/**.{sol}" diff --git a/packages/bridge-ui-v2/src/libs/wagmi/client.ts b/packages/bridge-ui-v2/src/libs/wagmi/client.ts index 6dde9b21d7d..59779ab02a3 100644 --- a/packages/bridge-ui-v2/src/libs/wagmi/client.ts +++ b/packages/bridge-ui-v2/src/libs/wagmi/client.ts @@ -1,16 +1,16 @@ -import { type Chain,configureChains, createConfig } from '@wagmi/core'; +import { type Chain, configureChains, createConfig } from '@wagmi/core'; import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'; import { Web3Modal } from '@web3modal/html'; import { PUBLIC_L1_CHAIN_ID, PUBLIC_L1_CHAIN_NAME, - PUBLIC_L1_RPC_URL, PUBLIC_L1_EXPLORER_URL, + PUBLIC_L1_RPC_URL, PUBLIC_L2_CHAIN_ID, PUBLIC_L2_CHAIN_NAME, - PUBLIC_L2_RPC_URL, PUBLIC_L2_EXPLORER_URL, + PUBLIC_L2_RPC_URL, PUBLIC_WEB3_MODAL_PROJECT_ID, } from '$env/static/public'; From be399f3e087ebe893269c0e91e3a0dedc701d426 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 14:58:05 +0200 Subject: [PATCH 07/14] add vscode --- packages/bridge-ui-v2/.vscode/extensions.json | 6 ++++++ packages/bridge-ui-v2/.vscode/settings.json | 7 +++++++ 2 files changed, 13 insertions(+) create mode 100644 packages/bridge-ui-v2/.vscode/extensions.json create mode 100644 packages/bridge-ui-v2/.vscode/settings.json diff --git a/packages/bridge-ui-v2/.vscode/extensions.json b/packages/bridge-ui-v2/.vscode/extensions.json new file mode 100644 index 00000000000..b2410b334ee --- /dev/null +++ b/packages/bridge-ui-v2/.vscode/extensions.json @@ -0,0 +1,6 @@ +{ + "recommendations": [ + "esbenp.prettier-vscode", + "eslint.vscode-eslint", + ] +} diff --git a/packages/bridge-ui-v2/.vscode/settings.json b/packages/bridge-ui-v2/.vscode/settings.json new file mode 100644 index 00000000000..a4d1c832894 --- /dev/null +++ b/packages/bridge-ui-v2/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + } +} From 38ccec2e541562ceedf6b97c25a3094d6f1563bf Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 15:27:40 +0200 Subject: [PATCH 08/14] wip: connect button --- .../bridge-ui-v2/src/components/Button/Button.svelte | 3 +-- .../bridge-ui-v2/src/components/Header/Header.svelte | 10 ++++------ packages/bridge-ui-v2/src/components/Icon/Icon.svelte | 2 +- .../src/components/LinkButton/LinkButton.svelte | 2 +- .../src/components/Logo/LogoWithText.svelte | 2 +- .../components/SideNavigation/SideNavigation.svelte | 5 +++-- packages/bridge-ui-v2/src/routes/+layout.svelte | 2 +- 7 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte index ae48d8b8783..c0275556464 100644 --- a/packages/bridge-ui-v2/src/components/Button/Button.svelte +++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte @@ -41,8 +41,7 @@ }; const classes = classNames( - // TODO: py-2 px-5 might not always be the case. Talk to Jane about this - 'btn py-2 px-5', + 'btn btn-sm md:btn-md', type ? typeMap[type] : null, size ? sizeMap[size] : null, shape ? shapeMap[shape] : null, diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index bf080873a60..3e42664ff72 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -4,20 +4,18 @@ import Button from '../Button'; import Icon from '../Icon'; - import Logo from '../Logo'; + import { LogoWithText } from '../Logo'; import { drawerToogleId } from '../SideNavigation'; -
    +
    -
    - TODO - + + +
    diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts index 799e388de9b..59830d08fef 100644 --- a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts +++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts @@ -8,4 +8,14 @@ const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID; const ethereumClient = new EthereumClient(wagmiConfig, chains); -export const web3modal = new Web3Modal({ projectId }, ethereumClient); +export const web3modal = new Web3Modal({ + projectId, + themeVariables: { + '--w3m-font-family': 'Public Sans, system-ui, sans-serif', + '--w3m-button-border-radius': '9999px', + '--w3m-accent-color': 'var(--primary-brand)', + '--w3m-accent-fill-color': 'var(--primary-content)', + '--w3m-background-color': 'var(--neutral-background)', + // TODO: customize the rest of the theme variables + }, +}, ethereumClient); From 2eb5cc3db04df42a28f7f637cd517dded98fc167 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 17:04:29 +0200 Subject: [PATCH 12/14] wallet connect --- packages/bridge-ui-v2/src/app.html | 4 +--- .../src/libs/connect/web3modal.ts | 23 +++++++++++-------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index f1b2a7ed557..be167ec1d9b 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -25,8 +25,6 @@ -
    - %sveltekit.body% -
    +
    %sveltekit.body%
    diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts index 59830d08fef..271a7737125 100644 --- a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts +++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts @@ -8,14 +8,17 @@ const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID; const ethereumClient = new EthereumClient(wagmiConfig, chains); -export const web3modal = new Web3Modal({ - projectId, - themeVariables: { - '--w3m-font-family': 'Public Sans, system-ui, sans-serif', - '--w3m-button-border-radius': '9999px', - '--w3m-accent-color': 'var(--primary-brand)', - '--w3m-accent-fill-color': 'var(--primary-content)', - '--w3m-background-color': 'var(--neutral-background)', - // TODO: customize the rest of the theme variables +export const web3modal = new Web3Modal( + { + projectId, + themeVariables: { + '--w3m-font-family': 'Public Sans, system-ui, sans-serif', + '--w3m-button-border-radius': '9999px', + '--w3m-accent-color': 'var(--primary-brand)', + '--w3m-accent-fill-color': 'var(--primary-content)', + '--w3m-background-color': 'var(--neutral-background)', + // TODO: customize the rest of the theme variables + }, }, -}, ethereumClient); + ethereumClient, +); From cbf8ba4cab06747129dd5e3385c1bb3d259ee21d Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 17:14:32 +0200 Subject: [PATCH 13/14] web3modal --- packages/bridge-ui-v2/src/libs/connect/web3modal.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts index 271a7737125..34265dc5eca 100644 --- a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts +++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts @@ -17,6 +17,7 @@ export const web3modal = new Web3Modal( '--w3m-accent-color': 'var(--primary-brand)', '--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 }, }, From 5e455919ae3ffc4418694687ac2cd2ee9e707578 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 23 Jun 2023 17:42:16 +0200 Subject: [PATCH 14/14] web3modal theme --- packages/bridge-ui-v2/src/components/Header/Header.svelte | 6 +++--- packages/bridge-ui-v2/src/libs/connect/web3modal.ts | 5 ++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index e830dfeb3f9..628e762758a 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -16,11 +16,11 @@ -
    diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts index 34265dc5eca..367afd9dd38 100644 --- a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts +++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts @@ -11,10 +11,13 @@ 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-brand)', + '--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)',