@rango-dev/widget-embedded 0.25.1-next.0 → 0.25.1-next.10

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBAuU9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAiD5E,wBAAgB,eAAe,sBA2T9B"}

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

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAyMnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBA0MnB"}

package/dist/store/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/store/quote.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/store/quote.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.25.1-next.0",
+  "version": "0.25.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,13 +25,13 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.2.0",
-    "@rango-dev/provider-all": "^0.30.0",
+    "@rango-dev/provider-all": "^0.30.1-next.4",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.30.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.30.1-next.2",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.31.0",
-    "@rango-dev/wallets-react": "^0.16.0",
-    "@rango-dev/wallets-shared": "^0.30.0",
+    "@rango-dev/ui": "^0.31.1-next.3",
+    "@rango-dev/wallets-react": "^0.16.1-next.1",
+    "@rango-dev/wallets-shared": "^0.30.1-next.1",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -104,7 +104,7 @@ export const CustomDestination = styled('div', {
     backgroundColor: '$neutral100',
   },
   '& .collapsible_root': {
-    backgroundColor: '$neutral200',
+    backgroundColor: '$neutral100',
   },
 });
 
@@ -135,7 +135,8 @@ export const CustomDestinationButton = styled('div', {
     $$color: '$colors$neutral300',
   },
   backgroundColor: '$$color',
-
+  borderBottomRightRadius: '0',
+  borderBottomLeftRadius: '0',
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {

package/src/components/CustomCollapsible/CustomCollapsible.styles.ts

@@ -23,6 +23,7 @@ const slideUp = keyframes({
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
   borderRadius: '$sm',
+  overflow: 'hidden',
   variants: {
     selected: {
       true: {

package/src/components/HeaderButtons/WalletButton.tsx

@@ -5,6 +5,7 @@ import { Image, Tooltip, WalletIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { useWalletList } from '../../hooks/useWalletList';
+import { useAppStore } from '../../store/AppStore';
 
 import {
   ConnectedIcon,
@@ -14,7 +15,9 @@ import {
 } from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
-  const { list } = useWalletList({});
+  const { config } = useAppStore();
+
+  const { list } = useWalletList({ config });
   const connectedWallets = list.filter(
     (wallet) => wallet.state === 'connected'
   );

package/src/components/Quote/Quote.tsx

@@ -411,15 +411,9 @@ export function Quote(props: QuoteProps) {
             </ContainerInfoOutput>
             <Tooltip
               content={formatTooltipNumbers(output.usdValue)}
-              container={container}
-              styles={{
-                root: { display: 'flex' },
-              }}>
-              <Typography
-                color="$neutral600"
-                ml={2}
-                size="xsmall"
-                variant="body">
+              container={container}>
+              <Divider size={2} direction="horizontal" />
+              <Typography color="$neutral600" size="xsmall" variant="body">
                 {`($${roundedOutputUsdValue})`}
               </Typography>
             </Tooltip>

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -17,6 +17,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
   const {
     warning,
     error,
+    couldChangeSettings,
     showWarningModal,
     confirmationDisabled,
     refetchQuote,
@@ -44,6 +45,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
       ? error
       : null
   );
+  if (alertInfo && !couldChangeSettings) {
+    alertInfo.action = null;
+  }
 
   const showAlerts = !!alertInfo;
 

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -5,6 +5,7 @@ export interface PropTypes {
   warning: QuoteWarning | null;
   showWarningModal: boolean;
   confirmationDisabled: boolean;
+  couldChangeSettings: boolean;
   refetchQuote: () => void;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;

package/src/components/RefreshModal/RefreshModal.tsx

@@ -19,9 +19,9 @@ export function RefreshModal(props: PropTypes) {
       onClose={onClose}
       container={getContainer()}>
       <MessageBox
-        title={i18n.t('Something wrong')}
+        title={i18n.t('Something went wrong')}
         type="error"
-        description={i18n.t('Something Wrong. Please refresh the app')}>
+        description={i18n.t('Something went wrong. Please refresh the app.')}>
         <Divider size={30} />
         <RefreshButton
           variant="outlined"

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

@@ -92,5 +92,5 @@ export const ErrorMessages = styled('div', {
   gap: '$5',
 });
 export const MessageText = styled(Typography, {
-  wordBreak: 'break-all',
+  wordBreak: 'break-word',
 });

package/src/components/SwapDetails/SwapDetails.tsx

@@ -253,13 +253,15 @@ export function SwapDetails(props: SwapDetailsProps) {
               })}`
             : ''}
         </Typography>
-        <MessageText
-          align="center"
-          variant="body"
-          size="medium"
-          color="neutral700">
-          {stepDetailMessage}
-        </MessageText>
+        {stepDetailMessage && (
+          <MessageText
+            align="center"
+            variant="body"
+            size="medium"
+            color="neutral700">
+            <b>Reason:</b> {stepDetailMessage}
+          </MessageText>
+        )}
       </ErrorMessages>
     );
 

package/src/components/SwitchFromAndTo/SwitchFromAndTo.styles.ts

@@ -0,0 +1,48 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const ROTATE_ANIMATION_DURATION = 450;
+
+const rotateAnimation = keyframes({
+  '0%': {
+    transform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
+  },
+  '33%': {
+    transform: 'rotateX(0deg) rotateZ(78deg) rotateY(66deg)',
+  },
+  '66%': {
+    transform: 'rotateX(0deg) rotateZ(163deg) rotateY(66deg)',
+  },
+  '100%': {
+    transform: 'rotateX(0deg) rotateZ(180deg) rotateY(0deg)',
+  },
+});
+
+export const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
+  cursor: 'pointer',
+});
+
+export const StyledButton = styled('div', {
+  borderRadius: '$md',
+  border: '3px solid $background',
+  background: '$neutral100',
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '$foreground',
+  '&.rotate': {
+    '& svg': {
+      animation: `${rotateAnimation} ${ROTATE_ANIMATION_DURATION}ms ease-in-out forwards`,
+    },
+  },
+  '&:hover': {
+    color: '$secondary500',
+    transform: 'translateY(1px) scale(1.04)',
+    boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.05)',
+  },
+});

package/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx

@@ -0,0 +1,32 @@
+import { ReverseIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  ROTATE_ANIMATION_DURATION,
+  StyledButton,
+  SwitchButtonContainer,
+} from './SwitchFromAndTo.styles';
+
+export function SwitchFromAndToButton() {
+  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
+
+  return (
+    <SwitchButtonContainer>
+      <StyledButton
+        onClick={(event) => {
+          const button = event.currentTarget;
+
+          button.classList.add('rotate');
+
+          setTimeout(() => {
+            button.classList.remove('rotate');
+          }, ROTATE_ANIMATION_DURATION);
+          switchFromAndTo();
+        }}>
+        <ReverseIcon size={12} />
+      </StyledButton>
+    </SwitchButtonContainer>
+  );
+}

package/src/components/SwitchFromAndTo/index.ts

@@ -0,0 +1 @@
+export { SwitchFromAndToButton } from './SwitchFromAndTo';

package/src/components/TokenList/TokenList.styles.ts

@@ -30,6 +30,7 @@ export const tokenTitleStyles = css({
 export const tokenAddressStyles = css({
   transform: 'translateY(12px)',
   visibility: 'hidden',
+  display: 'flex',
   '& a': {
     display: 'flex',
     justifyContent: 'center',
@@ -157,3 +158,9 @@ export const TokenBalance = styled(Typography, {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 });
+
+export const StyledLink = styled('a', {
+  '& svg:hover': {
+    color: '$colors$info',
+  },
+});

package/src/components/TokenList/TokenList.tsx

@@ -31,6 +31,7 @@ import {
   ImageSection,
   List,
   Pin,
+  StyledLink,
   Tag,
   TagTitle,
   Title,
@@ -72,17 +73,17 @@ const renderDesc = (props: RenderDescProps) => {
           className={`${tokenAddressStyles()} ${
             !name && tokenWithoutNameStyles()
           }`}>
-          <a
+          {length > 10
+            ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
+            : address}{' '}
+          <Divider size={4} direction="horizontal" />
+          <StyledLink
             href={url}
             target="_blank"
             rel="nofollow noreferrer"
             onClick={(e) => e.stopPropagation()}>
-            {length > 10
-              ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
-              : address}{' '}
-            <Divider size={4} direction="horizontal" />
-            <ExternalLinkIcon color="gray" size={12} />
-          </a>
+            <ExternalLinkIcon size={12} />
+          </StyledLink>
         </div>
       )}
     </div>
@@ -109,7 +110,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list]);
+  }, [list.length]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {
@@ -164,6 +165,7 @@ export function TokenList(props: PropTypes) {
                 style={{
                   width: '100%',
                   overflow: 'hidden',
+                  height: '60px',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}

package/src/pages/ConfirmSwapPage.tsx

@@ -12,9 +12,7 @@ import {
   css,
   Divider,
   IconButton,
-  SettingsIcon,
   styled,
-  Tooltip,
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
@@ -24,7 +22,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
-import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
 import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
@@ -37,7 +34,6 @@ import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
-import { getContainer } from '../utils/common';
 import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
@@ -285,6 +281,7 @@ export function ConfirmSwapPage() {
       <QuoteWarningsAndErrors
         warning={quoteWarning}
         error={quoteError}
+        couldChangeSettings={false}
         refetchQuote={onRefresh}
         showWarningModal={showQuoteWarningModal}
         confirmationDisabled={!isActiveTab}
@@ -307,19 +304,6 @@ export function ConfirmSwapPage() {
           const wallets_url = `../${navigationRoutes.wallets}`;
           navigate(wallets_url);
         },
-        suffix: (
-          <Tooltip
-            container={getContainer()}
-            side="bottom"
-            content={i18n.t('Settings')}>
-            <HeaderButton
-              size="small"
-              variant="ghost"
-              onClick={() => navigate('../' + navigationRoutes.settings)}>
-              <SettingsIcon size={18} color="black" />
-            </HeaderButton>
-          </Tooltip>
-        ),
       }}
       footer={
         <Buttons>

package/src/pages/Home.tsx

@@ -205,6 +205,7 @@ export function Home() {
               <QuoteWarningsAndErrors
                 warning={quoteWarning}
                 error={quoteError}
+                couldChangeSettings={true}
                 refetchQuote={fetchQuote}
                 showWarningModal={showQuoteWarningModal}
                 confirmationDisabled={!isActiveTab}

package/src/store/quote.ts

@@ -247,10 +247,9 @@ export const useQuoteStore = createSelectors(
           toBlockchain: state.fromBlockchain,
           toToken: state.fromToken,
           inputAmount: state.outputAmount?.toString() || '',
-          inputUsdValue: getUsdValue(
-            state.toToken,
-            state.outputAmount?.toString() || ''
-          ),
+          inputUsdValue: state.toToken
+            ? getUsdValue(state.toToken, state.outputAmount?.toString() || '')
+            : new BigNumber(0),
         })),
       resetFromBlockchain: () =>
         set(() => ({

package/dist/components/SwitchFromAndTo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchFromAndTo.d.ts","sourceRoot":"","sources":["../../src/components/SwitchFromAndTo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,wBAAgB,qBAAqB,sBAapC"}

package/src/components/SwitchFromAndTo.tsx

@@ -1,42 +0,0 @@
-import { ReverseIcon, styled } from '@rango-dev/ui';
-import React from 'react';
-
-import { useQuoteStore } from '../store/quote';
-
-const SwitchButtonContainer = styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)',
-  cursor: 'pointer',
-});
-
-const StyledButton = styled('div', {
-  borderRadius: '$md',
-  border: '3px solid $background',
-  background: '$neutral100',
-  width: '$24',
-  height: '$24',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  color: '$foreground',
-  '&:hover': {
-    color: '$secondary500',
-  },
-});
-
-export function SwitchFromAndToButton() {
-  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
-
-  return (
-    <SwitchButtonContainer>
-      <StyledButton
-        onClick={() => {
-          switchFromAndTo();
-        }}>
-        <ReverseIcon size={12} />
-      </StyledButton>
-    </SwitchButtonContainer>
-  );
-}