@rango-dev/widget-embedded 0.12.1-next.6 → 0.12.1-next.8

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const List = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+  height: 355,
+  overflowY: 'auto',
+  paddingRight: '$5',
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+});
+
+export const Content = styled('div', {
+  minHeight: 325,
+});

package/src/components/BlockchainList/BlockchainList.tsx

@@ -0,0 +1,76 @@
+import type { PropTypes } from './BlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  Image,
+  ListItemButton,
+  NotFound,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useMetaStore } from '../../store/meta';
+
+import { filterBlockchains } from './BlockchainList.helpers';
+import { Content, List } from './BlockchainList.styles';
+import { LoadingBlockchainList } from './LoadingBlockchainList';
+
+export function BlockchainList(props: PropTypes) {
+  const { list, searchedFor, onChange, blockchainCategory } = props;
+  const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
+  const loadingStatus = useMetaStore.use.loadingStatus();
+
+  useEffect(() => {
+    setBlockchains([
+      ...filterBlockchains(list, searchedFor, blockchainCategory),
+    ]);
+  }, [list, searchedFor, blockchainCategory]);
+
+  const renderList = () => {
+    if (!blockchains.length && !!searchedFor) {
+      return (
+        <>
+          <Divider size={32} />
+          <NotFound
+            title={i18n.t('No results found')}
+            description={i18n.t('Try using different keywords')}
+          />
+        </>
+      );
+    }
+    return (
+      <List>
+        {blockchains.map((item) => (
+          <ListItemButton
+            key={`${item.name}-${item.chainId}`}
+            hasDivider
+            onClick={() => onChange(item)}
+            start={<Image src={item.logo} size={30} />}
+            title={
+              <Typography variant="title" size="medium">
+                {item.displayName}
+              </Typography>
+            }
+            id={item.chainId as string}
+          />
+        ))}
+      </List>
+    );
+  };
+
+  return (
+    <div>
+      <Typography variant="label" size="large">
+        {i18n.t('Select Blockchain')}
+      </Typography>
+      <Divider size={4} />
+
+      <Content>
+        {loadingStatus === 'loading' && <LoadingBlockchainList />}
+        {loadingStatus === 'success' && renderList()}
+      </Content>
+    </div>
+  );
+}

package/src/components/BlockchainList/BlockchainList.types.ts

@@ -0,0 +1,8 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  list: BlockchainMeta[];
+  searchedFor: string;
+  blockchainCategory: string;
+  onChange: (blockchain: BlockchainMeta) => void;
+}

package/src/components/BlockchainList/LoadingBlockchainList.tsx

@@ -0,0 +1,20 @@
+import { ListItem, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { List } from './BlockchainList.styles';
+
+const ITEM_SKELETON_COUNT = 20;
+export function LoadingBlockchainList() {
+  return (
+    <List>
+      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
+        <ListItem
+          key={e}
+          hasDivider
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          title={<Skeleton variant="text" size="large" width={90} />}
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/BlockchainList/index.ts

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

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,30 @@
+import { styled } from '@rango-dev/ui';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  backgroundColor: '$neutral100',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    backgroundColor: '$neutral400',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    backgroundColor: '$neutral500',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick } = props;
+  return (
+    <Chip selected={selected} onClick={onClick}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

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

package/src/components/BlockchainsSection/BlockchainSection.helpers.ts

@@ -0,0 +1,20 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export const sortBlockchains = (blockchains: BlockchainMeta[]) => {
+  const importantBlockchains: BlockchainMeta[] = [];
+  const otherBlockchains: BlockchainMeta[] = [];
+
+  for (const blockchain of blockchains) {
+    if (
+      blockchain.name === 'ETH' ||
+      blockchain.name === 'COSMOS' ||
+      blockchain.name === 'OSMOSIS'
+    ) {
+      importantBlockchains.push(blockchain);
+    } else {
+      otherBlockchains.push(blockchain);
+    }
+  }
+
+  return importantBlockchains.concat(otherBlockchains);
+};

package/src/components/BlockchainsSection/BlockchainsSection.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+});

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './BlockchainsSection.types';
+
+import { i18n } from '@lingui/core';
+import { Divider, Image, Skeleton, Typography } from '@rango-dev/ui';
+import { type BlockchainMeta } from 'rango-sdk';
+import React, { useEffect, useState } from 'react';
+
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
+import { BlockchainsChip } from '../BlockchainsChip';
+
+import { sortBlockchains } from './BlockchainSection.helpers';
+import { Container } from './BlockchainsSection.styles';
+
+const MIN = 9;
+const MAX = 10;
+const NUMBER_OF_LOADING = 12;
+export function BlockchainsSection(props: PropTypes) {
+  const { blockchains, type, blockchain, onChange, onMoreClick } = props;
+  const sortedBlockchains = sortBlockchains(blockchains);
+  const [selectFromMoreBlockchain, setSelectFromMoreBlockchain] =
+    useState<BlockchainMeta | null>(null);
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
+  const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
+  const COUNT_BLOCKCHAINS = !!selectFromMoreBlockchain ? MIN : MAX;
+
+  useEffect(() => {
+    const selectBlockchainFromMore = sortedBlockchains
+      .slice(MAX, sortedBlockchains.length)
+      .find(
+        (item) =>
+          item.chainId === blockchain?.chainId && item.name === blockchain?.name
+      );
+    if (!!selectBlockchainFromMore) {
+      setSelectFromMoreBlockchain(selectBlockchainFromMore);
+    }
+  }, [blockchain]);
+
+  return (
+    <div>
+      <Divider size={12} />
+      <Typography variant="label" size="large">
+        {i18n.t('Select Blockchain')}
+      </Typography>
+      <Divider size={12} />
+      <Container>
+        {loadingStatus === 'loading' &&
+          Array.from(Array(NUMBER_OF_LOADING), (e) => (
+            <Skeleton key={e} variant="rounded" height={50} />
+          ))}
+        {loadingStatus === 'success' && (
+          <>
+            <BlockchainsChip
+              selected={!blockchain}
+              onClick={() => {
+                if (type === 'from') {
+                  resetFromBlockchain();
+                } else {
+                  resetToBlockchain();
+                }
+              }}>
+              <Typography variant="body" size="xsmall" color="secondary500">
+                {i18n.t('All')}
+              </Typography>
+            </BlockchainsChip>
+            {!!selectFromMoreBlockchain && (
+              <BlockchainsChip
+                selected={
+                  !!selectFromMoreBlockchain &&
+                  selectFromMoreBlockchain.chainId === blockchain?.chainId
+                }
+                key={selectFromMoreBlockchain.chainId}
+                onClick={() => onChange(selectFromMoreBlockchain)}>
+                <Image src={selectFromMoreBlockchain.logo} size={30} />
+              </BlockchainsChip>
+            )}
+            {sortedBlockchains.slice(0, COUNT_BLOCKCHAINS).map((item) => (
+              <BlockchainsChip
+                key={item.chainId}
+                selected={!!blockchain && blockchain.chainId === item.chainId}
+                onClick={() => onChange(item)}>
+                <Image src={item.logo} size={30} />
+              </BlockchainsChip>
+            ))}
+
+            <BlockchainsChip onClick={onMoreClick}>
+              <Typography variant="body" size="xsmall" color="secondary500">
+                {i18n._('More +{count}', {
+                  count: sortedBlockchains.length - MAX,
+                })}
+              </Typography>
+            </BlockchainsChip>
+          </>
+        )}
+      </Container>
+    </div>
+  );
+}

package/src/components/BlockchainsSection/BlockchainsSection.types.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  blockchains: BlockchainMeta[];
+  type: 'from' | 'to';
+  blockchain: BlockchainMeta | null;
+  onChange: (blockchain: BlockchainMeta) => void;
+  onMoreClick: () => void;
+}

package/src/components/BlockchainsSection/index.ts

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

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

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
+import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
+
+import { numberToString } from '../../utils/numbers';
+
+export function formatBestRoute(
+  bestRoute: BestRouteResponse
+): Step[] | undefined {
+  return bestRoute.result?.swaps.map((swap) => {
+    return {
+      swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
+      from: {
+        token: { displayName: swap.from.symbol, image: swap.from.logo },
+        chain: {
+          displayName: swap.from.blockchain,
+          image: swap.from.blockchainLogo,
+        },
+        price: {
+          value: numberToString(swap.fromAmount, 6, 6),
+          usdValue: numberToString(swap.from.usdPrice?.toString(), 6, 6),
+        },
+      },
+      to: {
+        token: { displayName: swap.to.symbol, image: swap.to.logo },
+        chain: {
+          displayName: swap.to.blockchain,
+          image: swap.to.blockchainLogo,
+        },
+        price: {
+          value: numberToString(swap.toAmount, 6, 6),
+          usdValue: numberToString(swap.to.usdPrice?.toString(), 6, 6),
+        },
+      },
+    };
+  });
+}
+
+export function getRequiredWallets(route: BestRouteResponse | null): string[] {
+  const wallets: string[] = [];
+
+  route?.result?.swaps.forEach((swap) => {
+    const currentStepFromBlockchain = swap.from.blockchain;
+    const currentStepToBlockchain = swap.to.blockchain;
+    let lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepFromBlockchain != lastAddedWallet) {
+      wallets.push(currentStepFromBlockchain);
+    }
+    lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepToBlockchain != lastAddedWallet) {
+      wallets.push(currentStepToBlockchain);
+    }
+  });
+  return wallets;
+}
+
+export function isValidAddress(
+  chain: BlockchainMeta,
+  address: string
+): boolean {
+  const regex = chain.addressPatterns;
+  const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
+  return valid;
+}

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

@@ -0,0 +1,169 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import {
+  Button,
+  IconButton,
+  keyframes,
+  styled,
+  TextField,
+} from '@rango-dev/ui';
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const Title = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const ListContainer = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+  alignContent: 'baseline',
+});
+
+export const WalletButton = styled('button', {
+  borderRadius: '$xm',
+  padding: '$10',
+  border: '0',
+  display: 'flex',
+  justifyContent: 'center',
+  backgroundColor: '$neutral100',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: 110,
+  position: 'relative',
+  '&:hover': {
+    backgroundColor: '$surface600',
+    opacity: '0.8',
+  },
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$0',
+  border: 'none',
+  outline: 'none',
+  width: '100%',
+  backgroundColor: 'transparent',
+});
+
+export const ShowMoreHeader = styled('div', {
+  padding: '$20',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '$neutral200',
+  position: 'relative',
+  width: '100%',
+});
+
+export const NavigateBack = styled(IconButton, {
+  position: 'absolute',
+  left: '$20',
+});
+
+export const WalletsContainer = styled('div', {
+  paddingTop: '$20',
+  '& .wallets-list': {
+    display: 'grid',
+    gap: '$10',
+    gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+    alignContent: 'baseline',
+  },
+});
+
+export const CollapsibleRoot = styled(Collapsible.Root, {
+  backgroundColor: '$neutral200',
+  borderRadius: '$sm',
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary500',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const CustomDestinationButton = styled(Button, {
+  width: '100%',
+  borderRadius: '$sm !important',
+  padding: '$15 !important',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  backgroundColor: '$neutral100 !important',
+});
+
+export const CustomDestination = styled('div', {
+  padding: '$10 $0',
+  '& .button__content': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '& .alarms': { paddingTop: '5px' },
+});
+
+export const ExpandedIcon = styled('div', {
+  transition: 'all 300ms ease',
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const ConfirmButton = styled('div', {
+  display: 'flex',
+});
+
+export const StyledTextField = styled(TextField, {
+  padding: '$0 $15 $15 $15',
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} 300ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} 300ms ease-out`,
+      },
+    },
+  },
+});
+
+export const Wallets = styled('div', { overflow: 'visible', width: '100%' });