From f4c6f8482cb2fd2242b95bc3495b64481f64ab3d Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Tue, 4 Jul 2023 08:31:12 +0200 Subject: [PATCH] feat(bridge-ui-v2): activities page (#14089) --- .../components/Activities/Activities.svelte | 21 +- .../Activities/ListWithDetailsView.svelte | 225 +++++++++++++++++ .../components/Activities/TableView.svelte | 232 ++++++++++++++++++ .../components/AmountInput/AmountInput.svelte | 2 +- .../src/components/Bridge/Bridge.svelte | 4 +- .../src/components/Card/Card.svelte | 11 +- .../src/components/Faucet/Faucet.svelte | 8 +- .../src/components/Icon/Icon.svelte | 12 +- .../src/components/Page/Page.svelte | 2 +- .../ProcessingFee/ProcessingFee.svelte | 8 +- .../SideNavigation/SideNavigation.svelte | 7 +- .../src/components/StatusDot/StatusDot.svelte | 15 ++ .../src/components/StatusDot/index.ts | 1 + packages/bridge-ui-v2/src/i18n/en.json | 35 ++- .../bridge-ui-v2/src/routes/+layout.svelte | 2 +- .../bridge-ui-v2/src/styles/components.css | 29 ++- 16 files changed, 579 insertions(+), 35 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte create mode 100644 packages/bridge-ui-v2/src/components/Activities/TableView.svelte create mode 100644 packages/bridge-ui-v2/src/components/StatusDot/StatusDot.svelte create mode 100644 packages/bridge-ui-v2/src/components/StatusDot/index.ts diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 0d0123a267e..fb51e91a2ac 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -1,7 +1,24 @@ - -TODO: Activities + +
+ + +
+ +
+ + + +
+ diff --git a/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte b/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte new file mode 100644 index 00000000000..c104c626445 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte @@ -0,0 +1,225 @@ + + +
+ + + +
+ + +

{$t('processing_fee.title')}

+ +
    +
  • +

    {$t('chain.from')}

    +
    + + + + Sepolia +
    +
    • +
  • +

    {$t('chain.to')}

    +
    + + + + Taiko +
    +
    • +
  • +

    {$t('amount_input.label')}

    + 2.5 ETH +
    • +
  • +

    +
    + {$t('activities.header.status')} + TODO: add description about status here +
    +

    +
    + + {$t('activities.status.initiated')} +
    +
    • +
  • +

    {$t('activities.header.explorer')}

    + {$t('activities.link.explorer')} +
    • +
+
+ +
+
+
diff --git a/packages/bridge-ui-v2/src/components/Activities/TableView.svelte b/packages/bridge-ui-v2/src/components/Activities/TableView.svelte new file mode 100644 index 00000000000..6f4c847bce7 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Activities/TableView.svelte @@ -0,0 +1,232 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{$t('chain.from')}{$t('chain.to')}{$t('amount_input.label')} +
+ {$t('activities.header.status')} + TODO: add description about status here +
+ 		{$t('activities.header.explorer')}
+
+ + + + Sepolia +
+ 		+
+ + + + Taiko +
+ 		2.5 ETH +
+ + {$t('activities.status.initiated')} +
+ 		+ {$t('activities.link.explorer')} +
+
+ + + + Taiko +
+ 		+
+ + + + Sepolia +
+ 		0.342 ETH +
+ + {$t('activities.status.pending')} +
+ 		+ {$t('activities.link.explorer')} +
+
+ + + + Taiko +
+ 		+
+ + + + Sepolia +
+ 		7 HORSE +
+ +
+ 		+ {$t('activities.link.explorer')} +
+
+ + + + Taiko +
+ 		+
+ + + + Sepolia +
+ 		3 BLL +
+ +
+ 		+ {$t('activities.link.explorer')} +
+
+ + + + Sepolia +
+ 		+
+ + + + Taiko +
+ 		3.204 ETH +
+ + {$t('activities.status.claimed')} +
+ 		+ {$t('activities.link.explorer')} +
+
+ + + + Sepolia +
+ 		+
+ + + + Taiko +
+ 		2.5 BLL +
+ + {$t('activities.status.failed')} +
+ 		+ {$t('activities.link.explorer')} +
+
+ + + + Taiko +
+ 		+
+ + + + Sepolia +
+ 		1.203 HORSE +
+ +
+ 		+ {$t('activities.link.explorer')} +
diff --git a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte index a378f8a90d0..2ee55238db9 100644 --- a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte +++ b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte @@ -22,6 +22,6 @@ placeholder="0.01" min="0" class="w-full input-box outline-none py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" /> - + diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index ae4969c70f7..163b9e11b03 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -12,7 +12,7 @@ import { tokens } from '$libs/token'; - +
@@ -39,7 +39,7 @@
diff --git a/packages/bridge-ui-v2/src/components/Card/Card.svelte b/packages/bridge-ui-v2/src/components/Card/Card.svelte index 51f068157e5..b01b4fc50d6 100644 --- a/packages/bridge-ui-v2/src/components/Card/Card.svelte +++ b/packages/bridge-ui-v2/src/components/Card/Card.svelte @@ -1,10 +1,17 @@ -
-
+
+

{title}

{#if text}

{text}

diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index 662cd20614f..ffbb8b9e3a9 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -9,21 +9,21 @@ import { testERC20Tokens } from '$libs/token'; - +
- +
- {$t('faucet.warning_message')} + {$t('faucet.message.warning')}
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte index 58e6dea6cbe..1a96c851c83 100644 --- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte +++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte @@ -14,7 +14,9 @@ | 'exclamation-circle' | 'up-down-circle' | 'check-circle' - | 'info-circle'; + | 'info-circle' + | 'circle' + | 'arrow-right'; + + diff --git a/packages/bridge-ui-v2/src/components/StatusDot/index.ts b/packages/bridge-ui-v2/src/components/StatusDot/index.ts new file mode 100644 index 00000000000..60bb8b81830 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/StatusDot/index.ts @@ -0,0 +1 @@ +export { default as StatusDot } from './StatusDot.svelte'; diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index 80740260fec..ad07357f539 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -10,8 +10,10 @@ "bridge": { "title": "Bridge", "subtitle": "Send your assets across chains.", - "approve_button": "Approve", - "bridge_button": "Bridge" + "button": { + "approve": "Approve", + "bridge": "Bridge" + } }, "processing_fee": { @@ -34,15 +36,31 @@ "activities": { "title": "Activities", - "subtitle": "Track your bridge transactions here." + "subtitle": "Track your bridge transactions here.", + "header": { + "explorer": "Explorer link", + "status": "Status" + }, + "link.explorer": "View details", + "no_transactions": "No transactions yet", + "button": { + "claim": "Claim", + "retry": "Retry", + "release": "Release" + }, + "status": { + "initiated": "Initiated", + "pending": "Pending", + "claimed": "Claimed", + "failed": "Failed" + } }, "faucet": { "title": "Faucet", "subtitle": "Mint test tokens.", - "currently_on": "You are currently on", - "mint_button": "Mint", - "warning_message": "To request Test Token, you need to mint it on Sepolia. If you are currently on Taiko, please switch your network first. Additionally, ensure that you have a small amount of ETH in your Sepolia wallet to complete the transaction." + "button.mint": "Mint", + "message.warning": "To request Test Token, you need to mint it on Sepolia. If you are currently on Taiko, please switch your network first. Additionally, ensure that you have a small amount of ETH in your Sepolia wallet to complete the transaction." }, "token_dropdown": { @@ -52,11 +70,12 @@ "amount_input": { "label": "Amount", "balance": "Balance", - "max_button": "Max" + "button.max": "Max" }, "chain_selector": { - "placeholder": "Select chain" + "placeholder": "Select chain", + "currently_on": "You are currently on" }, "chain": { diff --git a/packages/bridge-ui-v2/src/routes/+layout.svelte b/packages/bridge-ui-v2/src/routes/+layout.svelte index a57a18ab6af..b7982abb634 100644 --- a/packages/bridge-ui-v2/src/routes/+layout.svelte +++ b/packages/bridge-ui-v2/src/routes/+layout.svelte @@ -14,7 +14,7 @@
-
+
diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css index 199f474e37c..aa3ca0d78ad 100644 --- a/packages/bridge-ui-v2/src/styles/components.css +++ b/packages/bridge-ui-v2/src/styles/components.css @@ -71,16 +71,19 @@ /* Using shadows to increase border size without impacting the surroundings */ @apply outline-none rounded-[10px] + bg-transparent + /* border */ /* border-primary-border */ - shadow-[0_0_0_1px_#5d636f] + shadow-[0_0_0_1px_#5d636f] + /* hover:border-2 */ /* hover:border-primary-border-hover */ - enabled:hover:shadow-[0_0_0_2px_#FF6FC8] + enabled:hover:shadow-[0_0_0_2px_#FF6FC8] + /* focus:border-[3px] */ /* focus:border-primary-border-accent */ - focus:shadow-[0_0_0_3px_#E81899] - bg-transparent; + focus:shadow-[0_0_0_3px_#E81899]; } /* Separatos */ @@ -97,5 +100,23 @@ @apply modal-backdrop bg-overlay-background; } + /* Links and buttons */ + .link { + @apply link-regular text-primary-link underline hover:text-primary-link-hover; + } + + .status-btn { + @apply px-[20px] + py-2 + rounded-full + bg-transparent + + /* primary-interactive[#C8047D => pink-500] */ + shadow-[0_0_0_1px_#C8047D] + + /* primary-interactive-accent[#E81899 => pink-400] */ + hover:shadow-[0_0_0_2px_#E81899]; + } + /* TODO: add more components here */ }