fix: update api blockchain model

rango-exchange · Dec 24, 2023 · 942b562 · 942b562
1 parent af6b233
commit 942b562
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 36 deletions.
diff --git a/components/common/Table/cells/TokenCell.tsx b/components/common/Table/cells/TokenCell.tsx
@@ -14,7 +14,9 @@ function TokenCell(props: CellProps) {
       ? lastStep?.toToken
       : firstStep?.fromToken;
 
-  const { blockchain, blockchainLogo, logo, name, symbol } = token || {};
+  const { blockchainData, logo, name, symbol } = token || {};
+  const { shortName: blockchainShortName, logo: blockchainLogo } =
+    blockchainData || {};
 
   return (
     <>
@@ -32,7 +34,7 @@ function TokenCell(props: CellProps) {
           />
           <img
             src={blockchainLogo}
-            alt={blockchain}
+            alt={blockchainShortName}
             className="absolute rounded-full w-[12px] md:w-[15px] h-[12px] md:h-[15px] right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
           />
         </div>
@@ -54,7 +56,7 @@ function TokenCell(props: CellProps) {
             </span>
           </div>
           <div className="text-12 leading-12 md:leading-14 md:mt-5 md:text-14 text-neutral-400">
-            {blockchain}
+            {blockchainShortName}
           </div>
         </div>
       </div>

diff --git a/components/common/Table/index.tsx b/components/common/Table/index.tsx
@@ -4,7 +4,6 @@ import TableBody from './TableBody';
 
 function Table(props: TableProps) {
   const { data } = props;
-
   return (
     <div className="w-full">
       <TableHead />

diff --git a/components/detail/SwapDetailSummary/SwapDetailChain.tsx b/components/detail/SwapDetailSummary/SwapDetailChain.tsx
@@ -6,7 +6,9 @@ function SwapDetailChain(props: SwapDetailItem) {
   const { from, to } = details;
 
   const token = column.title === 'Source Token' ? from : to;
-  const { blockchain, symbol, blockchainLogo, logo, name } = token;
+  const { blockchainData, symbol, logo, name } = token;
+  const { shortName: blockchainShortName, logo: blockchainLogo } =
+    blockchainData;
 
   return (
     <div className="flex col-span-2 items-center h-[3.75rem] p-18">
@@ -22,15 +24,15 @@ function SwapDetailChain(props: SwapDetailItem) {
           src={blockchainLogo}
           width={15}
           height={15}
-          alt={blockchain}
+          alt={blockchainShortName}
           className="absolute rounded-full right-[-3px] bottom-[-3px]"
         />
       </div>
       <div className="flex flex-col items-start justify-center">
         <div className="flex items-center text-16 text-primary-500">
           {symbol || name}
         </div>
-        <div className="text-neutral-400 text-14">{blockchain}</div>
+        <div className="text-neutral-400 text-14">{blockchainShortName}</div>
       </div>
     </div>
   );

diff --git a/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx b/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx
@@ -9,15 +9,11 @@ function SwapDetailMobileToken(props: SwapDetailItem) {
   const from = steps?.length ? steps[0].from : null;
   const to = steps?.length ? steps[steps.length - 1].to : null;
   const token = column.title === 'input' ? from : to;
-  const {
-    blockchain,
-    symbol,
-    blockchainLogo,
-    logo,
-    name,
-    realAmount,
-    expectedAmount,
-  } = token || {};
+  const { blockchainData, symbol, logo, name, realAmount, expectedAmount } =
+    token || {};
+
+  const { shortName: blockchainShortName, logo: blockchainLogo } =
+    blockchainData || {};
 
   const wallet = column.title === 'input' ? sourceWallet : destinationWallet;
 
@@ -82,14 +78,14 @@ function SwapDetailMobileToken(props: SwapDetailItem) {
               src={blockchainLogo}
               width={10}
               height={10}
-              alt={blockchain}
+              alt={blockchainShortName}
               className="absolute rounded-full right-[-2px] bottom-[-2px]"
             />
           </div>
           <div className="flex items-center px-5 text-14 text-primary-500">
             {symbol || name}
           </div>
-          <div className="text-neutral-400 text-12">{blockchain}</div>
+          <div className="text-neutral-400 text-12">{blockchainShortName}</div>
         </div>
       </div>
     </div>

diff --git a/components/detail/SwapDetailSummary/index.tsx b/components/detail/SwapDetailSummary/index.tsx
@@ -13,7 +13,7 @@ function SwapDetailSummary(props: PropsType) {
         Swap Details
       </h1>
       <p className="text-14 md:text-22 text-primary-500 pt-15 md:pt-25">
-        {`Swap from ${from.symbol} (on ${from.blockchain}) to ${to.symbol} (on ${to.blockchain})`}
+        {`Swap from ${from.symbol} (on ${from?.blockchainData?.shortName}) to ${to.symbol} (on ${to?.blockchainData?.shortName})`}
       </p>
       <div className="pt-5 md:pt-15 flex md:items-center flex-col md:flex-row">
         <span className="text-12 md:text-16 text-primary-500 font-medium">

diff --git a/components/detail/SwapSteps/SwapStepChainLogo.tsx b/components/detail/SwapSteps/SwapStepChainLogo.tsx
@@ -4,7 +4,9 @@ import { SwapStepChainLogoProps } from './SwapSteps.type';
 
 function SwapStepChainLogo(props: SwapStepChainLogoProps) {
   const { token } = props;
-  const { symbol, logo, blockchainLogo, name, blockchain } = token;
+  const { symbol, logo, name, blockchainData } = token;
+  const { shortName: blockchainShortName, logo: blockchainLogo } =
+    blockchainData;
 
   return (
     <div className="relative mr-5">
@@ -15,8 +17,8 @@ function SwapStepChainLogo(props: SwapStepChainLogoProps) {
       />
       <img
         src={blockchainLogo}
-        alt={blockchain}
-        className="rounded-full absolute w-[10px] md:w-[12px] h-[10px] md:h-[22px] right-[-2px] bottom-[-2px] z-10"
+        alt={blockchainShortName}
+        className="rounded-full absolute w-[10px] md:w-[12px] h-[10px] md:h-[12px] right-[-2px] bottom-[-2px] z-10"
       />
     </div>
   );

diff --git a/components/detail/SwapSteps/SwapStepItemExpanded.tsx b/components/detail/SwapSteps/SwapStepItemExpanded.tsx
@@ -8,19 +8,21 @@ function SwapStepItemExpanded(props: SwapStepItemExpandedProps) {
   const {
     symbol: fromSymbol,
     name: fromName,
-    blockchain: fromBlockchain,
+    blockchainData: fromBlockchain,
   } = from;
-  const { symbol: toSymbol, name: toName, blockchain: toBlockchain } = to;
+  const { symbol: toSymbol, name: toName, blockchainData: toBlockchain } = to;
 
   return (
     <div
       className={`transition-[max-height] duration-[0.7s] ease-in-out overflow-hidden ${
         open ? 'max-h-[500px]' : 'max-h-0'
       }`}>
       <div className="pt-15 md:pt-35 text-14 md:text-22 text-primary-500">
-        {`Swap from ${fromSymbol || fromName} (on ${fromBlockchain}) to ${
+        {`Swap from ${
+          fromSymbol || fromName
+        } (on ${fromBlockchain?.shortName}) to ${
           toSymbol || toName
-        } (on ${toBlockchain})`}
+        } (on ${toBlockchain?.shortName})`}
       </div>
 
       <div className="pt-10 md:pt-25">

diff --git a/components/detail/SwapSteps/SwapStepSwapper.tsx b/components/detail/SwapSteps/SwapStepSwapper.tsx
@@ -7,7 +7,6 @@ import { BorderColor } from './SwapSteps.helper';
 function SwapStepSwapper(props: SwapStepItemProps) {
   const { step } = props;
   const { from, to, swapper, internalPath, status } = step;
-
   const swappers: InternalPathType[] = [...internalPath];
   if (!swappers.length) swappers.push({ from, swapper, to });
 
@@ -37,8 +36,8 @@ function SwapStepSwapper(props: SwapStepItemProps) {
               />
               <div className="text-12 md:text-18 text-primary-500">
                 {internalSwapper?.swapperType === 'DEX'
-                  ? `Swap on ${internalFrom?.blockchain} via ${internalSwapper?.swapperTitle}`
-                  : `Bridge from ${internalFrom?.blockchain} to ${internalTo?.blockchain} via ${internalSwapper?.swapperTitle}`}
+                  ? `Swap on ${internalFrom?.blockchainData?.shortName} via ${internalSwapper?.swapperTitle}`
+                  : `Bridge from ${internalFrom?.blockchainData?.shortName} to ${internalTo?.blockchainData?.shortName} via ${internalSwapper?.swapperTitle}`}
               </div>
             </div>
           </>

diff --git a/types/transations.ts b/types/transations.ts
@@ -1,10 +1,16 @@
-export interface RouteType {
+export interface BlockchainType {
   blockchain: string;
+  displayName: string;
+  logo: string;
+  shortName: string;
+  type: string;
+}
+
+export interface RouteType {
+  blockchainData: BlockchainType;
   symbol: string;
   decimals: number;
   name: string;
-  blockchainLogo: string;
-  blockchainType: string;
   expectedAmount: number;
   logo: string;
   price: number;
@@ -33,10 +39,7 @@ export interface WalletType {
 }
 
 export interface AssetType {
-  address: string;
-  blockchain: string;
-  blockchainLogo: string;
-  blockchainType: string;
+  blockchainData: BlockchainType;
   decimals: 18;
   expectedAmount: number;
   logo: string;