@rango-dev/widget-embedded 0.1.10-next.96 → 0.1.10-next.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.96",
+  "version": "0.1.10-next.99",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ChangeSlippageButton.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
-import { Button, styled } from '@rango-dev/ui';
+import { Button } from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 
-const StyledButton = styled(Button, {
-  marginTop: '$8',
-});
-
 export function ChangeSlippageButton() {
   const navigate = useNavigate();
 
   return (
-    <StyledButton
+    <Button
       type="primary"
-      variant="contained"
+      variant="outlined"
       size="small"
       onClick={() => navigate(navigationRoutes.settings)}
     >
       Change Slippage
-    </StyledButton>
+    </Button>
   );
 }

package/src/components/HeaderButtons.tsx

@@ -21,9 +21,9 @@ export function HeaderButtons(props: PropTypes) {
 
   return (
     <ButtonsContainer>
-      <Tooltip content="Retry">
+      <Tooltip content="Refresh">
         <Button variant="ghost" onClick={onClickRefresh}>
-          <RetryIcon size={28} />
+          <RetryIcon size={24} />
         </Button>
       </Tooltip>
       <Tooltip content="Transactions History">

package/src/components/RoutesOverview.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { styled } from '@rango-dev/ui';
+import { BestRouteResponse } from 'rango-sdk';
+import { ChevronRightIcon } from '@rango-dev/ui';
+import { GasIcon } from '@rango-dev/ui';
+import { Spacer } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+interface PropTypes {
+  routes: BestRouteResponse | null;
+  totalFee?: string;
+}
+function RoutesOverview(props: PropTypes) {
+  if (!props.routes) return null;
+
+  const swaps = props.routes.result?.swaps;
+  return (
+    <Container>
+      <div className="routes">
+        {swaps?.map((swap, idx) => {
+          const isLast = idx + 1 == swaps.length;
+          return (
+            <>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </>
+          );
+        })}
+      </div>
+      {props.totalFee ? (
+        <div className="fee">
+          <GasIcon size={12} />
+          <Spacer size={4} />${props.totalFee}
+        </div>
+      ) : null}
+    </Container>
+  );
+}
+
+export default RoutesOverview;

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,175 @@
+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>
+          <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/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/globalStyles.ts

@@ -20,7 +20,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/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"
 }