@rango-dev/widget-embedded 0.12.1-next.14 → 0.12.1-next.16

package/dist/pages/SelectSwapItemsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAIvC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAenD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA6HnD"}
+{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAS,MAAM,WAAW,CAAC;AAI9C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAgBnD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAmInD"}

package/dist/utils/routing.d.ts

@@ -2,7 +2,7 @@ import type { BestRouteEqualityParams, Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 import type { PriceImpactWarningLevel } from '@rango-dev/ui';
 import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type { Asset, BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import BigNumber from 'bignumber.js';
 export declare function searchParamsToToken(tokens: Token[], searchParams: string | null, chain: BlockchainMeta | null): Token | null;
 export declare function getBestRouteToTokenUsdPrice(bestRoute: BestRouteResponse | null): number | null | undefined;
@@ -17,4 +17,5 @@ export declare function getFormattedBestRoute(bestRoute: BestRouteResponse | nul
 export declare function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap;
 export declare const getBestRouteStatus: (loading: boolean, error: boolean) => "failed" | "success" | "loading";
 export declare function getPriceImpactLevel(priceImpact: number): PriceImpactWarningLevel;
+export declare function findCommonTokens<T extends Asset[], R extends Asset[]>(listA: T, listB: R): R;
 //# sourceMappingURL=routing.d.ts.map

package/dist/utils/routing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE1E,OAAO,SAAS,MAAM,cAAc,CAAC;AAcrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAyB1B;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CA6B7E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAQlE,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB"}
+{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AAEnB,OAAO,SAAS,MAAM,cAAc,CAAC;AAcrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAyB1B;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CA6B7E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAQlE,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.14",
+  "version": "0.12.1-next.16",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

package/src/Widget.tsx

@@ -11,9 +11,12 @@ import { WidgetEvents } from './components/WidgetEvents';
 import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
+import { useBestRouteStore } from './store/bestRoute';
+import { useMetaStore } from './store/meta';
 import { useNotificationStore } from './store/notification';
 import { useSettingsStore } from './store/settings';
 import { initConfig } from './utils/configs';
+import { tokensAreEqual } from './utils/wallets';
 import { WidgetContext, WidgetWallets } from './Wallets';
 
 const MainContainer = styled('div', {
@@ -52,6 +55,63 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
 
+  const {
+    setInputAmount,
+    setToToken,
+    setToBlockchain,
+    setFromBlockchain,
+    setFromToken,
+  } = useBestRouteStore();
+
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
+
+  const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
+    useSettingsStore();
+
+  useEffect(() => {
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.from?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.from?.token || null)
+      );
+
+      setFromBlockchain(chain || null);
+      setFromToken(token || null);
+    }
+  }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.to?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.to?.token || null)
+      );
+      setToBlockchain(chain || null);
+      setToToken(token || null);
+    }
+  }, [config?.to?.token, config?.to?.blockchain, loadingMetaStatus]);
+
+  useEffect(() => {
+    setAffiliateRef(config?.affiliate?.ref ?? null);
+    setAffiliatePercent(config?.affiliate?.percent ?? null);
+    setAffiliateWallets(config?.affiliate?.wallets ?? null);
+  }, [
+    config?.affiliate?.ref,
+    config?.affiliate?.percent,
+    config?.affiliate?.wallets,
+  ]);
+
   return (
     <I18nManager language={config?.language}>
       <MainContainer id="swap-container" className={activeTheme}>

package/src/hooks/useSwapInput.ts

@@ -98,7 +98,7 @@ export function useSwapInput(): UseSwapInput {
     setLoading(true);
     debouncedFetch();
     return cancelFetch;
-  }, [inputAmount]);
+  }, [inputAmount, shouldSkipRequest]);
 
   useEffect(() => {
     if (!shouldSkipRequest) {

package/src/pages/SelectSwapItemsPage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { Asset } from 'rango-sdk';
+import type { Asset, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import { Divider } from '@rango-dev/ui';
@@ -16,6 +16,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
+import { findCommonTokens } from '../utils/routing';
 import { tokensAreEqual } from '../utils/wallets';
 
 interface PropTypes {
@@ -29,19 +30,22 @@ export function SelectSwapItemsPage(props: PropTypes) {
   const { type, supportedBlockchains, supportedTokens, pinnedTokens } = props;
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const { tokens } = useMetaStore.use.meta();
-  const sourceTokens = useBestRouteStore.use.sourceTokens();
-  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const {
+    meta: { tokens },
+    setTokensWithBalance,
+  } = useMetaStore();
+  const {
+    sourceTokens,
+    destinationTokens,
+    fromBlockchain,
+    toBlockchain,
+    setFromToken,
+    setToToken,
+    setFromBlockchain,
+    setToBlockchain,
+  } = useBestRouteStore();
+  const { connectedWallets, loading: loadingWallet } = useWalletsStore();
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
-  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
-  const toBlockchain = useBestRouteStore.use.toBlockchain();
-  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const loadingWallet = useWalletsStore.use.loading();
-  const setTokensWithBalance = useMetaStore.use.setTokensWithBalance();
 
   const blockchains = supportedBlockchains
     ? useMetaStore.use
@@ -50,38 +54,41 @@ export function SelectSwapItemsPage(props: PropTypes) {
           supportedBlockchains.includes(chain.name)
         )
     : useMetaStore.use.meta().blockchains;
+
   const allTokens = supportedTokens
-    ? tokens.filter((token) =>
-        tokens.some((supportedToken) => tokensAreEqual(supportedToken, token))
-      )
-    : tokens;
-  const supportedSourceTokens = supportedTokens
-    ? sourceTokens.filter((token) =>
-        supportedTokens.some((supportedToken) =>
-          tokensAreEqual(supportedToken, token)
+    ? findCommonTokens(supportedTokens, tokens)
+    : tokens.filter((token) =>
+        new Set(blockchains.map((blockchain) => blockchain.name)).has(
+          token.blockchain
         )
-      )
+      );
+
+  const supportedSourceTokens = supportedTokens
+    ? findCommonTokens(supportedTokens, sourceTokens)
     : sourceTokens;
 
   const supportedDestinationTokens = supportedTokens
-    ? destinationTokens.filter((token) =>
-        supportedTokens.some((supportedToken) =>
-          tokensAreEqual(supportedToken, token)
-        )
-      )
+    ? findCommonTokens(supportedTokens, destinationTokens)
     : destinationTokens;
 
   const tokensByType =
     type === 'from' ? supportedSourceTokens : supportedDestinationTokens;
 
-  const tokenList = (tokensByType.length ? tokensByType : allTokens).map(
-    (token) => ({
+  let tokenList: Token[] = [];
+
+  const noBlockchainSelected =
+    (type === 'from' && !fromBlockchain) || (type === 'to' && !toBlockchain);
+
+  if (noBlockchainSelected) {
+    tokenList = allTokens;
+  } else if (tokensByType.length) {
+    tokenList = tokensByType.map((token) => ({
       ...token,
       pin: pinnedTokens?.some((pinnedToken) =>
         tokensAreEqual(pinnedToken, token)
       ),
-    })
-  );
+    }));
+  }
 
   useEffect(() => {
     if (connectedWallets.length && !loadingWallet) {

package/src/utils/routing.ts

@@ -6,7 +6,12 @@ import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
 } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type {
+  Asset,
+  BestRouteResponse,
+  BlockchainMeta,
+  Token,
+} from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 
@@ -242,3 +247,17 @@ export function getPriceImpactLevel(
 
   return warningLevel;
 }
+
+export function findCommonTokens<T extends Asset[], R extends Asset[]>(
+  listA: T,
+  listB: R
+) {
+  const tokenToString = (token: Asset): string =>
+    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
+
+  const set = new Set();
+
+  listA.forEach((token) => set.add(tokenToString(token)));
+
+  return listB.filter((token) => set.has(tokenToString(token))) as R;
+}