@rango-dev/widget-embedded 0.12.0 → 0.12.1-next.1

package/dist/components/TokenPreview.d.ts

@@ -1,21 +0,0 @@
-import React, { ReactNode } from 'react';
-import { LoadingStatus } from '../store/meta';
-import BigNumber from 'bignumber.js';
-interface PropTypes {
-    label: string;
-    amount: string;
-    usdValue: BigNumber | null;
-    loadingStatus: LoadingStatus;
-    chain: {
-        displayName: string;
-        logo: string;
-    };
-    token: {
-        symbol: string;
-        image: string;
-    };
-    percentageChange?: ReactNode;
-}
-export declare function TokenPreview(props: PropTypes): React.JSX.Element;
-export {};
-//# sourceMappingURL=TokenPreview.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TokenPreview.d.ts","sourceRoot":"","sources":["../../src/components/TokenPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASzC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,SAAS,MAAM,cAAc,CAAC;AA8ErC,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,qBAiF5C"}

package/src/components/PercentageChange.tsx

@@ -1,33 +0,0 @@
-import BigNumber from 'bignumber.js';
-import React from 'react';
-import { getPercentageChange } from '../utils/swap';
-import { Typography } from '@rango-dev/ui';
-import { numberToString } from '../utils/numbers';
-
-interface PropTypes {
-  inputUsdValue: BigNumber | null;
-  outputUsdValue: BigNumber | null;
-}
-
-export function PercentageChange(props: PropTypes) {
-  const { inputUsdValue, outputUsdValue } = props;
-
-  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
-
-  const percentageChange = getPercentageChange(
-    inputUsdValue.toNumber(),
-    outputUsdValue.toNumber()
-  );
-
-  const showPercentageChange = percentageChange?.lt(0);
-
-  return (
-    <>
-      {showPercentageChange && (
-        <Typography variant="caption" color="$error500">
-          {`(${numberToString(percentageChange, 0, 2)}%)`}
-        </Typography>
-      )}
-    </>
-  );
-}

package/src/components/RoutesOverview.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { styled, ChevronRightIcon, GasIcon, Divider } from '@rango-dev/ui';
-import { BestRouteResponse } from 'rango-sdk';
-
-export const Container = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
-  color: '$neutral800',
-  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 (
-            <React.Fragment key={idx}>
-              <div className="route">{swap.from.symbol}</div>
-              <ChevronRightIcon size={12} />
-              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
-            </React.Fragment>
-          );
-        })}
-      </div>
-      {props.totalFee ? (
-        <div className="fee">
-          <GasIcon size={12} />
-          <Divider size={4} direction="horizontal" />${props.totalFee}
-        </div>
-      ) : null}
-    </Container>
-  );
-}
-
-export default RoutesOverview;

package/src/components/SwapDetailsPlaceholder.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
-import { i18n } from '@lingui/core';
-
-const PlaceholderContainer = styled('div', { height: '450px' });
-
-export const LoaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  width: '100%',
-  paddingTop: '33%',
-  flex: 1,
-});
-
-interface PropTypes {
-  requestId: string;
-  loading: boolean;
-  onBack: () => void;
-}
-
-export function SwapDetailsPlaceholder(props: PropTypes) {
-  const { requestId, loading, onBack } = props;
-
-  return (
-    <SecondaryPage
-      title={i18n.t('Swap Details')}
-      textField={false}
-      onBack={onBack}>
-      <PlaceholderContainer>
-        {loading ? (
-          <LoaderContainer>
-            <Spinner size={24} />
-          </LoaderContainer>
-        ) : (
-          <Alert
-            type="secondary"
-            title={i18n.t(
-              'swapNotFound',
-              { requestId },
-              { message: 'Swap with request ID = ${requestId} not found.' }
-            )}
-          />
-        )}
-      </PlaceholderContainer>
-    </SecondaryPage>
-  );
-}

package/src/components/TokenInfo.tsx

@@ -1,329 +0,0 @@
-import React from 'react';
-import {
-  AngleDownIcon,
-  Button,
-  InfoCircleIcon,
-  styled,
-  TextField,
-  Typography,
-  Image,
-  Divider,
-} from '@rango-dev/ui';
-import { useMetaStore } from '../store/meta';
-import { BlockchainMeta, Token } from 'rango-sdk';
-import { useNavigate } from 'react-router-dom';
-import { useBestRouteStore } from '../store/bestRoute';
-import { numberToString } from '../utils/numbers';
-import BigNumber from 'bignumber.js';
-import { getBalanceFromWallet } from '../utils/wallets';
-import { useWalletsStore } from '../store/wallets';
-import { Trans } from '@lingui/react';
-import { i18n } from '@lingui/core';
-import { PercentageChange } from './PercentageChange';
-
-type PropTypes = (
-  | {
-      type: 'From';
-      inputAmount: string;
-      onAmountChange: (amount: string) => void;
-    }
-  | {
-      type: 'To';
-      outputAmount: BigNumber | null;
-      outputUsdValue: BigNumber | null;
-    }
-) & { chain: BlockchainMeta | null; token: Token | null };
-
-const Box = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  overflow: 'hidden',
-});
-
-const Container = styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutral100',
-      },
-      outlined: {
-        border: '1px solid $neutral100',
-        backgroundColor: '$surface',
-      },
-    },
-  },
-
-  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%',
-    },
-  },
-  '.output-usd': {
-    display: 'flex',
-    div: {
-      display: 'flex',
-      paddingLeft: '$8',
-    },
-  },
-});
-
-const Options = styled('div', {
-  display: 'flex',
-  justifyContent: 'flex-end',
-
-  '.balance': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-const ImagePlaceholder = styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutral100',
-  borderRadius: '99999px',
-});
-
-const OutputContainer = styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$surface',
-  border: '1px solid transparent',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$8',
-  paddingRight: '$8',
-});
-
-export function TokenInfo(props: PropTypes) {
-  const { type, chain, token } = props;
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const navigate = useNavigate();
-
-  const tokenBalance =
-    !!fromChain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromChain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          8
-        )
-      : '0';
-
-  const tokenBalanceReal =
-    !!fromChain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromChain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          getBalanceFromWallet(
-            connectedWallets,
-            fromChain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.decimal
-        )
-      : '0';
-
-  const ItemSuffix = (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
-      <AngleDownIcon />
-    </div>
-  );
-
-  return (
-    <Box>
-      <Container type={props.type === 'From' ? 'filled' : 'outlined'}>
-        <div className="head">
-          <Typography variant="body2" color="neutral800">
-            {type === 'From' ? (
-              <Trans id="swap from" message="From" />
-            ) : (
-              <Trans id="swap to" message="To" />
-            )}
-          </Typography>
-          {props.type === 'From' ? (
-            <Options>
-              <div
-                className="balance"
-                onClick={() => {
-                  if (tokenBalance !== '0')
-                    setInputAmount(tokenBalanceReal.split(',').join(''));
-                }}>
-                <Typography variant="body3" color="neutral600">
-                  {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
-                </Typography>
-                <Divider size={4} />
-                <Button type="primary" variant="ghost" size="compact">
-                  <Trans id="maximum amount of asset" message="Max" />
-                </Button>
-              </div>
-            </Options>
-          ) : (
-            <div className="output-usd">
-              <PercentageChange
-                inputUsdValue={inputUsdValue}
-                outputUsdValue={props.outputUsdValue}
-              />
-              <div>
-                <Typography
-                  variant="caption"
-                  color="neutral600">{`$${numberToString(
-                  props.outputUsdValue
-                )}`}</Typography>
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="form">
-          <Button
-            className="selectors"
-            onClick={() => {
-              navigate(`${props.type.toLowerCase()}-chain`);
-            }}
-            variant="outlined"
-            disabled={loadingStatus === 'failed'}
-            loading={loadingStatus === 'loading'}
-            prefix={
-              loadingStatus === 'success' && chain ? (
-                <Image src={chain.logo} size={24} />
-              ) : (
-                <ImagePlaceholder />
-              )
-            }
-            suffix={ItemSuffix}
-            align="start"
-            size="large">
-            {loadingStatus === 'success' && chain
-              ? chain.displayName
-              : i18n.t('Chain')}
-          </Button>
-          <Divider size={12} direction="horizontal" />
-          <Button
-            className="selectors"
-            onClick={() => {
-              navigate(`${props.type.toLowerCase()}-token`);
-            }}
-            variant="outlined"
-            disabled={
-              loadingStatus === 'failed' ||
-              (type === 'From' && !fromChain) ||
-              (type === 'To' && !toChain)
-            }
-            loading={loadingStatus === 'loading'}
-            prefix={
-              loadingStatus === 'success' && token ? (
-                <Image src={token.image} size={24} />
-              ) : (
-                <ImagePlaceholder />
-              )
-            }
-            suffix={ItemSuffix}
-            size="large"
-            align="start">
-            {loadingStatus === 'success' && token
-              ? token.symbol
-              : i18n.t('Token')}
-          </Button>
-          <Divider size={12} direction="horizontal" />
-          <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="neutral800">{`$${numberToString(
-                      inputUsdValue
-                    )}`}</Typography>
-                  </span>
-                }
-                value={props.inputAmount || ''}
-                min={0}
-                onChange={
-                  props.type === 'From'
-                    ? (event) => {
-                        props.onAmountChange(event.target.value);
-                      }
-                    : undefined
-                }
-              />
-            ) : (
-              <OutputContainer>
-                <Typography variant="h4">
-                  {fetchingBestRoute && '?'}
-                  {!!bestRoute?.result &&
-                    `≈ ${numberToString(props.outputAmount)}`}
-                  {(!inputAmount || inputAmount === '0') && '0'}
-                </Typography>
-              </OutputContainer>
-            )}
-          </div>
-        </div>
-      </Container>
-    </Box>
-  );
-}

package/src/components/TokenPreview.tsx

@@ -1,187 +0,0 @@
-import React, { ReactNode } from 'react';
-import {
-  Button,
-  InfoCircleIcon,
-  styled,
-  Typography,
-  Divider,
-  Image,
-} from '@rango-dev/ui';
-import { LoadingStatus } from '../store/meta';
-import { i18n } from '@lingui/core';
-import BigNumber from 'bignumber.js';
-import { numberToString } from '../utils/numbers';
-
-const Box = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  overflow: 'hidden',
-});
-
-const Container = styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutral100',
-      },
-      outlined: {
-        border: '1px solid $neutral100',
-      },
-    },
-  },
-
-  defaultVariants: {
-    type: 'filled',
-  },
-
-  '.head': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: '32px',
-    '.usd-value': {
-      paddingLeft: '$8',
-    },
-  },
-  '.form': {
-    display: 'flex',
-    width: '100%',
-    padding: '$2 0',
-    '.selectors': {
-      width: '35%',
-
-      '._text': {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      },
-    },
-    '.amount': {
-      width: '30%',
-    },
-  },
-});
-
-const ImagePlaceholder = styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutral100',
-  borderRadius: '99999px',
-});
-
-const OutputContainer = styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$surface',
-  border: '1px solid transparent',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$8',
-  paddingRight: '$8',
-});
-
-interface PropTypes {
-  label: string;
-  amount: string;
-  usdValue: BigNumber | null;
-  loadingStatus: LoadingStatus;
-  chain: {
-    displayName: string;
-    logo: string;
-  };
-  token: {
-    symbol: string;
-    image: string;
-  };
-  percentageChange?: ReactNode;
-}
-
-export function TokenPreview(props: PropTypes) {
-  const { chain, token, loadingStatus, percentageChange } = props;
-
-  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="neutral800">
-            {props.label}
-          </Typography>
-          <div>
-            {percentageChange}
-            {props.usdValue && (
-              <Typography
-                variant="caption"
-                color="neutral600"
-                className="usd-value">{`$${numberToString(
-                props.usdValue
-              )}`}</Typography>
-            )}
-          </div>
-        </div>
-        <div className="form">
-          <Button
-            className="selectors"
-            variant="outlined"
-            loading={loadingStatus === 'loading'}
-            prefix={
-              loadingStatus === 'success' && chain ? (
-                <Image src={chain.logo} size={24} />
-              ) : (
-                <ImagePlaceholder />
-              )
-            }
-            suffix={ItemSuffix}
-            align="start"
-            size="large">
-            {loadingStatus === 'success' && chain
-              ? chain.displayName
-              : i18n.t('Chain')}
-          </Button>
-          <Divider size={12} direction="horizontal" />
-          <Button
-            className="selectors"
-            variant="outlined"
-            loading={loadingStatus === 'loading'}
-            prefix={
-              loadingStatus === 'success' && token ? (
-                <Image src={token.image} size={24} />
-              ) : (
-                <ImagePlaceholder />
-              )
-            }
-            suffix={ItemSuffix}
-            size="large"
-            align="start">
-            {loadingStatus === 'success' && token
-              ? token.symbol
-              : i18n.t('Token')}
-          </Button>
-          <Divider size={12} direction="horizontal" />
-          <div className="amount">
-            <OutputContainer>
-              <Typography variant="h4">{props.amount}</Typography>
-            </OutputContainer>
-          </div>
-        </div>
-      </Container>
-    </Box>
-  );
-}

package/src/languages/en.json

@@ -1,14 +0,0 @@
-{
-  "swap": "SWAP",
-  "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": "Connect Your Wallet"
-}