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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.17",
+  "version": "0.12.1-next.18",
   "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/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>
   );