diff --git a/components/common/Table/cells/TokenCell.tsx b/components/common/Table/cells/TokenCell.tsx index f76d8b2..fe8f406 100644 --- 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) { /> {blockchain} @@ -54,7 +56,7 @@ function TokenCell(props: CellProps) {
- {blockchain} + {blockchainShortName}
diff --git a/components/common/Table/index.tsx b/components/common/Table/index.tsx index 40782d2..41e9abb 100644 --- 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 (
diff --git a/components/detail/SwapDetailSummary/SwapDetailChain.tsx b/components/detail/SwapDetailSummary/SwapDetailChain.tsx index d0776f8..56b67f6 100644 --- 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 (
@@ -22,7 +24,7 @@ function SwapDetailChain(props: SwapDetailItem) { src={blockchainLogo} width={15} height={15} - alt={blockchain} + alt={blockchainShortName} className="absolute rounded-full right-[-3px] bottom-[-3px]" />
@@ -30,7 +32,7 @@ function SwapDetailChain(props: SwapDetailItem) {
{symbol || name}
-
{blockchain}
+
{blockchainShortName}
); diff --git a/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx b/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx index 707855c..2b8c703 100644 --- 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]" />
{symbol || name}
-
{blockchain}
+
{blockchainShortName}
diff --git a/components/detail/SwapDetailSummary/index.tsx b/components/detail/SwapDetailSummary/index.tsx index 6507e3a..f63a610 100644 --- a/components/detail/SwapDetailSummary/index.tsx +++ b/components/detail/SwapDetailSummary/index.tsx @@ -13,7 +13,7 @@ function SwapDetailSummary(props: PropsType) { Swap Details

- {`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})`}

diff --git a/components/detail/SwapSteps/SwapStepChainLogo.tsx b/components/detail/SwapSteps/SwapStepChainLogo.tsx index e3ce07e..7f0e490 100644 --- 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 (
@@ -15,8 +17,8 @@ function SwapStepChainLogo(props: SwapStepChainLogoProps) { /> {blockchain}
); diff --git a/components/detail/SwapSteps/SwapStepItemExpanded.tsx b/components/detail/SwapSteps/SwapStepItemExpanded.tsx index 5e19c11..db6e502 100644 --- a/components/detail/SwapSteps/SwapStepItemExpanded.tsx +++ b/components/detail/SwapSteps/SwapStepItemExpanded.tsx @@ -8,9 +8,9 @@ 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 (
- {`Swap from ${fromSymbol || fromName} (on ${fromBlockchain}) to ${ + {`Swap from ${ + fromSymbol || fromName + } (on ${fromBlockchain?.shortName}) to ${ toSymbol || toName - } (on ${toBlockchain})`} + } (on ${toBlockchain?.shortName})`}
diff --git a/components/detail/SwapSteps/SwapStepSwapper.tsx b/components/detail/SwapSteps/SwapStepSwapper.tsx index 87c18ca..8ad2f0e 100644 --- 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) { />
{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}`}
diff --git a/types/transations.ts b/types/transations.ts index 497ed98..d76355b 100644 --- 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;