@rango-dev/widget-embedded 0.29.1-next.21 → 0.29.1-next.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.21",
+  "version": "0.29.1-next.23",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.8",
     "@rango-dev/queue-manager-react": "^0.26.0",
     "@rango-dev/signer-solana": "^0.29.1-next.1",
-    "@rango-dev/ui": "^0.35.1-next.11",
+    "@rango-dev/ui": "^0.35.1-next.12",
     "@rango-dev/wallets-react": "^0.20.1-next.6",
     "@rango-dev/wallets-shared": "^0.34.1-next.6",
     "bignumber.js": "^9.1.1",
@@ -53,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Quote/Quote.tsx

@@ -155,16 +155,15 @@ export function Quote(props: QuoteProps) {
 
       return {
         swapper: {
-          displayName: getSwapperDisplayName(swap.swapperId, swappers),
+          displayName: getSwapperDisplayName(swap.swapperId, swappers) ?? '',
           image: swap.swapperLogo,
         },
         from: {
           token: { displayName: swap.from.symbol, image: swap.from.logo },
           chain: {
-            displayName: getBlockchainShortNameFor(
-              swap.from.blockchain,
-              blockchains
-            ),
+            displayName:
+              getBlockchainShortNameFor(swap.from.blockchain, blockchains) ??
+              '',
             image: swap.from.blockchainLogo,
           },
           price: {
@@ -194,10 +193,8 @@ export function Quote(props: QuoteProps) {
         to: {
           token: { displayName: swap.to.symbol, image: swap.to.logo },
           chain: {
-            displayName: getBlockchainShortNameFor(
-              swap.to.blockchain,
-              blockchains
-            ),
+            displayName:
+              getBlockchainShortNameFor(swap.to.blockchain, blockchains) || '',
             image: swap.to.blockchainLogo,
           },
           price: {

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -1,6 +1,6 @@
 import type { GetStep } from '../SwapDetailsAlerts';
 import type { Step, StepDetailsProps } from '@rango-dev/ui';
-import type { PendingSwapStep } from 'rango-types';
+import type { PendingSwapStep, SwapperType } from 'rango-types';
 
 import React from 'react';
 
@@ -46,7 +46,7 @@ export const getSteps = ({
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
-          realValue: amountToConvert,
+          realValue: amountToConvert ?? '',
         },
       },
       to: {
@@ -63,13 +63,13 @@ export const getSteps = ({
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
           realValue:
-            step.outputAmount || step.expectedOutputAmountHumanReadable,
+            step.outputAmount || step.expectedOutputAmountHumanReadable || '',
         },
       },
       swapper: {
-        displayName: getSwapperDisplayName(step.swapperId, swappers),
+        displayName: getSwapperDisplayName(step.swapperId, swappers) ?? '',
         image: step.swapperLogo ?? '',
-        type: step.swapperType,
+        type: step.swapperType as SwapperType,
       },
       internalSwaps: step.internalSwaps
         ? step.internalSwaps.map((internalSwap) => {
@@ -95,12 +95,10 @@ export const getSteps = ({
                 },
               },
               swapper: {
-                displayName: getSwapperDisplayName(
-                  internalSwap.swapperId,
-                  swappers
-                ),
+                displayName:
+                  getSwapperDisplayName(internalSwap.swapperId, swappers) ?? '',
                 image: internalSwap.swapperLogo ?? '',
-                type: internalSwap.swapperType,
+                type: internalSwap.swapperType as SwapperType,
               },
             };
           })

package/src/components/SwapDetails/SwapDetails.tsx

@@ -385,7 +385,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 ),
                 usdValue: outputUsdValue,
                 realUsdValue: realOutputUsdValue,
-                realValue: outputAmount,
+                realValue: outputAmount || '',
               },
               token: {
                 displayName: steps[numberOfSteps - 1].to.token.displayName,

package/src/containers/Inputs/Inputs.tsx

@@ -40,7 +40,6 @@ export function Inputs(props: PropTypes) {
   } = useQuoteStore();
   const { connectedWallets, getBalanceFor } = useWalletsStore();
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
-
   const fromTokenFormattedBalance =
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
@@ -69,6 +68,7 @@ export function Inputs(props: PropTypes) {
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
       : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+
   return (
     <Container>
       <FromContainer>

package/src/store/quote.ts

@@ -168,11 +168,12 @@ export const useQuoteStore = createSelectors(
 
           return {
             fromBlockchain: chain,
+            inputUsdValue: new BigNumber(0),
             ...(state.fromToken && {
               selectedQuote: null,
               fromToken: null,
               outputAmount: null,
-              outputUsdValue: null,
+              outputUsdValue: new BigNumber(0),
             }),
           };
         });
@@ -203,7 +204,7 @@ export const useQuoteStore = createSelectors(
               selectedQuote: null,
               toToken: null,
               outputAmount: null,
-              outputUsdValue: null,
+              outputUsdValue: new BigNumber(0),
             }),
           };
         });
@@ -268,8 +269,10 @@ export const useQuoteStore = createSelectors(
         set(() => ({
           fromToken: null,
           fromBlockchain: null,
+          outputUsdValue: new BigNumber(0),
+          inputUsdValue: new BigNumber(0),
+          inputAmount: '',
           outputAmount: null,
-          outputUsdValue: null,
           selectedQuote: null,
         })),
       resetToBlockchain: () =>
@@ -277,7 +280,7 @@ export const useQuoteStore = createSelectors(
           toToken: null,
           toBlockchain: null,
           outputAmount: null,
-          outputUsdValue: null,
+          outputUsdValue: new BigNumber(0),
           selectedQuote: null,
         })),
       setQuoteWalletConfirmed: (flag) =>