@rango-dev/widget-embedded 0.47.0 → 0.47.1-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.47.0",
+  "version": "0.47.1-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.11.0",
-    "@rango-dev/provider-all": "^0.50.0",
+    "@rango-dev/provider-all": "^0.50.1-next.0",
     "@rango-dev/queue-manager-core": "^0.32.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.49.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.49.1-next.0",
     "@rango-dev/queue-manager-react": "^0.32.0",
     "@rango-dev/signer-solana": "^0.43.0",
-    "@rango-dev/ui": "^0.50.0",
-    "@rango-dev/wallets-core": "^0.47.0",
-    "@rango-dev/wallets-react": "^0.34.0",
-    "@rango-dev/wallets-shared": "^0.48.0",
+    "@rango-dev/ui": "^0.50.1-next.0",
+    "@rango-dev/wallets-core": "^0.47.1-next.0",
+    "@rango-dev/wallets-react": "^0.34.1-next.0",
+    "@rango-dev/wallets-shared": "^0.48.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -43,7 +43,9 @@ export function BlockchainsSection(props: PropTypes) {
   /**
    * When only one item is left on list, we will not show the `More` button and will show the item itself instead.
    */
-  const onlyOneItemInList = blockchainsList.more.length === 1;
+  const firstItemOfList = blockchainsList.more[0];
+  const onlyOneItemInList =
+    blockchainsList.more.length === 1 && firstItemOfList;
   const showMoreButton = !onlyOneItemInList && hasMoreItemsInList;
 
   return (
@@ -103,13 +105,12 @@ export function BlockchainsSection(props: PropTypes) {
             {onlyOneItemInList ? (
               <BlockchainsChip
                 className="widget-blockchains-section-only-item-btn"
-                key={blockchainsList.more[0].name}
+                key={firstItemOfList.name}
                 selected={
-                  !!blockchain &&
-                  blockchain.name === blockchainsList.more[0].name
+                  !!blockchain && blockchain.name === firstItemOfList.name
                 }
-                onClick={() => onChange(blockchainsList.more[0])}>
-                <Image src={blockchainsList.more[0].logo} size={30} />
+                onClick={() => onChange(firstItemOfList)}>
+                <Image src={firstItemOfList.logo} size={30} />
               </BlockchainsChip>
             ) : null}
 

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -79,7 +79,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
       blockchain.name ===
-      selectedQuote?.swaps[selectedQuote?.swaps.length - 1].to.blockchain
+      selectedQuote?.swaps[selectedQuote?.swaps.length - 1]?.to.blockchain
   );
   const isWalletRequiredFor = (blockchain: string) =>
     requiredChains.includes(blockchain);

package/src/components/HistoryGroupedList/HistoryGroupedList.helpers.ts

@@ -9,8 +9,10 @@ export function calculateGroupsSoFar(totalGroups: number[], count: number) {
   let index = 0;
   do {
     const group = totalGroups[index];
-    groups.push(Math.min(group, count));
-    count -= group;
+    if (group) {
+      groups.push(Math.min(group, count));
+      count -= group;
+    }
     index++;
   } while (count > 0 && index <= totalGroups.length);
   return groups;

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -109,6 +109,9 @@ export function HistoryGroupedList(props: PropTypes) {
         const currentStep = getCurrentStep(swap);
         const firstStep = swap.steps[0];
         const lastStep = swap.steps[swap.steps.length - 1];
+        if (!firstStep || !lastStep) {
+          return null;
+        }
         return (
           <SwapItemContainer key={swap.requestId}>
             <SwapListItem

package/src/components/Quote/Quote.tsx

@@ -329,6 +329,13 @@ export function Quote(props: QuoteProps) {
   const timeWarning =
     totalDurationSeconds / SECONDS_IN_MINUTE >= ROUTE_TIME_MAX;
 
+  const lastStep = steps[numberOfSteps - 1];
+  const firstStep = steps[0];
+
+  if (!firstStep || !lastStep) {
+    return null;
+  }
+
   return fullExpandedMode ? (
     <FullExpandedQuote
       selected={selected}
@@ -427,7 +434,7 @@ export function Quote(props: QuoteProps) {
             </FrameIcon>
             <ContainerInfoOutput>
               <BasicInfoOutput size="small" variant="body">
-                {`${roundedInput} ${steps[0].from.token.displayName} = `}
+                {`${roundedInput} ${firstStep.from.token.displayName} = `}
               </BasicInfoOutput>
               <NumericTooltip
                 content={output.value}
@@ -435,9 +442,7 @@ export function Quote(props: QuoteProps) {
                 open={!output.value ? false : undefined}>
                 <BasicInfoOutput size="small" variant="body">
                   &nbsp;
-                  {`${roundedOutput} ${
-                    steps[steps.length - 1].to.token.displayName
-                  }`}
+                  {`${roundedOutput} ${lastStep.to.token.displayName}`}
                 </BasicInfoOutput>
               </NumericTooltip>
             </ContainerInfoOutput>
@@ -462,10 +467,10 @@ export function Quote(props: QuoteProps) {
               realUsdValue: output.usdValue,
             }}
             token={{
-              displayName: steps[numberOfSteps - 1].to.token.displayName,
-              image: steps[numberOfSteps - 1].to.token.image,
+              displayName: lastStep.to.token.displayName,
+              image: lastStep.to.token.image,
             }}
-            chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+            chain={{ image: lastStep.to.chain.image }}
             percentageChange={percentageChange}
             warningLevel={priceImpactWarningLevel}
           />
@@ -473,8 +478,8 @@ export function Quote(props: QuoteProps) {
         {type === 'swap-preview' && (
           <>
             <QuoteSummary
-              from={steps[0].from}
-              to={steps[numberOfSteps - 1].to}
+              from={firstStep.from}
+              to={lastStep.to}
               percentageChange={percentageChange}
               warningLevel={priceImpactWarningLevel}
             />

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

@@ -30,8 +30,8 @@ export const getSteps = ({
     const amountToConvert =
       index === 0
         ? swap.inputAmount
-        : swap.steps[index - 1].outputAmount ||
-          swap.steps[index - 1].expectedOutputAmountHumanReadable;
+        : swap.steps[index - 1]?.outputAmount ||
+          swap.steps[index - 1]?.expectedOutputAmountHumanReadable;
     return {
       from: {
         token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },

package/src/components/SwapDetails/SwapDetails.tsx

@@ -207,7 +207,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
   const outputAmount =
-    lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable;
+    lastStep?.outputAmount || lastStep?.expectedOutputAmountHumanReadable;
 
   const totalFee = swap.steps.reduce(
     (totalFee, steps) => totalFee + parseFloat(steps.feeInUsd || ''),
@@ -219,13 +219,13 @@ export function SwapDetails(props: SwapDetailsProps) {
   )?.diagnosisUrl;
 
   const outputUsdValue = numberToString(
-    parseFloat(outputAmount || '0') * (lastStep.toUsdPrice || 0),
+    parseFloat(outputAmount || '0') * (lastStep?.toUsdPrice || 0),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
 
   const inputUsdValue = numberToString(
-    parseFloat(swap.inputAmount) * (firstStep.fromUsdPrice || 0),
+    parseFloat(swap.inputAmount) * (firstStep?.fromUsdPrice || 0),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
@@ -237,7 +237,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     : '';
 
   const realInputUsdValue = new BigNumber(swap.inputAmount)
-    .multipliedBy(firstStep.fromUsdPrice || 0)
+    .multipliedBy(firstStep?.fromUsdPrice || 0)
     .toString();
 
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
@@ -255,12 +255,12 @@ export function SwapDetails(props: SwapDetailsProps) {
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
-          token: steps[numberOfSteps - 1].to.token.displayName,
+          token: steps[numberOfSteps - 1]?.to.token.displayName,
           conciseAddress: getConciseAddress(
-            swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
+            swap.wallets[steps[numberOfSteps - 1]?.to.chain.displayName || '']
               ?.address || ''
           ),
-          chain: steps[numberOfSteps - 1].to.chain.displayName,
+          chain: steps[numberOfSteps - 1]?.to.chain.displayName,
         },
       })
     ) : (
@@ -442,12 +442,12 @@ export function SwapDetails(props: SwapDetailsProps) {
                 realValue: swap.inputAmount,
               },
               token: {
-                displayName: steps[0].from.token.displayName,
-                image: steps[0].from.token.image,
+                displayName: steps[0]?.from.token.displayName || '',
+                image: steps[0]?.from.token.image,
               },
               chain: {
-                image: steps[0].from.chain.image,
-                displayName: steps[0].from.chain.displayName,
+                image: steps[0]?.from.chain.image,
+                displayName: steps[0]?.from.chain.displayName || '',
               },
             }}
             to={{
@@ -462,12 +462,14 @@ export function SwapDetails(props: SwapDetailsProps) {
                 realValue: outputAmount || '',
               },
               token: {
-                displayName: steps[numberOfSteps - 1].to.token.displayName,
-                image: steps[numberOfSteps - 1].to.token.image,
+                displayName:
+                  steps[numberOfSteps - 1]?.to.token.displayName || '',
+                image: steps[numberOfSteps - 1]?.to.token.image,
               },
               chain: {
-                image: steps[numberOfSteps - 1].to.chain.image,
-                displayName: steps[numberOfSteps - 1].to.chain.displayName,
+                image: steps[numberOfSteps - 1]?.to.chain.image,
+                displayName:
+                  steps[numberOfSteps - 1]?.to.chain.displayName || '',
               },
             }}
             percentageChange={numberToString(
@@ -487,7 +489,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         <StepsList>
           {steps.map((step, index) => {
             const key = index;
-            const state = getStepState(swap.steps[index]);
+            const state = swap.steps[index] && getStepState(swap.steps[index]);
             const isFocused =
               state === 'error' ||
               state === 'in-progress' ||
@@ -541,10 +543,10 @@ export function SwapDetails(props: SwapDetailsProps) {
           PERCENTAGE_CHANGE_MAX_DECIMALS
         )}
         token={{
-          displayName: steps[numberOfSteps - 1].to.token.displayName,
-          image: steps[numberOfSteps - 1].to.token.image,
+          displayName: steps[numberOfSteps - 1]?.to.token.displayName || '',
+          image: steps[numberOfSteps - 1]?.to.token.image,
         }}
-        chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+        chain={{ image: steps[numberOfSteps - 1]?.to.chain.image }}
         description={completeModalDesc}
       />
     </Layout>

package/src/components/SwapMetrics/SwapMetrics.tsx

@@ -52,9 +52,9 @@ export function SwapMetrics(props: PropTypes) {
         : null,
   };
 
-  const sourceToken = quote?.swaps[0].from || initialFromToken;
+  const sourceToken = quote?.swaps[0]?.from || initialFromToken;
   const destinationToken =
-    quote?.swaps[quote?.swaps.length - 1].to || initialToToken;
+    quote?.swaps[quote?.swaps.length - 1]?.to || initialToToken;
 
   const fromToken = isDefaultRate ? sourceToken : destinationToken;
   const toToken = isDefaultRate ? destinationToken : sourceToken;

package/src/components/TokenList/TokenList.tsx

@@ -219,9 +219,8 @@ export function TokenList(props: PropTypes) {
               />
             );
           }
-          const address = token.address || '';
           const blockchain = blockchains.find(
-            (blockchain) => blockchain.name === token.blockchain
+            (blockchain) => blockchain.name === token?.blockchain
           );
 
           /**
@@ -229,10 +228,12 @@ export function TokenList(props: PropTypes) {
            * Be cautious, as Virtuoso warns us if we return empty elements.
            * If you need to exclude any items, do so before passing them to the virtual list.
            */
-          if (!blockchain) {
+          if (!blockchain || !token) {
             return null;
           }
 
+          const address = token.address;
+
           const colors = createTintsAndShades(blockchain.color, 'main');
           const customCssForTag = {
             $$color: colors.main150,
@@ -260,11 +261,11 @@ export function TokenList(props: PropTypes) {
             <ListItemContainer>
               <StyledListItemButton
                 tab-index={index}
-                key={`${token.symbol}${token.address}`}
-                id={`${token.symbol}${token.address}`}
+                key={`${token.symbol}${address}`}
+                id={`${token.symbol}${address}`}
                 className="widget-token-list-item-btn"
                 hasDivider
-                customToken={token.customToken}
+                customToken={token?.customToken}
                 onClick={handleClick}
                 start={
                   <ImageSection>
@@ -277,6 +278,7 @@ export function TokenList(props: PropTypes) {
                       size={30}
                     />
                     {props.type !== 'custom-token' &&
+                      token &&
                       isTokenPinned(token, props.type) && (
                         <Pin>
                           <PinIcon size={12} color="gray" />
@@ -285,7 +287,7 @@ export function TokenList(props: PropTypes) {
                   </ImageSection>
                 }
                 title={
-                  blockchain?.type === 'COSMOS' ||
+                  blockchain.type === 'COSMOS' ||
                   !!token.name ||
                   (!token.name && !address) ? (
                     <Title>
@@ -312,7 +314,7 @@ export function TokenList(props: PropTypes) {
                 }
                 description={
                   typeof token !== 'string' &&
-                  !!blockchain?.info &&
+                  !!blockchain.info &&
                   !!address &&
                   blockchain.type !== 'COSMOS'
                     ? renderDesc({

package/src/components/TokenList/TokenList.types.ts

@@ -32,17 +32,20 @@ type TagCSS = {
   [x: string]:
     | string
     | {
-        $$color: string;
-      };
-  $$color: string;
+        $$color?: string;
+      }
+    | undefined;
+  $$color?: string;
   backgroundColor: string;
 };
+
 type TitleCSS = {
   [x: string]:
     | string
     | {
-        $$color: string;
-      };
-  $$color: string;
+        $$color?: string;
+      }
+    | undefined;
+  $$color?: string;
   color: string;
 };

package/src/components/WalletStatefulConnect/DerivationPath.helpers.ts

@@ -13,7 +13,7 @@ export function getDerivationPaths(
   selectedNamespace?: Namespace
 ): DerivationPath[] {
   const selectedNamespaceDerivationPaths = selectedNamespace
-    ? namespaces[selectedNamespace].derivationPaths
+    ? namespaces[selectedNamespace]?.derivationPaths
     : null;
 
   const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -44,8 +44,11 @@ export function throwErrorIfResponseIsNotValid(response: QuoteResponse) {
 export function getQuoteError(swaps: SwapResult[]): QuoteErrorResponse | null {
   const limitError = hasLimitError(swaps);
   if (limitError) {
-    const { swap, recommendation, fromAmountRangeError } =
+    const { swap, fromAmountRangeError, recommendation } =
       getLimitErrorMessage(swaps);
+    if (!swap) {
+      return null;
+    }
     return {
       message: 'bridge limit error',
       options: {

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -54,7 +54,7 @@ export function prepare(
 
         preferredBlockchainsWithoutMainList =
           preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
-            return blockchain.name !== preferredBlockchain;
+            return blockchain?.name !== preferredBlockchain;
           });
       }
     }

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -122,7 +122,7 @@ export function useStatefulConnect(): UseStatefulConnect {
       }
 
       // 3. Target wallet contains only one namespace
-      if (needsNamespace?.data.length === 1) {
+      if (needsNamespace?.data.length === 1 && needsNamespace.data[0]) {
         if (needsDerivationPath) {
           const namespace = needsNamespace.data[0];
 

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.helpers.ts

@@ -3,9 +3,11 @@ import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 export function convertTokenSearchParamToAsset(
   searchParam: string,
   chain: BlockchainMeta
-): Asset {
+): Asset | null {
   const symbolAndAddress = searchParam.split('--');
-
+  if (!symbolAndAddress[0]) {
+    return null;
+  }
   return {
     blockchain: chain.name,
     address: symbolAndAddress?.[1] || null,

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -131,25 +131,22 @@ export function useSyncUrlAndStore() {
         (blockchain) => blockchain.name === searchParams.fromBlockchain
       );
 
-      const fromToken =
-        searchParams.fromToken && fromBlockchain
-          ? findToken(
-              convertTokenSearchParamToAsset(
-                searchParams.fromToken,
-                fromBlockchain
-              )
-            )
-          : undefined;
+      const convertFromToken =
+        searchParams.fromToken &&
+        fromBlockchain &&
+        convertTokenSearchParamToAsset(searchParams.fromToken, fromBlockchain);
+      const fromToken = convertFromToken
+        ? findToken(convertFromToken)
+        : undefined;
       const toBlockchain = blockchains.find(
         (blockchain) => blockchain.name === searchParams.toBlockchain
       );
+      const convertToToken =
+        searchParams.toToken &&
+        toBlockchain &&
+        convertTokenSearchParamToAsset(searchParams.toToken, toBlockchain);
 
-      const toToken =
-        searchParams.toToken && toBlockchain
-          ? findToken(
-              convertTokenSearchParamToAsset(searchParams.toToken, toBlockchain)
-            )
-          : undefined;
+      const toToken = convertToToken ? findToken(convertToToken) : undefined;
 
       if (!!fromBlockchain) {
         setFromBlockchain(fromBlockchain);

package/src/pages/SelectSwapItemPage/SelectSwapItemPage.helpers.ts

@@ -15,7 +15,7 @@ export function shouldSearchForCustomTokens(
   if (
     blockchain &&
     metaSearchResultTokens.length === 1 &&
-    metaSearchResultTokens[0].address === query
+    metaSearchResultTokens[0]?.address === query
   ) {
     return false;
   }

package/src/store/notification.ts

@@ -30,7 +30,9 @@ export const useNotificationStore = createSelectors(
         setNotification: (event, route) => {
           const fromStep = route.steps[0];
           const toStep = route.steps[route.steps.length - 1];
-
+          if (!fromStep || !toStep) {
+            return;
+          }
           const notification: Notification = {
             event,
             creationTime: Date.now(),

package/src/store/slices/data.test.ts

@@ -76,7 +76,7 @@ beforeEach(() => {
     if (!initData._tokensMapByBlockchainName[token.blockchain]) {
       initData._tokensMapByBlockchainName[token.blockchain] = [];
     }
-    initData._tokensMapByBlockchainName[token.blockchain].push(tokenHash);
+    initData._tokensMapByBlockchainName[token.blockchain]?.push(tokenHash);
   });
 
   const appStore = createAppStore(DEFAULT_CONFIG);
@@ -104,7 +104,7 @@ describe('check sorting tokens is working correctly in app store', () => {
       type: 'source',
     });
 
-    const firstResult = tokens[0].symbol;
+    const firstResult = tokens[0]?.symbol;
     expect(firstResult).toBe(rangoToken.symbol);
   });
 
@@ -125,7 +125,7 @@ describe('check sorting tokens is working correctly in app store', () => {
       },
     });
 
-    const firstResult = tokens[0].symbol;
+    const firstResult = tokens[0]?.symbol;
     expect(firstResult).toBe(rangoToken.symbol);
   });
 
@@ -146,7 +146,7 @@ describe('check sorting tokens is working correctly in app store', () => {
       type: 'source',
     });
 
-    const firstResult = tokens[0].symbol;
+    const firstResult = tokens[0]?.symbol;
     expect(firstResult).toBe(rangoToken.symbol);
   });
 
@@ -191,7 +191,7 @@ describe('check sorting tokens is working correctly in app store', () => {
       type: 'source',
     });
 
-    const firstResult = tokens[0].symbol;
+    const firstResult = tokens[0]?.symbol;
     expect(firstResult).toBe(rangoToken.symbol);
   });
 
@@ -225,8 +225,8 @@ describe('check sorting tokens is working correctly in app store', () => {
       },
     });
 
-    const firstResult = tokens[0].symbol;
-    const secondResult = tokens[1].symbol;
+    const firstResult = tokens[0]?.symbol;
+    const secondResult = tokens[1]?.symbol;
     expect(firstResult).toBe(rangoToken.symbol);
     expect(secondResult).toBe(djangoToken.symbol);
   });
@@ -261,8 +261,8 @@ describe('check sorting tokens is working correctly in app store', () => {
       },
     });
 
-    const firstResult = tokens[0].symbol;
-    const secondResult = tokens[1].symbol;
+    const firstResult = tokens[0]?.symbol;
+    const secondResult = tokens[1]?.symbol;
 
     const popularTokensCount = tokens.reduce((previousValue, current) => {
       if (current.isPopular) {

package/src/store/slices/data.ts

@@ -378,7 +378,7 @@ export const createDataSlice: StateCreator<
           tokensMapByBlockchainName[token.blockchain] = [];
         }
         tokensMapByTokenHash.set(tokenHash, token);
-        tokensMapByBlockchainName[token.blockchain].push(tokenHash);
+        tokensMapByBlockchainName[token.blockchain]?.push(tokenHash);
       });
 
       set({