@rango-dev/widget-embedded 0.1.10-next.98 → 0.1.10

package/src/components/TokenInfo.tsx

@@ -16,6 +16,7 @@ import BigNumber from 'bignumber.js';
 import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@rango-dev/ui';
 
 type PropTypes = (
   | {
@@ -38,14 +39,46 @@ const Box = styled('div', {
 
 const Container = styled('div', {
   boxSizing: 'border-box',
-  backgroundColor: '$neutrals300',
   borderRadius: '$5',
-  padding: '$8 0',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300',
+      },
+      outlined: {
+        border: '1px solid $neutrals300',
+      },
+    },
+  },
+
+  defaultVariants: {
+    type: 'filled',
+  },
 
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px',
+  },
   '.form': {
     display: 'flex',
     width: '100%',
-    padding: '$8 $16',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+    '.amount': {
+      width: '30%',
+    },
   },
 });
 
@@ -57,7 +90,11 @@ const StyledImage = styled('img', {
 const Options = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '0 $8',
+
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center',
+  },
 });
 
 const ImagePlaceholder = styled('span', {
@@ -68,10 +105,9 @@ const ImagePlaceholder = styled('span', {
 });
 
 const OutputContainer = styled('div', {
+  windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  flexGrow: 1,
-  width: '70%',
   backgroundColor: '$background',
   border: '1px solid transparent',
   position: 'relative',
@@ -141,29 +177,39 @@ export function TokenInfo(props: PropTypes) {
 
   return (
     <Box>
-      <div>
-        <Typography variant="body2">{t(type)}</Typography>
-      </div>
-      <Container>
-        {props.type === 'From' && (
-          <Options>
-            <div
-              className="balance"
-              onClick={() => {
-                if (tokenBalance !== '0')
-                  setInputAmount(tokenBalanceReal.split(',').join(''));
-              }}
-            >
-              <Button variant="ghost" size="small">
-                <Typography variant="body2">{`${t('Max')}: ${tokenBalance} ${
-                  fromToken?.symbol || ''
-                }`}</Typography>
-              </Button>
-            </div>
-          </Options>
-        )}
+      <Container type={props.type === 'From' ? 'filled' : 'outlined'}>
+        <div className="head">
+          <Typography variant="body2" color="neutrals800">
+            {t(type)}
+          </Typography>
+          {props.type === 'From' ? (
+            <Options>
+              <div
+                className="balance"
+                onClick={() => {
+                  if (tokenBalance !== '0')
+                    setInputAmount(tokenBalanceReal.split(',').join(''));
+                }}
+              >
+                <Typography variant="body3" color="neutrals600">{`${t(
+                  'Balance'
+                )}: ${tokenBalance} ${fromToken?.symbol || ''}`}</Typography>
+                <Spacer size={4} />
+                <Button type="primary" variant="ghost" size="compact">
+                  {t('Max')}
+                </Button>
+              </div>
+            </Options>
+          ) : (
+            <Typography
+              variant="caption"
+              color="neutrals600"
+            >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+          )}
+        </div>
         <div className="form">
           <Button
+            className="selectors"
             onClick={() => {
               navigate(`/${props.type.toLowerCase()}-chain`);
             }}
@@ -180,11 +226,14 @@ export function TokenInfo(props: PropTypes) {
             suffix={ItemSuffix}
             align="start"
             size="large"
-            style={{ marginRight: '.5rem' }}
           >
-            {loadingStatus === 'success' && chain ? chain.displayName : t('Chain')}
+            {loadingStatus === 'success' && chain
+              ? chain.displayName
+              : t('Chain')}
           </Button>
+          <Spacer size={12} />
           <Button
+            className="selectors"
             onClick={() => {
               navigate(`/${props.type.toLowerCase()}-token`);
             }}
@@ -205,57 +254,56 @@ export function TokenInfo(props: PropTypes) {
             suffix={ItemSuffix}
             size="large"
             align="start"
-            style={{ marginRight: '.5rem' }}
           >
             {loadingStatus === 'success' && token ? token.symbol : t('Token')}
           </Button>
-          {props.type === 'From' ? (
-            <TextField
-              type="number"
-              size="large"
-              autoFocus
-              placeholder="0"
-              style={{
-                width: '70%',
-                position: 'relative',
-                backgroundColor: '$background !important',
-              }}
-              suffix={
-                <span
-                  style={{ position: 'absolute', right: '4px', bottom: '2px' }}
-                >
-                  <Typography variant="caption">{`$${numberToString(
-                    inputUsdValue
-                  )}`}</Typography>
-                </span>
-              }
-              value={props.inputAmount || ''}
-              onChange={
-                props.type === 'From'
-                  ? (event) => {
-                      props.onAmountChange(event.target.value);
-                    }
-                  : undefined
-              }
-            />
-          ) : (
-            <OutputContainer>
-              <Typography variant="body1">
-                {bestRoute
-                  ? `≈ ${numberToString(props.outputAmount)}`
-                  : inputAmount
-                  ? '?'
-                  : '0'}
-              </Typography>
-              <span
-                style={{ position: 'absolute', right: '4px', bottom: '2px' }}
-              >
-                <Typography variant="caption">{`$${numberToString(
-                  props.outputUsdValue
-                )}`}</Typography>
-              </span>
-            </OutputContainer>
-          )}
+          <Spacer size={12} />
+          <div className="amount">
+            {props.type === 'From' ? (
+              <TextField
+                type="number"
+                size="large"
+                autoFocus
+                placeholder="0"
+                style={{
+                  position: 'relative',
+                  backgroundColor: '$background !important',
+                }}
+                suffix={
+                  <span
+                    style={{
+                      position: 'absolute',
+                      right: '4px',
+                      bottom: '2px',
+                    }}
+                  >
+                    <Typography
+                      variant="caption"
+                      color="neutrals800"
+                    >{`$${numberToString(inputUsdValue)}`}</Typography>
+                  </span>
+                }
+                value={props.inputAmount || ''}
+                onChange={
+                  props.type === 'From'
+                    ? (event) => {
+                        props.onAmountChange(event.target.value);
+                      }
+                    : undefined
+                }
+              />
+            ) : (
+              <OutputContainer>
+                <Typography variant="h4">
+                  {bestRoute
+                    ? `≈ ${numberToString(props.outputAmount)}`
+                    : inputAmount
+                    ? '?'
+                    : '0'}
+                </Typography>
+              </OutputContainer>
+            )}
+          </div>
         </div>
       </Container>
     </Box>

package/src/components/TokenPreview.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { Button, InfoCircleIcon, styled, Typography } from '@rango-dev/ui';
+import { LoadingStatus } from '../store/meta';
+import { useTranslation } from 'react-i18next';
+import { Spacer } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
+import { numberToString } from '../utils/numbers';
+
+const Box = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+});
+
+const Container = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300',
+      },
+      outlined: {
+        border: '1px solid $neutrals300',
+      },
+    },
+  },
+
+  defaultVariants: {
+    type: 'filled',
+  },
+
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px',
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+    '.amount': {
+      width: '30%',
+    },
+  },
+});
+
+const StyledImage = styled('img', {
+  width: '$24',
+  maxHeight: '$24',
+});
+
+const ImagePlaceholder = styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px',
+});
+
+const OutputContainer = styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8',
+});
+
+interface PropTypes {
+  label: string;
+  amount: string;
+  usdValue?: BigNumber;
+  loadingStatus: LoadingStatus;
+  chain: {
+    displayName: string;
+    logo: string;
+  };
+  token: {
+    symbol: string;
+    image: string;
+  };
+}
+
+export function TokenPreview(props: PropTypes) {
+  const { chain, token, loadingStatus } = props;
+  const { t } = useTranslation();
+
+  const ItemSuffix = (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
+    </div>
+  );
+
+  return (
+    <Box>
+      <Container type={'outlined'}>
+        <div className="head">
+          <Typography variant="body2" color="neutrals800">
+            {props.label}
+          </Typography>
+          {props.usdValue && (
+            <Typography
+              variant="caption"
+              color="neutrals600"
+            >{`$${numberToString(props.usdValue)}`}</Typography>
+          )}
+        </div>
+        <div className="form">
+          <Button
+            className="selectors"
+            variant="outlined"
+            loading={loadingStatus === 'loading'}
+            prefix={
+              loadingStatus === 'success' && chain ? (
+                <StyledImage src={chain.logo} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            align="start"
+            size="large"
+          >
+            {loadingStatus === 'success' && chain
+              ? chain.displayName
+              : t('Chain')}
+          </Button>
+          <Spacer size={12} />
+          <Button
+            className="selectors"
+            variant="outlined"
+            loading={loadingStatus === 'loading'}
+            prefix={
+              loadingStatus === 'success' && token ? (
+                <StyledImage src={token.image} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            size="large"
+            align="start"
+          >
+            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+          </Button>
+          <Spacer size={12} />
+          <div className="amount">
+            <OutputContainer>
+              <Typography variant="h4">{props.amount}</Typography>
+            </OutputContainer>
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}

package/src/components/UpdateUrl.tsx

@@ -52,9 +52,7 @@ export function UpdateUrl() {
       fromAmount = '';
     if (
       loadingStatus !== 'success' &&
-      ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
-        location.pathname
-      )
+      location.pathname != navigationRoutes.confirmSwap
     ) {
       fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
       fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];

package/src/components/warnings/BalanceWarnings.tsx

@@ -23,6 +23,7 @@ const ListItem = styled('li', {
 
 const Message = styled(Typography, {
   display: 'block',
+  color: '$warning500 !important',
 });
 
 export function BalanceWarnings({ messages }: PropTypes) {

package/src/components/warnings/HighSlippageWarning.tsx

@@ -1,4 +1,4 @@
-import { Alert, Typography } from '@rango-dev/ui';
+import { Alert } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
 
@@ -10,12 +10,9 @@ export function HighSlippageWarning(props: PropTypes) {
   const { selectedSlippage } = props;
 
   return (
-    <Alert type="warning">
-      <Typography variant="body2">
-        Caution, your slippage is high (=
-        {selectedSlippage}). Your trade may be front run.
-        <ChangeSlippageButton />
-      </Typography>
+    <Alert type="warning" footer={<ChangeSlippageButton />}>
+      Caution, your slippage is high (=
+      {selectedSlippage}). Your trade may be front run.
     </Alert>
   );
 }

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -1,18 +1,23 @@
-import { Typography } from '@rango-dev/ui';
+import { Spacer, Typography, styled } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
 
 interface PropTypes {
-  minRequiredSlippage: number | null;
+  minRequiredSlippage: string | null;
 }
 
+const StyledMessage = styled(Typography, {
+  color: '$error500 !important',
+});
+
 export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
   return (
-    <Typography variant="body2">
+    <StyledMessage variant="body2">
       We recommend you to increase slippage to at least &nbsp;
       {minRequiredSlippage}
       &nbsp; for this route.
+      <Spacer size={8} direction="vertical" />
       <ChangeSlippageButton />
-    </Typography>
+    </StyledMessage>
   );
 }

package/src/constants/navigationRoutes.ts

@@ -9,6 +9,5 @@ export const navigationRoutes = {
   swaps: '/swaps',
   wallets: '/wallets',
   confirmSwap: '/confirm-swap',
-  confirmWallets: '/confirm-wallets',
   swapDetails: '/swaps/:requestId',
 };

package/src/globalStyles.ts

@@ -2,9 +2,10 @@ import { globalCss } from '@rango-dev/ui';
 
 export const globalStyles = globalCss({
   '*': {
-    '&::-webkit-scrollbar': { width: '$8' },
+    '&::-webkit-scrollbar': { width: '$8', height: '$8' },
     '&::-webkit-scrollbar-thumb': {
       backgroundColor: '$neutrals400',
+      borderRadius: '$10',
     },
     '&::-webkit-scrollbar-thumb:hover': {
       backgroundColor: '$neutrals500',
@@ -20,7 +21,7 @@ export const globalFont = (fontFamily: string) =>
       "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
       "url('https://fonts.cdnfonts.com/css/times-new-roman')",
     ],
-    [`.font_${fontFamily.replace(/ /g, '')} ._text`]: {
+    body: {
       fontFamily,
     },
   })();

package/src/hooks/useConfirmSwap.ts

@@ -93,6 +93,7 @@ export function useConfirmSwap(): ConfirmSwap {
           meta
         );
 
+        //@ts-ignore
         return newSwap;
       }
       return;
@@ -228,7 +229,7 @@ export function useConfirmSwap(): ConfirmSwap {
           false,
           meta
         );
-
+        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;

package/src/hooks/useNavigateBack.ts

@@ -8,6 +8,8 @@ export function useNavigateBack() {
   navigationRoutes;
 
   const navigateBackFrom = (currentRoute: string) => {
+    if (currentRoute === navigationRoutes.swapDetails)
+      return navigate(navigationRoutes.swaps, { replace: true });
     if (
       !isRouterInContext ||
       (window.history.state && window.history.state.idx > 0)
@@ -23,7 +25,7 @@ export function useNavigateBack() {
           navigationRoutes.settings,
           navigationRoutes.wallets,
           navigationRoutes.swaps,
-          navigationRoutes.confirmWallets,
+          navigationRoutes.confirmSwap,
         ].includes(currentRoute)
       )
         navigate(navigationRoutes.home, { replace: true });
@@ -31,8 +33,6 @@ export function useNavigateBack() {
         navigate(navigationRoutes.settings, { replace: true });
       else if (currentRoute === navigationRoutes.swapDetails)
         navigate(navigationRoutes.swaps, { replace: true });
-      else if (currentRoute === navigationRoutes.confirmSwap)
-        navigate(navigationRoutes.confirmWallets, { replace: true });
     }
   };
 

package/src/hooks/useTheme.ts

@@ -14,16 +14,16 @@ export function useTheme({
   warning = '#F5A623',
   success = '#0070F3',
   fontFamily = 'Robot',
-  borderRadius = 5,
+  borderRadius = 8,
 }: Colors & { borderRadius?: number; fontFamily?: string }) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const colors = {
     neutrals200: '#FAFAFA',
-    neutrals300: '#EAEAEA',
-    neutrals400: '#999999',
-    neutrals500: '#888888',
-    neutrals600: '#666666',
+    neutrals300: '#f2f2f2',
+    neutrals400: '#dedede',
+    neutrals500: '#cccccc',
+    neutrals600: '#acacac',
     neutrals700: '#444444',
     neutrals800: '#333333',
     neutrals900: '#111111',
@@ -69,10 +69,10 @@ export function useTheme({
       neutrals200: '#111111',
       neutrals300: '#333333',
       neutrals400: '#444444',
-      neutrals500: '#666666',
-      neutrals600: '#888888',
-      neutrals700: '#999999',
-      neutrals800: '#EAEAEA',
+      neutrals500: '#acacac',
+      neutrals600: '#cccccc',
+      neutrals700: '#dedede',
+      neutrals800: '#f2f2f2',
       neutrals900: '#FAFAFA',
       foreground: background,
       background: foreground,

package/src/languages/en.json

@@ -1,13 +1,14 @@
 {
   "swap": "SWAP",
-  "Connect Wallet":"Connect Wallet",
-  "Powered By":"Powered By",
-  "From":"From",
-  "To":"To",
-  "Max":"Max",
+  "Connect Wallet": "Connect Wallet",
+  "Powered By": "Powered By",
+  "From": "You sell",
+  "To": "You receive",
+  "Balance": "Balance",
+  "Max": "Max",
   "Chain": "Chain",
   "Token": "Token",
-  "Source" :"Source",
-  "Destination" :"Destination",
-  "Select Wallet":"Select Wallet"
+  "Source": "Source",
+  "Destination": "Destination",
+  "Select Wallet": "Connect Your Wallet"
 }