feat: updated UI

src/components/assets/transfer/Information.vue

@@ -11,7 +11,7 @@
         <astar-icon-play size="24" />
       </div>
     </a>
-    <div id="faq" class="container--information">
+    <div v-if="transferType !== HistoryTxType.CCIP_BRIDGE" id="faq" class="container--information">
       <div class="row--title">
         <astar-icon-group size="20" />
         <span>{{ $t('assets.transferPage.faq') }}</span>
@@ -53,6 +53,33 @@
         </div>
       </div>
     </div>
+
+    <div
+      v-if="transferType === HistoryTxType.CCIP_BRIDGE && !isHistory"
+      id="history"
+      class="container--information"
+    >
+      <div class="box--contents">
+        <div class="row--title">
+          <astar-icon-history size="20" />
+          <span>{{ $t('assets.transferPage.recentHistory') }}</span>
+        </div>
+        <div>
+          <a
+            :href="`${ccipExplorerUrl}/address/${currentAccount}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="container--hot-topics-contents"
+          >
+            <span class="text-topics-link"> Find your recent history on CCIP Explorer </span>
+            <div class="container--explorer-icon">
+              <astar-icon-external-link />
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <div id="hot-topics" class="container--information">
       <div class="row--title">
         <astar-icon-group size="20" />
@@ -101,8 +128,8 @@ import { useStore } from 'src/store';
 import { computed, defineComponent, PropType, ref, watchEffect, onUnmounted } from 'vue';
 import { RecentLzHistory } from '../../../modules/information/index';
 import { getLzTxHistories } from '../../../modules/information/recent-history/transfer/index';
-import { LOCAL_STORAGE } from '../../../config/localStorage';
 import { endpointKey, providerEndpoints } from '../../../config/chainEndpoints';
+import { ccipExplorerUrl } from 'src/links';
 
 export default defineComponent({
   components: { TransactionHistory, LzHistory },
@@ -124,7 +151,6 @@ export default defineComponent({
     const isLoadingTxHistories = ref<boolean>(true);
     const { senderSs58Account, isMultisig, currentAccount } = useAccount();
     const { currentNetworkName, isAstarZkEvm } = useNetworkInfo();
-
     const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
     const faqs = computed<Faq[]>(() => {
       if (props.transferType === HistoryTxType.Transfer) {
@@ -199,6 +225,9 @@ export default defineComponent({
       socialUrl,
       isMultisig,
       lztTxHistories,
+      HistoryTxType,
+      ccipExplorerUrl,
+      currentAccount,
     };
   },
 });

src/components/bridge/BridgeSelection.vue

@@ -15,9 +15,9 @@
               <div class="row--logo-bg">
                 <div class="img--logo-bg">
                   <img
-                    class="img--logo-astr"
-                    :src="require('src/assets/img/token/astr.png')"
-                    alt="astr"
+                    class="img--logo-soneium"
+                    :src="require('src/assets/img/chain/soneium-color.svg')"
+                    alt="soneium"
                   />
                 </div>
               </div>

src/components/bridge/ccip/Ccip.vue

@@ -24,7 +24,7 @@
           :is-gas-payable="Boolean(isGasPayable)"
           @update:isApproveMaxAmount="(value: boolean) => (isApproveMaxAmount = value)"
         />
-        <information :transfer-type="HistoryTxType.LZ_BRIDGE" :is-history="true" />
+        <information :transfer-type="HistoryTxType.CCIP_BRIDGE" :is-history="false" />
       </div>
     </div>
   </div>

src/components/bridge/ccip/CcipBridge.vue

@@ -41,7 +41,7 @@
           </span>
         </q-tooltip>
       </div>
-      <div class="box--input-field">
+      <div class="box--input-field row--reverse-bottom">
         <div class="box__space-between">
           <span> {{ $t('to') }}</span>
           <div>

src/components/bridge/ccip/styles/ccip-bridge.scss

@@ -100,6 +100,7 @@
 }
 
 .token-logo {
+  margin-top: -10px;
   width: 24px;
   height: 24px;
   img {
@@ -135,7 +136,11 @@
   display: flex;
   justify-content: center;
   position: relative;
-  margin-top: 16px;
+  z-index: 10;
+}
+
+.row--reverse-bottom {
+  margin-top: -16px;
 }
 
 .icon--reverse {
@@ -150,7 +155,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 +248,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;
   }

src/components/bridge/ethereum/L1Bridge.vue

@@ -41,7 +41,7 @@
           </span>
         </q-tooltip>
       </div>
-      <div class="box--input-field">
+      <div class="box--input-field row--reverse-bottom">
         <div class="box__space-between">
           <span> {{ $t('to') }}</span>
           <div>

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;
   }

src/components/bridge/layerzero/LzBridge.vue

@@ -41,7 +41,7 @@
           </span>
         </q-tooltip>
       </div>
-      <div class="box--input-field">
+      <div class="box--input-field row--reverse-bottom">
         <div class="box__space-between">
           <span> {{ $t('to') }}</span>
           <div>

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;
   }

src/components/bridge/styles/bridge-selection.scss

@@ -121,6 +121,10 @@
   height: 48px;
 }
 
+.img--logo-soneium {
+  height: 32px;
+}
+
 .row--bridge-title {
   text-align: left;
 }

src/hooks/bridge/useCcipBridge.ts

@@ -11,7 +11,7 @@ import {
 } from 'src/modules/ccip-bridge';
 import { showLoading } from 'src/modules/extrinsic/utils';
 import { useStore } from 'src/store';
-import { WatchCallback, computed, onUnmounted, ref, watch, watchEffect } from 'vue';
+import { WatchCallback, computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useEthProvider } from '../custom-signature/useEthProvider';
 import { EthereumProvider } from '../types/CustomSignature';
@@ -252,21 +252,10 @@ export const useCcipBridge = () => {
       token: selectedToken.value,
     });
 
-    // if (isHex(hash)) {
-    //   addLzHistories({
-    //     hash: hash,
-    //     type: HistoryTxType.LZ_BRIDGE,
-    //     address: currentAccount.value,
-    //     amount: bridgeAmt.value,
-    //     symbol: selectedToken.value.symbol,
-    //     fromChainId: fromChainId.value,
-    //     toChainId: toChainId.value,
-    //   });
-    // }
-
     await setIsApproved();
     bridgeAmt.value = '';
     isApproveMaxAmount.value = false;
+    await setBridgeBalance();
     return hash;
   };
 

src/i18n/en-US/index.ts

@@ -1085,7 +1085,7 @@ export default {
     ccipMinatoBridge: {
       title: 'Soneium Bridge',
       tag: 'SBY',
-      text: 'Transfer assets between Shibuya EVM and Soneium Minato testnet.',
+      text: 'Transfer SBY between Soneium Minato and Shibuya EVM. Powered by CCIP.',
       text2: 'Available on Shibuya EVM. Switch the network to use it.',
     },
     astarBridge: {

src/links/index.ts

@@ -55,6 +55,8 @@ export const polkadotJsUrl = {
 
 export const lfgmUrl = 'https://lfgm.astar.network';
 
+export const ccipExplorerUrl = 'https://ccip.chain.link';
+
 export const getSubscanExtrinsic = ({
   subscanBase,
   hash,

src/modules/account/index.ts

@@ -21,6 +21,7 @@ export enum HistoryTxType {
   Xvm = 'XVM Transfer',
   ZK_ETHEREUM_BRIDGE = 'ZK Ethereum Bridge',
   LZ_BRIDGE = 'LayerZero Bridge',
+  CCIP_BRIDGE = 'CCIP Bridge',
 }
 
 export interface TxHistory {

src/modules/ccip-bridge/index.ts

@@ -49,7 +49,7 @@ export const ccipBridgeAddress = {
 export const ccipBridgeIcon = {
   [CcipNetworkName.ShibuyaEvm]: require('src/assets/img/chain/astar.png'),
   [CcipNetworkName.AstarEvm]: require('src/assets/img/chain/astar.png'),
-  [CcipNetworkName.SoneiumMinato]: require('src/assets/img/chain/astar.png'),
+  [CcipNetworkName.SoneiumMinato]: require('src/assets/img/chain/soneium-black.svg'),
   [CcipNetworkName.Soneium]: require('src/assets/img/chain/astar.png'),
 } as any;