diff --git a/src/assets/img/banner/banner-eth-rebate.png b/src/assets/img/banner/banner-eth-rebate.png new file mode 100644 index 000000000..ac7d954a9 Binary files /dev/null and b/src/assets/img/banner/banner-eth-rebate.png differ diff --git a/src/components/bridge/ccip/Ccip.vue b/src/components/bridge/ccip/Ccip.vue index b90606521..99b333933 100644 --- a/src/components/bridge/ccip/Ccip.vue +++ b/src/components/bridge/ccip/Ccip.vue @@ -24,7 +24,16 @@ :is-gas-payable="Boolean(isGasPayable)" @update:isApproveMaxAmount="(value: boolean) => (isApproveMaxAmount = value)" /> - +
+ +
+ +
+
@@ -36,7 +45,7 @@ import { useAccount } from 'src/hooks'; import { HistoryTxType } from 'src/modules/account'; import { defineComponent, ref } from 'vue'; import { useCcipBridge } from '../../../hooks/bridge/useCcipBridge'; - +import { CcipNetworkName } from 'src/modules/ccip-bridge'; export default defineComponent({ components: { Information, @@ -89,6 +98,7 @@ export default defineComponent({ bridgeFee, isToSoneium, isGasPayable, + CcipNetworkName, inputHandler, reverseChain, handleBridge, diff --git a/src/components/bridge/ccip/CcipBridge.vue b/src/components/bridge/ccip/CcipBridge.vue index 9a61c7248..eeb079763 100644 --- a/src/components/bridge/ccip/CcipBridge.vue +++ b/src/components/bridge/ccip/CcipBridge.vue @@ -129,6 +129,9 @@ }) }} +
  • + {{ $t('bridge.rebate') }} +
  • {{ $t('bridge.warningCcipTime', { time: ccipBridgeTime[fromChainName as CcipNetworkName] }) }}
  • @@ -356,6 +359,7 @@ export default defineComponent({ isApproveButtonDisabled, isBridgeButtonDisabled, isH160, + CcipNetworkName, truncate, bridge, approve, diff --git a/src/components/bridge/ccip/styles/ccip.scss b/src/components/bridge/ccip/styles/ccip.scss index 616a79cb6..2a38a8313 100644 --- a/src/components/bridge/ccip/styles/ccip.scss +++ b/src/components/bridge/ccip/styles/ccip.scss @@ -33,3 +33,21 @@ column-gap: 50px; } } + +.row--banner { + margin-top: 16px; +} + +.banner--eth-rebates { + width: 348px; + border-radius: 6px; + @media (min-width: $sm) { + width: 412px; + } + @media (min-width: $md) { + width: 320px; + } + @media (min-width: $xl) { + width: 420px; + } +} diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts index 04d9bb952..02ae45c7b 100644 --- a/src/i18n/en-US/index.ts +++ b/src/i18n/en-US/index.ts @@ -1134,6 +1134,7 @@ export default { slippage: 'Slippage: {percent}%', feeOnTransaction: 'Transaction fee: {amount} {symbol}', feeOnBridge: 'Bridge fee: {amount} {symbol}', + rebate: 'You will receive 0.00008 ETH for gas on Soneium', gelatoApiError: 'Bridge UI is not available, please try again later', warningHighTraffic: 'High bridge traffic may delay withdrawal transactions up to 5 hours. We appreciate your patience.',