@@ -261,6 +261,16 @@ const formatRawBalance = (raw: string, decimals: number): string => {
261261
262262const formatRatioRate = (
263263 ratio : { numerator : number | string ; denominator : number | string } | null | undefined ,
264+ ) : string => {
265+ if ( ! ratio ) return '0' ;
266+ const numerator = Number ( ratio . numerator ) ;
267+ const denominator = Number ( ratio . denominator ) ;
268+ if ( ! Number . isFinite ( numerator ) || ! Number . isFinite ( denominator ) || numerator === 0 ) return '0' ;
269+ return ( denominator / numerator ) . toFixed ( 8 ) . replace ( / \. ? 0 + $ / , '' ) ;
270+ } ;
271+
272+ const formatInverseRatioRate = (
273+ ratio : { numerator : number | string ; denominator : number | string } | null | undefined ,
264274) : string => {
265275 if ( ! ratio ) return '0' ;
266276 const numerator = Number ( ratio . numerator ) ;
@@ -602,7 +612,7 @@ export default function App() {
602612 if ( ! selectedAsset || ! amount ) return '0' ;
603613 const amountNum = Number ( amount ) ;
604614 if ( ! Number . isFinite ( amountNum ) ) return '0' ;
605- const ratioNum = Number ( selectedAsset . ratio . numerator ) / Number ( selectedAsset . ratio . denominator ) ;
615+ const ratioNum = Number ( selectedAsset . ratio . denominator ) / Number ( selectedAsset . ratio . numerator ) ;
606616 if ( ! Number . isFinite ( ratioNum ) ) return '0' ;
607617 return ( amountNum * ratioNum ) . toFixed ( 8 ) . replace ( / \. ? 0 + $ / , '' ) ;
608618 } , [ selectedAsset , amount ] ) ;
@@ -746,6 +756,7 @@ export default function App() {
746756 ) : (
747757 sortedAvailableAssets . map ( ( asset , i ) => {
748758 const rate = formatRatioRate ( asset . ratio ) ;
759+ const inverseRate = formatInverseRatioRate ( asset . ratio ) ;
749760 const routeLabel = `${ asset . chain } /${ asset . symbol } ${ t ( 'common.arrow' ) } ${ asset . targetChain } /${ asset . targetAsset } ` ;
750761 return (
751762 < motion . div
@@ -770,8 +781,17 @@ export default function App() {
770781 < AssetAvatar symbol = { asset . symbol } chain = { asset . chain } />
771782 < div className = "min-w-0 flex-1" >
772783 < CardTitle className = "text-base break-words" > { routeLabel } </ CardTitle >
773- < CardDescription >
774- { t ( 'asset.ratio' , { from : asset . symbol , rate, to : asset . targetAsset } ) }
784+ < CardDescription className = "space-y-0.5" >
785+ < div >
786+ { t ( 'asset.ratio' , { from : asset . symbol , rate, to : asset . targetAsset } ) }
787+ </ div >
788+ < div className = "text-muted-foreground/70" >
789+ { t ( 'asset.ratio' , {
790+ from : asset . targetAsset ,
791+ rate : inverseRate ,
792+ to : asset . symbol ,
793+ } ) }
794+ </ div >
775795 </ CardDescription >
776796 </ div >
777797 </ div >
@@ -996,12 +1016,20 @@ export default function App() {
9961016 < Separator />
9971017 < div className = "flex justify-between" >
9981018 < span className = "text-muted-foreground" > { t ( 'confirm.ratio' ) } </ span >
999- < span >
1019+ < span className = "text-right" >
10001020 { t ( 'asset.ratio' , {
10011021 from : selectedAsset ?. symbol ?? '' ,
10021022 rate : formatRatioRate ( selectedAsset ?. ratio ) ,
10031023 to : selectedAsset ?. targetAsset ?? '' ,
10041024 } ) }
1025+ < br />
1026+ < span className = "text-muted-foreground/70" >
1027+ { t ( 'asset.ratio' , {
1028+ from : selectedAsset ?. targetAsset ?? '' ,
1029+ rate : formatInverseRatioRate ( selectedAsset ?. ratio ) ,
1030+ to : selectedAsset ?. symbol ?? '' ,
1031+ } ) }
1032+ </ span >
10051033 </ span >
10061034 </ div >
10071035 < Separator />
0 commit comments