From b39b328cc602fc9ea05fcd4551b40cd91a6efe37 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Sat, 1 Jul 2023 05:21:19 +0200 Subject: [PATCH] feat(bridge-ui-v2): bridge form (#14056) --- packages/bridge-ui-v2/CHANGELOG.md | 12 +- packages/bridge-ui-v2/src/app.d.ts | 1 + .../components/Activities/Activities.svelte | 7 + .../src/components/Activities/index.ts | 1 + .../src/components/Alert/Alert.svelte | 56 +++++ .../src/components/Alert/index.ts | 1 + .../components/AmountInput/AmountInput.svelte | 27 +++ .../src/components/AmountInput/index.ts | 1 + .../src/components/Bridge/Bridge.svelte | 45 ++++ .../src/components/Bridge/index.ts | 1 + .../src/components/Button/Button.svelte | 25 +-- .../src/components/Button/index.ts | 2 +- .../src/components/Card/Card.svelte | 16 ++ .../bridge-ui-v2/src/components/Card/index.ts | 1 + .../ChainSelector/ChainSelector.svelte | 102 +++++++++ .../src/components/ChainSelector/index.ts | 1 + .../src/components/Faucet/Faucet.svelte | 29 +++ .../src/components/Faucet/index.ts | 1 + .../src/components/Header/Header.svelte | 40 ++-- .../src/components/Header/index.ts | 2 +- .../src/components/Icon/BLL.svelte | 16 ++ .../src/components/Icon/ETH.svelte | 26 +++ .../src/components/Icon/HORSE.svelte | 14 ++ .../src/components/Icon/Icon.svelte | 72 ++++++- .../src/components/Icon/Taiko.svelte | 12 ++ .../bridge-ui-v2/src/components/Icon/index.ts | 6 +- .../src/components/InputBox/InputBox.svelte | 13 ++ .../src/components/InputBox/index.ts | 1 + .../src/components/LinkButton/index.ts | 2 +- .../bridge-ui-v2/src/components/Logo/index.ts | 2 +- .../src/components/Page/Page.svelte | 3 + .../bridge-ui-v2/src/components/Page/index.ts | 1 + .../ProcessingFee/ProcessingFee.svelte | 194 ++++++++++++++++++ .../src/components/ProcessingFee/index.ts | 1 + .../RecipientInput/RecipientInput.svelte | 14 ++ .../src/components/RecipientInput/index.ts | 1 + .../SideNavigation/SideNavigation.svelte | 36 +++- .../src/components/SideNavigation/index.ts | 2 +- .../TokenDropdown/TokenDropdown.svelte | 102 +++++++++ .../src/components/TokenDropdown/index.ts | 1 + .../src/components/Tooltip/Tooltip.svelte | 53 +++++ .../src/components/Tooltip/index.ts | 1 + packages/bridge-ui-v2/src/i18n/en.json | 79 +++++++ .../src/{libs/i18n/i18n.ts => i18n/index.ts} | 2 - .../bridge-ui-v2/src/libs/chain/chains.ts | 72 +++++++ packages/bridge-ui-v2/src/libs/chain/index.ts | 2 + packages/bridge-ui-v2/src/libs/chain/types.ts | 9 + .../src/libs/connect/web3modal.ts | 3 +- packages/bridge-ui-v2/src/libs/free/index.ts | 3 + .../src/libs/free/processingFees.ts | 26 +++ .../src/libs/free/recommendProcessingFee.ts | 8 + packages/bridge-ui-v2/src/libs/free/types.ts | 10 + packages/bridge-ui-v2/src/libs/i18n/en.json | 18 -- packages/bridge-ui-v2/src/libs/i18n/index.ts | 1 - packages/bridge-ui-v2/src/libs/token/index.ts | 2 + .../bridge-ui-v2/src/libs/token/tokens.ts | 41 ++++ packages/bridge-ui-v2/src/libs/token/types.ts | 12 ++ .../libs/util/jsonParseWithDefault.test.ts | 18 ++ .../src/libs/util/jsonParseWithDefault.ts | 9 + .../bridge-ui-v2/src/libs/util/nextTick.ts | 3 + .../libs/util/positionElementByTarget.test.ts | 60 ++++++ .../src/libs/util/positionElementByTarget.ts | 45 ++++ .../bridge-ui-v2/src/libs/util/uid.test.ts | 14 ++ packages/bridge-ui-v2/src/libs/util/uid.ts | 3 + .../bridge-ui-v2/src/libs/wagmi/client.ts | 59 +----- .../bridge-ui-v2/src/libs/wagmi/watcher.ts | 4 + .../bridge-ui-v2/src/routes/+layout.svelte | 7 +- packages/bridge-ui-v2/src/routes/+page.svelte | 9 +- .../src/routes/activities/+page.svelte | 9 +- .../src/routes/faucet/+page.svelte | 9 +- packages/bridge-ui-v2/src/stores/account.ts | 4 + packages/bridge-ui-v2/src/stores/network.ts | 4 + .../bridge-ui-v2/src/styles/components.css | 52 ++++- packages/bridge-ui-v2/src/styles/override.css | 15 +- .../bridge-ui-v2/src/styles/utilities.css | 39 ++++ packages/bridge-ui-v2/tailwind.config.js | 32 +++ packages/bridge-ui-v2/tsconfig.json | 1 + 77 files changed, 1484 insertions(+), 144 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Activities/Activities.svelte create mode 100644 packages/bridge-ui-v2/src/components/Activities/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Alert/Alert.svelte create mode 100644 packages/bridge-ui-v2/src/components/Alert/index.ts create mode 100644 packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte create mode 100644 packages/bridge-ui-v2/src/components/AmountInput/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Card/Card.svelte create mode 100644 packages/bridge-ui-v2/src/components/Card/index.ts create mode 100644 packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte create mode 100644 packages/bridge-ui-v2/src/components/ChainSelector/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte create mode 100644 packages/bridge-ui-v2/src/components/Faucet/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Icon/BLL.svelte create mode 100644 packages/bridge-ui-v2/src/components/Icon/ETH.svelte create mode 100644 packages/bridge-ui-v2/src/components/Icon/HORSE.svelte create mode 100644 packages/bridge-ui-v2/src/components/Icon/Taiko.svelte create mode 100644 packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte create mode 100644 packages/bridge-ui-v2/src/components/InputBox/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Page/Page.svelte create mode 100644 packages/bridge-ui-v2/src/components/Page/index.ts create mode 100644 packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte create mode 100644 packages/bridge-ui-v2/src/components/ProcessingFee/index.ts create mode 100644 packages/bridge-ui-v2/src/components/RecipientInput/RecipientInput.svelte create mode 100644 packages/bridge-ui-v2/src/components/RecipientInput/index.ts create mode 100644 packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte create mode 100644 packages/bridge-ui-v2/src/components/TokenDropdown/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Tooltip/Tooltip.svelte create mode 100644 packages/bridge-ui-v2/src/components/Tooltip/index.ts create mode 100644 packages/bridge-ui-v2/src/i18n/en.json rename packages/bridge-ui-v2/src/{libs/i18n/i18n.ts => i18n/index.ts} (89%) create mode 100644 packages/bridge-ui-v2/src/libs/chain/chains.ts create mode 100644 packages/bridge-ui-v2/src/libs/chain/index.ts create mode 100644 packages/bridge-ui-v2/src/libs/chain/types.ts create mode 100644 packages/bridge-ui-v2/src/libs/free/index.ts create mode 100644 packages/bridge-ui-v2/src/libs/free/processingFees.ts create mode 100644 packages/bridge-ui-v2/src/libs/free/recommendProcessingFee.ts create mode 100644 packages/bridge-ui-v2/src/libs/free/types.ts delete mode 100644 packages/bridge-ui-v2/src/libs/i18n/en.json delete mode 100644 packages/bridge-ui-v2/src/libs/i18n/index.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/index.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/tokens.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/types.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/jsonParseWithDefault.test.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/jsonParseWithDefault.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/nextTick.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/positionElementByTarget.test.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/positionElementByTarget.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/uid.test.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/uid.ts create mode 100644 packages/bridge-ui-v2/src/stores/account.ts create mode 100644 packages/bridge-ui-v2/src/stores/network.ts diff --git a/packages/bridge-ui-v2/CHANGELOG.md b/packages/bridge-ui-v2/CHANGELOG.md index 0aaa4ef6bb3..c6d6d075b99 100644 --- a/packages/bridge-ui-v2/CHANGELOG.md +++ b/packages/bridge-ui-v2/CHANGELOG.md @@ -2,15 +2,13 @@ ## [2.1.0](https://github.com/taikoxyz/taiko-mono/compare/bridge-ui-v2-v2.0.0...bridge-ui-v2-v2.1.0) (2023-06-26) - ### Features -* **bridge-ui-v2:** env vars ([#14034](https://github.com/taikoxyz/taiko-mono/issues/14034)) ([fccc0a7](https://github.com/taikoxyz/taiko-mono/commit/fccc0a7252b93148559a0438ee23366f04fc86f6)) -* **bridge-ui-v2:** initial setup v2 ([#14013](https://github.com/taikoxyz/taiko-mono/issues/14013)) ([429bf7a](https://github.com/taikoxyz/taiko-mono/commit/429bf7a1619b9554f999db29d236ce0c9c6236da)) -* **bridge-ui-v2:** tailwind config and other setups ([#14016](https://github.com/taikoxyz/taiko-mono/issues/14016)) ([be294c6](https://github.com/taikoxyz/taiko-mono/commit/be294c66764d658423d58902076594afdc470e96)) -* **bridge-ui-v2:** use web3modal ([#14043](https://github.com/taikoxyz/taiko-mono/issues/14043)) ([911c701](https://github.com/taikoxyz/taiko-mono/commit/911c701ae738a9f2e12c14455c23951845d0c4c2)) - +- **bridge-ui-v2:** env vars ([#14034](https://github.com/taikoxyz/taiko-mono/issues/14034)) ([fccc0a7](https://github.com/taikoxyz/taiko-mono/commit/fccc0a7252b93148559a0438ee23366f04fc86f6)) +- **bridge-ui-v2:** initial setup v2 ([#14013](https://github.com/taikoxyz/taiko-mono/issues/14013)) ([429bf7a](https://github.com/taikoxyz/taiko-mono/commit/429bf7a1619b9554f999db29d236ce0c9c6236da)) +- **bridge-ui-v2:** tailwind config and other setups ([#14016](https://github.com/taikoxyz/taiko-mono/issues/14016)) ([be294c6](https://github.com/taikoxyz/taiko-mono/commit/be294c66764d658423d58902076594afdc470e96)) +- **bridge-ui-v2:** use web3modal ([#14043](https://github.com/taikoxyz/taiko-mono/issues/14043)) ([911c701](https://github.com/taikoxyz/taiko-mono/commit/911c701ae738a9f2e12c14455c23951845d0c4c2)) ### Bug Fixes -* **bridge-ui-v2:** fixing vercel build ([#14052](https://github.com/taikoxyz/taiko-mono/issues/14052)) ([3332e70](https://github.com/taikoxyz/taiko-mono/commit/3332e70bb3b821ab4efbcfe4aed4dbc3ed614850)) +- **bridge-ui-v2:** fixing vercel build ([#14052](https://github.com/taikoxyz/taiko-mono/issues/14052)) ([3332e70](https://github.com/taikoxyz/taiko-mono/commit/3332e70bb3b821ab4efbcfe4aed4dbc3ed614850)) diff --git a/packages/bridge-ui-v2/src/app.d.ts b/packages/bridge-ui-v2/src/app.d.ts index bbbab873cae..ba4f1e54ab0 100644 --- a/packages/bridge-ui-v2/src/app.d.ts +++ b/packages/bridge-ui-v2/src/app.d.ts @@ -11,6 +11,7 @@ declare global { type Maybe = T | null | undefined; type MaybeArray = T | T[] | null | undefined; type MaybePromise = T | Promise | null | undefined; + type Position = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'; } export {}; diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte new file mode 100644 index 00000000000..0d0123a267e --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -0,0 +1,7 @@ + + +TODO: Activities diff --git a/packages/bridge-ui-v2/src/components/Activities/index.ts b/packages/bridge-ui-v2/src/components/Activities/index.ts new file mode 100644 index 00000000000..8b9be8e6435 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Activities/index.ts @@ -0,0 +1 @@ +export { default as Activities } from './Activities.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Alert/Alert.svelte b/packages/bridge-ui-v2/src/components/Alert/Alert.svelte new file mode 100644 index 00000000000..56685c17bde --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Alert/Alert.svelte @@ -0,0 +1,56 @@ + + +
+
+ +
+
+ +
+
diff --git a/packages/bridge-ui-v2/src/components/Alert/index.ts b/packages/bridge-ui-v2/src/components/Alert/index.ts new file mode 100644 index 00000000000..e3f24bb7c75 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Alert/index.ts @@ -0,0 +1 @@ +export { default as Alert } from './Alert.svelte'; diff --git a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte new file mode 100644 index 00000000000..a378f8a90d0 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte @@ -0,0 +1,27 @@ + + +
+
+ +
+ {$t('amount_input.balance')}: + 399.92 ETH +
+
+
+ + +
+
diff --git a/packages/bridge-ui-v2/src/components/AmountInput/index.ts b/packages/bridge-ui-v2/src/components/AmountInput/index.ts new file mode 100644 index 00000000000..e49f595a9ac --- /dev/null +++ b/packages/bridge-ui-v2/src/components/AmountInput/index.ts @@ -0,0 +1 @@ +export { default } from './AmountInput.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte new file mode 100644 index 00000000000..ae4969c70f7 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -0,0 +1,45 @@ + + + +
+
+
+ + +
+ + + +
+ +
+ +
+ + +
+
+ + + +
+ + +
+ diff --git a/packages/bridge-ui-v2/src/components/Bridge/index.ts b/packages/bridge-ui-v2/src/components/Bridge/index.ts new file mode 100644 index 00000000000..aeca7c9fff5 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/index.ts @@ -0,0 +1 @@ +export { default as Bridge } from './Bridge.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte index a81c6abde31..21389e619ba 100644 --- a/packages/bridge-ui-v2/src/components/Button/Button.svelte +++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte @@ -1,12 +1,20 @@ + +
+
+

{title}

+ {#if text} +

{text}

+ {/if} +
+ +
+
+
diff --git a/packages/bridge-ui-v2/src/components/Card/index.ts b/packages/bridge-ui-v2/src/components/Card/index.ts new file mode 100644 index 00000000000..020e9f3f387 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Card/index.ts @@ -0,0 +1 @@ +export { default as Card } from './Card.svelte'; diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte new file mode 100644 index 00000000000..45a0f372492 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -0,0 +1,102 @@ + + +
+
+ + +
+ + +
+ +

{$t('chain_selector.placeholder')}

+
    + {#each chains as chain (chain.id)} +
  • selectChain(chain)} + on:keydown={(event) => onChainKeydown(event, chain)}> + +
    +
    + + + + {chain.name} +
    + {chain.network} +
    +
    • + {/each} +
+
+ +
+
+
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/index.ts b/packages/bridge-ui-v2/src/components/ChainSelector/index.ts new file mode 100644 index 00000000000..9e0dd222d33 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/ChainSelector/index.ts @@ -0,0 +1 @@ +export { default as ChainSelector } from './ChainSelector.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte new file mode 100644 index 00000000000..662cd20614f --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -0,0 +1,29 @@ + + + +
+
+ + +
+ + + +
+ + + {$t('faucet.warning_message')} + +
+ diff --git a/packages/bridge-ui-v2/src/components/Faucet/index.ts b/packages/bridge-ui-v2/src/components/Faucet/index.ts new file mode 100644 index 00000000000..48d15ed78e6 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Faucet/index.ts @@ -0,0 +1 @@ +export { default as Faucet } from './Faucet.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 628e762758a..0a8e823717b 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -1,26 +1,34 @@ -
-
-