@rango-dev/widget-embedded 0.12.1-next.18 → 0.12.1-next.19

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,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"}
+{"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,qBAuInD"}

package/package.json

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

package/src/components/BlockchainList/BlockchainList.tsx

@@ -41,7 +41,7 @@ export function BlockchainList(props: PropTypes) {
       );
     }
     return (
-      <List>
+      <List key={`${blockchainCategory}-${searchedFor}`}>
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}

package/src/components/TokenList/TokenList.tsx

@@ -83,7 +83,7 @@ const renderDesc = (props: RenderDescProps) => {
 };
 
 export function TokenList(props: PropTypes) {
-  const { list, searchedFor = '', onChange } = props;
+  const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
   const loadingStatus = useMetaStore.use.loadingStatus();
@@ -253,6 +253,7 @@ export function TokenList(props: PropTypes) {
         loadNextPage={loadNextPage}
         innerElementType={innerElementType}
         size={60}
+        key={`${selectedBlockchain}-${searchedFor}`}
       />
     );
   };

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

@@ -12,6 +12,7 @@ export interface PropTypes {
   list: TokenWithBalance[];
   searchedFor?: string;
   onChange: (token: TokenWithBalance) => void;
+  selectedBlockchain?: string;
 }
 
 export interface LoadingTokenListProps {

package/src/pages/SelectSwapItemsPage.tsx

@@ -28,6 +28,7 @@ interface PropTypes {
 
 export function SelectSwapItemsPage(props: PropTypes) {
   const { type, supportedBlockchains, supportedTokens, pinnedTokens } = props;
+  const [selectedBlockchain, setSelectedBlockchain] = useState('');
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const {
@@ -120,6 +121,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
             } else {
               setToBlockchain(blockchain, true);
             }
+            setSelectedBlockchain(blockchain.name);
           }
         }}
       />
@@ -137,6 +139,8 @@ export function SelectSwapItemsPage(props: PropTypes) {
       <Divider size={16} />
       <TokenList
         list={filterTokens(tokenList, searchedFor)}
+        selectedBlockchain={selectedBlockchain}
+        searchedFor={searchedFor}
         onChange={(token) => {
           const blockchain = blockchains.find(
             (chain) => token.blockchain === chain.name