From 1cfc88a2eb96eb93535576598ece02495573c1f9 Mon Sep 17 00:00:00 2001 From: Roy <92044428+impelcrypto@users.noreply.github.com> Date: Mon, 2 Dec 2024 21:45:12 +0800 Subject: [PATCH] feat: added CCIP bridge (#1416) * feat: updated bridge page styling * feat: updated UI * feat: updated CCIP logic for Minato * feat: updated useCcipBridge * wip * fix: send from Minato * feat: bridge from minato * feat: updated UI * fix: refactor * fix: console * feat: added balloon on the assets page * fix: refactoring * fix: tooltip --- src/assets/img/chain/soneium-black.svg | 17 + src/assets/img/chain/soneium-color.svg | 12 + src/components/assets/EvmNativeToken.vue | 68 ++- src/components/assets/styles/asset-list.scss | 19 + .../assets/transfer/Information.vue | 38 +- src/components/bridge/BridgeSelection.vue | 60 ++- src/components/bridge/ccip/Ccip.vue | 104 +++++ src/components/bridge/ccip/CcipBridge.vue | 360 ++++++++++++++++ .../bridge/ccip/styles/ccip-bridge.scss | 272 ++++++++++++ src/components/bridge/ccip/styles/ccip.scss | 35 ++ src/components/bridge/ethereum/L1Bridge.vue | 2 +- .../bridge/ethereum/styles/l1-bridge.scss | 17 +- src/components/bridge/layerzero/LzBridge.vue | 2 +- .../bridge/layerzero/styles/lz-bridge.scss | 16 +- .../bridge/styles/bridge-selection.scss | 8 + src/components/common/Balloon.vue | 4 +- src/components/common/styles/balloon.scss | 4 + .../web3/abi/ccip/EtherSenderReceiver.json | 164 ++++++++ src/config/web3/abi/ccip/Router.json | 164 ++++++++ src/config/web3/index.ts | 21 + src/features.ts | 1 + src/hooks/bridge/useCcipBridge.ts | 393 ++++++++++++++++++ src/hooks/useNetworkInfo.ts | 6 + src/i18n/en-US/index.ts | 16 +- src/links/index.ts | 2 + src/modules/account/index.ts | 1 + src/modules/ccip-bridge/index.ts | 80 ++++ src/router/routes.ts | 7 + src/router/utils/index.ts | 4 + src/v2/app.container.ts | 6 + src/v2/repositories/ICcipBridgeRepository.ts | 23 + .../implementations/CcipBridgeRepository.ts | 130 ++++++ src/v2/services/ICcipBridgeService.ts | 25 ++ .../implementations/CcipBridgeService.ts | 138 ++++++ src/v2/services/implementations/index.ts | 1 + src/v2/services/index.ts | 1 + src/v2/symbols.ts | 2 + 37 files changed, 2196 insertions(+), 27 deletions(-) create mode 100644 src/assets/img/chain/soneium-black.svg create mode 100644 src/assets/img/chain/soneium-color.svg create mode 100644 src/components/bridge/ccip/Ccip.vue create mode 100644 src/components/bridge/ccip/CcipBridge.vue create mode 100644 src/components/bridge/ccip/styles/ccip-bridge.scss create mode 100644 src/components/bridge/ccip/styles/ccip.scss create mode 100644 src/config/web3/abi/ccip/EtherSenderReceiver.json create mode 100644 src/config/web3/abi/ccip/Router.json create mode 100644 src/hooks/bridge/useCcipBridge.ts create mode 100644 src/modules/ccip-bridge/index.ts create mode 100644 src/v2/repositories/ICcipBridgeRepository.ts create mode 100644 src/v2/repositories/implementations/CcipBridgeRepository.ts create mode 100644 src/v2/services/ICcipBridgeService.ts create mode 100644 src/v2/services/implementations/CcipBridgeService.ts diff --git a/src/assets/img/chain/soneium-black.svg b/src/assets/img/chain/soneium-black.svg new file mode 100644 index 000000000..b58bd202a --- /dev/null +++ b/src/assets/img/chain/soneium-black.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/chain/soneium-color.svg b/src/assets/img/chain/soneium-color.svg new file mode 100644 index 000000000..8cecd9205 --- /dev/null +++ b/src/assets/img/chain/soneium-color.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/assets/EvmNativeToken.vue b/src/components/assets/EvmNativeToken.vue index f2e844ba6..c1ae04a08 100644 --- a/src/components/assets/EvmNativeToken.vue +++ b/src/components/assets/EvmNativeToken.vue @@ -43,6 +43,35 @@ +
+ + + {{ $t('assets.bridgeToSoneium') }} + + {{ $t('assets.bridgeToSoneium') }} + + + +
+ + + diff --git a/src/components/bridge/ccip/CcipBridge.vue b/src/components/bridge/ccip/CcipBridge.vue new file mode 100644 index 000000000..71bf04d34 --- /dev/null +++ b/src/components/bridge/ccip/CcipBridge.vue @@ -0,0 +1,360 @@ + + + + + diff --git a/src/components/bridge/ccip/styles/ccip-bridge.scss b/src/components/bridge/ccip/styles/ccip-bridge.scss new file mode 100644 index 000000000..313e2e94f --- /dev/null +++ b/src/components/bridge/ccip/styles/ccip-bridge.scss @@ -0,0 +1,272 @@ +@import 'src/css/quasar.variables.scss'; + +.wrapper--ccip-bridge { + display: flex; + flex-direction: column; + align-items: center; +} + +.box--input-field { + display: grid; + row-gap: 12px; + padding: 9px 15px; + border-radius: 6px; + height: 88px; + background: transparent; + + border: 1px solid $navy-1; + @media (min-width: $xs) { + width: 344px; + } + @media (min-width: $sm) { + width: 412px; + } +} + +.rows { + display: grid; + row-gap: 16px; + margin-bottom: 8px; +} + +.btn-margin-adjuster { + margin-top: 24px; +} + +.row--box-error { + padding: 10px 20px; + border-radius: 6px; + width: 344px; + border: 1px solid $warning-red; + background: $box-red; + text-align: left; + @media (min-width: $sm) { + width: 412px; + } +} + +.box__row { + display: flex; + column-gap: 8px; + align-items: center; +} + +.box__space-between { + display: flex; + justify-content: space-between; +} + +.box__available { + display: flex; + column-gap: 10px; + align-items: center; +} + +.wrapper__row--button { + display: flex; + justify-content: center; +} + +.box__column--input-amount { + justify-self: flex-end; + width: 100%; + display: grid; +} + +.text--to--balance { + font-weight: 400; + font-size: 12px; + color: $gray-4; +} + +.text--available { + color: $astar-blue; + font-weight: 400; + font-size: 12px; +} + +.input--amount { + width: 180px; + font-size: 22px; + outline: none; + background: transparent; + text-align: right; + font-weight: 600; + color: $navy-1; + justify-self: flex-end; + @media (min-width: $md) { + width: 250px; + } +} + +.token-logo { + margin-top: -10px; + width: 24px; + height: 24px; + img { + border-radius: 50%; + } +} + +.row--buttons { + display: grid; + row-gap: 16px; + @media (min-width: $sm) { + grid-template-columns: 48% 48%; + justify-content: space-between; + row-gap: 0px; + } +} + +.icon--expand { + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.button--confirm { + font-size: 16px; + font-weight: 600; + height: 44px; + width: 100%; +} + +.row--reverse { + display: flex; + justify-content: center; + position: relative; + z-index: 10; +} + +.row--reverse-bottom { + margin-top: -16px; +} + +.icon--reverse { + position: absolute; + height: 32px; + width: 32px; + padding: 4px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid $gray-4; + cursor: pointer !important; + margin-top: -24px; + background: $white; + transition: all 0.3s ease 0s; + &:hover { + border: 1px solid $astar-blue !important; + color: $astar-blue; + transition: all 0.3s ease 0s; + } +} + +.container--approve { + display: flex; + align-items: center; + column-gap: 8px; +} + +.input--checkbox { + display: flex; + column-gap: 8px; +} + +.input--checkbox input[type='checkbox'] { + display: none; + width: 20px; +} + +.input--checkbox input[type='checkbox'] + label { + display: none; + cursor: pointer; + display: inline-block; + position: relative; + padding-left: 32px; +} + +.input--checkbox input[type='checkbox'] + label::before { + content: ''; + position: absolute; + display: block; + box-sizing: border-box; + width: 20px; + height: 20px; + margin-top: -10px; + left: 0; + top: 50%; + border: 1px solid; + border-color: $navy-1; + background-color: transparent; + border-radius: 4px; +} + +.input--checkbox--checked input[type='checkbox'] + label::before { + border-color: $astar-blue !important; +} + +.input--checkbox input[type='checkbox']:checked + label::after { + content: ''; + position: absolute; + display: block; + box-sizing: border-box; + width: 14px; + height: 7px; + margin-top: -5px; + top: 50%; + left: 3px; + transform: rotate(-45deg); + border-bottom: 3px solid; + border-left: 3px solid; + border-color: $astar-blue; +} + +.container--warning { + display: flex; + flex-direction: column; + row-gap: 6px; + border: 1px solid $border-yellow; + padding: 8px 0; + padding-left: 24px; + width: 344px; + border-radius: 6px; + background: $transparent-yellow; + color: $warning-yellow; + @media (min-width: $sm) { + width: 412px; + } + + ul { + list-style-type: disc; + } +} + +.body--dark { + input { + color: white; + } + .box--input-field { + background: transparent; + border: 1px solid $gray-3; + } + + .icon--reverse { + background: $navy-4; + border: 1px solid $gray-3; + } + + .row--box-error { + background: $box-red-dark; + } + .input--checkbox input[type='checkbox'] + label::before { + border-color: $gray-3; + } +} + +.text-underline { + text-decoration: underline; + cursor: pointer; +} diff --git a/src/components/bridge/ccip/styles/ccip.scss b/src/components/bridge/ccip/styles/ccip.scss new file mode 100644 index 000000000..616a79cb6 --- /dev/null +++ b/src/components/bridge/ccip/styles/ccip.scss @@ -0,0 +1,35 @@ +@import 'src/css/quasar.variables.scss'; + +.wrapper--bridge { + position: relative; + display: flex; + justify-content: center; +} + +.container--bridge { + display: grid; + row-gap: 32px; + margin-bottom: 24px; + margin-top: 52px; + @media (min-width: $xl) { + justify-content: center; + } +} + +.wrapper-containers { + display: flex; + flex-direction: column; + row-gap: 80px; + @media (min-width: $md) { + flex-direction: row; + column-gap: 24px; + row-gap: 0px; + } + @media (min-width: $lg) { + flex-direction: row; + column-gap: 40px; + } + @media (min-width: $xl) { + column-gap: 50px; + } +} diff --git a/src/components/bridge/ethereum/L1Bridge.vue b/src/components/bridge/ethereum/L1Bridge.vue index 92b27f50e..927e17144 100644 --- a/src/components/bridge/ethereum/L1Bridge.vue +++ b/src/components/bridge/ethereum/L1Bridge.vue @@ -41,7 +41,7 @@ -
+
{{ $t('to') }}
diff --git a/src/components/bridge/ethereum/styles/l1-bridge.scss b/src/components/bridge/ethereum/styles/l1-bridge.scss index 3a26d785e..380befcc9 100644 --- a/src/components/bridge/ethereum/styles/l1-bridge.scss +++ b/src/components/bridge/ethereum/styles/l1-bridge.scss @@ -135,7 +135,11 @@ display: flex; justify-content: center; position: relative; - margin-top: 16px; + z-index: 10; +} + +.row--reverse-bottom { + margin-top: -16px; } .icon--reverse { @@ -150,7 +154,7 @@ border: 1px solid $gray-4; cursor: pointer !important; margin-top: -24px; - background: transparent; + background: $white; transition: all 0.3s ease 0s; &:hover { border: 1px solid $astar-blue !important; @@ -243,12 +247,17 @@ input { color: white; } - .box--input-field, - .icon--reverse { + + .box--input-field { background: transparent; border: 1px solid $gray-3; } + .icon--reverse { + background: $navy-4; + border: 1px solid $gray-3; + } + .row--box-error { background: $box-red-dark; } diff --git a/src/components/bridge/layerzero/LzBridge.vue b/src/components/bridge/layerzero/LzBridge.vue index 0bc576597..2e2756124 100644 --- a/src/components/bridge/layerzero/LzBridge.vue +++ b/src/components/bridge/layerzero/LzBridge.vue @@ -41,7 +41,7 @@
-
+
{{ $t('to') }}
diff --git a/src/components/bridge/layerzero/styles/lz-bridge.scss b/src/components/bridge/layerzero/styles/lz-bridge.scss index 3a26d785e..dbc546f23 100644 --- a/src/components/bridge/layerzero/styles/lz-bridge.scss +++ b/src/components/bridge/layerzero/styles/lz-bridge.scss @@ -135,7 +135,11 @@ display: flex; justify-content: center; position: relative; - margin-top: 16px; + z-index: 10; +} + +.row--reverse-bottom { + margin-top: -16px; } .icon--reverse { @@ -150,7 +154,7 @@ border: 1px solid $gray-4; cursor: pointer !important; margin-top: -24px; - background: transparent; + background: $white; transition: all 0.3s ease 0s; &:hover { border: 1px solid $astar-blue !important; @@ -243,12 +247,16 @@ input { color: white; } - .box--input-field, - .icon--reverse { + .box--input-field { background: transparent; border: 1px solid $gray-3; } + .icon--reverse { + background: $navy-4; + border: 1px solid $gray-3; + } + .row--box-error { background: $box-red-dark; } diff --git a/src/components/bridge/styles/bridge-selection.scss b/src/components/bridge/styles/bridge-selection.scss index 00a9c421a..2add525ca 100644 --- a/src/components/bridge/styles/bridge-selection.scss +++ b/src/components/bridge/styles/bridge-selection.scss @@ -117,6 +117,14 @@ height: 32px; } +.img--logo-astr { + height: 48px; +} + +.img--logo-soneium { + height: 32px; +} + .row--bridge-title { text-align: left; } diff --git a/src/components/common/Balloon.vue b/src/components/common/Balloon.vue index 897d6c04f..5932b69b5 100644 --- a/src/components/common/Balloon.vue +++ b/src/components/common/Balloon.vue @@ -10,7 +10,9 @@
- {{ title }} +
+ {{ title }} +