@rango-dev/widget-embedded 0.12.1-next.17 → 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.17",
+  "version": "0.12.1-next.19",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.1",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.5",
     "@rango-dev/queue-manager-react": "^0.15.1-next.3",
-    "@rango-dev/ui": "^0.15.1-next.10",
+    "@rango-dev/ui": "^0.15.1-next.11",
     "@rango-dev/wallets-react": "^0.1.1-next.5",
     "@rango-dev/wallets-shared": "^0.15.1-next.3",
     "bignumber.js": "^9.1.1",

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/Layout/Layout.styles.ts

@@ -25,7 +25,7 @@ export const Content = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: '$20 $0 $10 $20',
+  padding: '$20 $20 $10 $20',
   backgroundColor: '$background',
   position: 'relative',
   overflowY: 'auto',

package/src/components/Layout/Layout.tsx

@@ -1,14 +1,8 @@
 import type { PropTypes, Ref } from './Layout.types';
 import type { PropsWithChildren } from 'react';
 
-import {
-  BottomLogo,
-  Divider,
-  Header,
-  theme,
-  usePaddingRight,
-} from '@rango-dev/ui';
-import React, { useRef } from 'react';
+import { BottomLogo, Divider, Header } from '@rango-dev/ui';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
@@ -18,8 +12,6 @@ import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { Container, Content, Footer } from './Layout.styles';
 
-const DEFAULT_CONTENT_PADDING = 20;
-
 function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   const {
     children,
@@ -35,13 +27,6 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     useUiStore.use.connectWalletsButtonDisabled();
   const navigate = useNavigate();
 
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  usePaddingRight({
-    elementRef: contentRef,
-    paddingRight: noPadding ? '0' : theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
-
   const onConnectWallet = () => {
     if (!connectWalletsButtonDisabled) {
       navigate('/' + navigationRoutes.wallets);
@@ -65,9 +50,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding} ref={contentRef}>
-        {children}
-      </Content>
+      <Content noPadding={noPadding}>{children}</Content>
       {(hasLogo || footer) && (
         <Footer>
           <div className="footer__content">{footer}</div>

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -42,7 +42,7 @@ export const HeaderDetails = styled('div', {
 });
 
 export const StepsList = styled('div', {
-  padding: '$0 $0 $20 $20',
+  padding: '$0 $20 $20 $20',
   width: '100%',
   overflow: 'auto',
 });

package/src/components/SwapDetails/SwapDetails.tsx

@@ -16,10 +16,8 @@ import {
   RouteCost,
   RouteSummary,
   StepDetails,
-  theme,
   Typography,
   useCopyToClipboard,
-  usePaddingRight,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -65,15 +63,14 @@ import {
 } from './SwapDetails.helpers';
 import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 
-const DEFAULT_CONTENT_PADDING = 20;
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const retry = useBestRouteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const listRef = useRef<HTMLDivElement | null>(null);
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+  const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
@@ -82,11 +79,6 @@ export function SwapDetails(props: SwapDetailsProps) {
     meta: { tokens },
   } = useMetaStore();
 
-  usePaddingRight({
-    elementRef: listRef,
-    paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
-
   const onCancel = () => {
     onCancelProps();
     setModalState(null);

package/src/components/SwitchFromAndTo.tsx

@@ -1,38 +1,8 @@
 import { ReverseIcon, styled } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
-import { useInRouterContext, useSearchParams } from 'react-router-dom';
+import React from 'react';
 
-import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 
-function SwitchFromAndTo({ count }: { count: number }) {
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-
-  useEffect(() => {
-    if (!firstRender.current) {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      setSearchParams({
-        ...(toChainString && { [SearchParams.FROM_CHAIN]: toChainString }),
-        ...(toTokenString && { [SearchParams.FROM_TOKEN]: toTokenString }),
-        ...(fromChainString && { [SearchParams.TO_CHAIN]: fromChainString }),
-        ...(fromTokenString && { [SearchParams.TO_TOKEN]: fromTokenString }),
-        ...(outputAmount && {
-          [SearchParams.FROM_AMOUNT]: outputAmount.toString(),
-        }),
-      });
-    } else {
-      firstRender.current = false;
-    }
-  }, [count]);
-
-  return null;
-}
-
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
   bottom: '-12px',
@@ -58,18 +28,14 @@ const StyledButton = styled('div', {
 
 export function SwitchFromAndToButton() {
   const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
-  const isRouterInContext = useInRouterContext();
-  const [count, setCount] = useState(0);
 
   return (
     <SwitchButtonContainer>
       <StyledButton
         onClick={() => {
           switchFromAndTo();
-          setCount((prev) => prev + 1);
         }}>
         <ReverseIcon size={12} />
-        {isRouterInContext && <SwitchFromAndTo count={count} />}
       </StyledButton>
     </SwitchButtonContainer>
   );

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