@rango-dev/ui 0.1.11-next.2 → 0.1.11-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.11-next.2",
+  "version": "0.1.11-next.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/SwapDetail/SwapDetail.tsx

@@ -6,6 +6,7 @@ import { ArrowRightIcon } from '../Icon';
 import { Spacer } from '../Spacer';
 import { Spinner } from '../Spinner';
 import { Token } from './Token';
+import { limitDecimalPlaces } from '../../helper';
 
 const Container = styled('div', {
   position: 'relative',
@@ -75,7 +76,7 @@ export function SwapDetail({
                 logo: firstStep.fromBlockchainLogo || '',
                 name: firstStep.fromBlockchain,
               },
-              amount: swap.inputAmount,
+              amount: limitDecimalPlaces(swap.inputAmount),
             }}
           />
           <Spacer size={12} />
@@ -92,10 +93,11 @@ export function SwapDetail({
                 logo: lastStep.toBlockchainLogo,
                 name: lastStep.toBlockchain,
               },
-              amount:
+              amount: limitDecimalPlaces(
                 lastStep.outputAmount ||
-                lastStep.expectedOutputAmountHumanReadable ||
-                '',
+                  lastStep.expectedOutputAmountHumanReadable ||
+                  ''
+              ),
             }}
           />
         </div>

package/src/components/SwapDetail/Token.tsx

@@ -5,6 +5,7 @@ import { Spacer } from '../Spacer';
 const TokenContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
+  width: '160px',
 
   '& .amount': {
     fontWeight: 'bold',

package/src/helper/index.ts

@@ -1,11 +1,12 @@
-export const containsText = (text: string, searchText: string) =>
-  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+export function containsText(text: string, searchText: string): boolean {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+}
 
-export const getConciseAddress = (
+export function getConciseAddress(
   address: string | null,
   maxChars = 8,
   ellipsisLength = 3
-): string | null => {
+): string | null {
   if (!address) return null;
   if (address.length < 2 * maxChars + ellipsisLength) return address;
   const start = Math.ceil((address.length - maxChars) / 2);
@@ -13,4 +14,18 @@ export const getConciseAddress = (
   return `${address.substr(start, maxChars)}${'.'.repeat(
     ellipsisLength
   )}${address.substr(end)}`;
-};
+}
+
+export function limitDecimalPlaces(
+  numberString: string,
+  maxDecimalPlaces = 4
+): string {
+  const number = parseFloat(numberString);
+  if (isNaN(number))
+    return numberString; // Return the original string if it's not a valid number
+  else {
+    const multiplier = Math.pow(10, maxDecimalPlaces);
+    const roundedNumber = Math.round(number * multiplier) / multiplier;
+    return roundedNumber.toString();
+  }
+}