@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -0,0 +1,250 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './WalletList.type';
+import type { Wallet } from '../../types';
+import type { WalletInfo } from '@rango-dev/ui';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import {
+  Button,
+  Divider,
+  Image,
+  MessageBox,
+  Modal,
+  SelectableWallet,
+  Typography,
+  WalletState,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useWallets } from '../..';
+import { useWalletList } from '../../hooks/useWalletList';
+import { TIME_TO_CLOSE_MODAL } from '../../pages/WalletsPage';
+import { useMetaStore } from '../../store/meta';
+import { useWalletsStore } from '../../store/wallets';
+import { getBlockchainDisplayNameFor } from '../../utils/meta';
+import {
+  getAddress,
+  getConciseAddress,
+  isExperimentalChain,
+} from '../../utils/wallets';
+import { WalletModal } from '../WalletModal';
+
+import { WalletButton } from './ConfirmWallets.styles';
+import {
+  LogoContainer,
+  Spinner,
+  WalletImageContainer,
+} from './WalletList.styles';
+
+export function WalletList(props: PropTypes) {
+  const { config, chain, isSelected, selectWallet, limit, onShowMore } = props;
+
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { blockchains } = useMetaStore.use.meta();
+  const [openWalletStateModal, setOpenWalletStateModal] =
+    useState<WalletType>('');
+  const [experimentalChainWallet, setExperimentalChainWallet] =
+    useState<Wallet | null>(null);
+  const [showExperimentalChainModal, setShowExperimentalChainModal] =
+    useState(false);
+  const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
+    useState<'in-progress' | 'completed' | null>(null);
+  const { connect } = useWallets();
+  const { list, error, handleClick } = useWalletList({
+    config,
+    chain,
+    onBeforeConnect: setOpenWalletStateModal,
+    onConnect: () =>
+      setTimeout(() => setOpenWalletStateModal(''), TIME_TO_CLOSE_MODAL),
+  });
+  const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
+  const numberOfSupportedWallets = list.length;
+  const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
+
+  const addExperimentalChain = async (wallet: Wallet) => {
+    setShowExperimentalChainModal(false);
+    setAddingExperimentalChainStatus('in-progress');
+    await connect(wallet.walletType, wallet.chain);
+    setAddingExperimentalChainStatus('completed');
+  };
+
+  useEffect(() => {
+    setSortedList((sortedList) => {
+      const selectedWalletIndex = list.findIndex((wallet) =>
+        isSelected(wallet.type, chain)
+      );
+
+      if (shouldShowMoreWallets && selectedWalletIndex > 1) {
+        return [list[selectedWalletIndex]].concat(
+          list.filter((_, index) => index !== selectedWalletIndex)
+        );
+      }
+      return sortedList.map(
+        (sortedItem) =>
+          list.find((listItem) => listItem.type === sortedItem.type) ??
+          sortedItem
+      );
+    });
+  }, [JSON.stringify(list)]);
+
+  const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    if (addingExperimentalChainStatus === 'completed') {
+      timeout = setTimeout(
+        () => setAddingExperimentalChainStatus(null),
+        TIME_TO_CLOSE_MODAL
+      );
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [addingExperimentalChainStatus]);
+
+  return (
+    <>
+      {sortedList.slice(0, limit).map((wallet) => {
+        const address = getAddress({
+          connectedWallets,
+          walletType: wallet.type,
+          chain,
+        });
+        const conciseAddress = address ? getConciseAddress(address) : '';
+
+        const experimentalChain = isExperimentalChain(blockchains, chain);
+
+        const experimentalChainNotAdded = !connectedWallets.find(
+          (connectedWallet) =>
+            connectedWallet.walletType === wallet.type &&
+            connectedWallet.chain === chain
+        );
+
+        const couldAddExperimentalChain =
+          experimentalChain &&
+          experimentalChainNotAdded &&
+          wallet.state === WalletState.CONNECTED;
+
+        const connectedWalletDescription = couldAddExperimentalChain
+          ? `Add ${chain} chain`
+          : conciseAddress;
+
+        const onClick = () => {
+          if (wallet.state === WalletState.DISCONNECTED) {
+            void handleClick(wallet.type);
+          } else if (couldAddExperimentalChain) {
+            setExperimentalChainWallet({
+              walletType: wallet.type,
+              chain,
+              address: address ?? '',
+            });
+            setShowExperimentalChainModal(true);
+          } else {
+            selectWallet({
+              walletType: wallet.type,
+              chain,
+              address: address ?? '',
+            });
+          }
+        };
+
+        const blockchainDisplayName: string | undefined =
+          experimentalChainWallet?.chain
+            ? getBlockchainDisplayNameFor(
+                experimentalChainWallet.chain,
+                blockchains
+              )
+            : undefined;
+        return (
+          <>
+            {openWalletStateModal === wallet.type && (
+              <WalletModal
+                open={openWalletStateModal === wallet.type}
+                onClose={() => setOpenWalletStateModal('')}
+                image={wallet.image}
+                state={wallet.state}
+                error={error}
+              />
+            )}
+            {!!experimentalChainWallet && (
+              <Modal
+                open={!!experimentalChainWallet && showExperimentalChainModal}
+                container={modalContainer}
+                onClose={() => {
+                  setExperimentalChainWallet(null);
+                }}>
+                <MessageBox
+                  title={`Add ${blockchainDisplayName} Chain`}
+                  type="warning"
+                  description={`You should connect a ${blockchainDisplayName} supported wallet or choose a different ${blockchainDisplayName} address`}>
+                  <Divider size={18} />
+                  <Divider size={32} />
+                  <Button
+                    onClick={addExperimentalChain.bind(
+                      null,
+                      experimentalChainWallet
+                    )}
+                    variant="outlined"
+                    type="primary"
+                    fullWidth
+                    size="large">
+                    Confirm
+                  </Button>
+                </MessageBox>
+              </Modal>
+            )}
+            {addingExperimentalChainStatus && (
+              <Modal
+                open={!!addingExperimentalChainStatus}
+                onClose={setAddingExperimentalChainStatus.bind(null, null)}
+                container={modalContainer}>
+                {addingExperimentalChainStatus === 'in-progress' ? (
+                  <MessageBox
+                    type="loading"
+                    title={`Add ${blockchainDisplayName} Chain`}
+                    description={`You should connect a ${blockchainDisplayName} supported wallet or choose a different ${blockchainDisplayName} address.`}
+                    icon={
+                      <LogoContainer>
+                        <WalletImageContainer>
+                          <Image src={wallet.image} size={45} />
+                        </WalletImageContainer>
+                        <Spinner />
+                      </LogoContainer>
+                    }
+                  />
+                ) : (
+                  <MessageBox
+                    type="success"
+                    title={`${blockchainDisplayName} Chain Added`}
+                    description={`${blockchainDisplayName} is added to your wallet, you can use it to swap.`}
+                  />
+                )}
+                <Divider direction="vertical" size={32} />
+              </Modal>
+            )}
+            <SelectableWallet
+              key={wallet.type}
+              description={connectedWalletDescription}
+              onClick={onClick}
+              selected={isSelected(wallet.type, chain)}
+              {...wallet}
+            />
+          </>
+        );
+      })}
+      {shouldShowMoreWallets && (
+        <WalletButton selected={false} onClick={onShowMore.bind(null)}>
+          <Typography variant="label" size="medium">
+            Show more wallets
+            <Typography variant="label" size="medium" color="$primary">
+              &nbsp;+{numberOfSupportedWallets - (limit ?? 0)}
+            </Typography>
+          </Typography>
+        </WalletButton>
+      )}
+    </>
+  );
+}

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -0,0 +1,12 @@
+import type { Wallet, WidgetConfig } from '../../types';
+
+export type PropTypes = {
+  chain: string;
+  supportedWallets: WidgetConfig['wallets'];
+  isSelected: (walletType: string, chain: string) => boolean;
+  selectWallet: (wallet: Wallet) => void;
+  multiWallets: boolean;
+  config?: WidgetConfig;
+  limit?: number;
+  onShowMore: () => void;
+};

package/src/components/HeaderButtons/BackButton.tsx

@@ -0,0 +1,16 @@
+import type { PropTypes } from './HeaderButtons.types';
+
+import { ChevronLeftIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { HeaderButton } from './HeaderButtons.styles';
+
+function BackButton(props: PropTypes) {
+  return (
+    <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
+      <ChevronLeftIcon color="black" size={16} />
+    </HeaderButton>
+  );
+}
+
+export { BackButton };

package/src/components/HeaderButtons/CancelButton.tsx

@@ -0,0 +1,21 @@
+import type { PropTypes } from './HeaderButtons.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { SuffixContainer } from './HeaderButtons.styles';
+
+function CancelButton(props: PropTypes) {
+  return (
+    <SuffixContainer>
+      <Button variant="ghost" onClick={props.onClick} size="xsmall">
+        <Typography variant="label" size="medium" color="error500">
+          {i18n.t('Cancel')}
+        </Typography>
+      </Button>
+    </SuffixContainer>
+  );
+}
+
+export { CancelButton };

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -0,0 +1,40 @@
+import { Button, darkTheme, styled } from '@rango-dev/ui';
+
+export const HeaderButton = styled(Button, {
+  width: '$24',
+  position: 'relative',
+  padding: '0',
+  overflow: 'unset',
+});
+
+export const ConnectedIcon = styled('div', {
+  position: 'absolute',
+  background: '$secondary500',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$secondary400',
+  },
+  width: '$6',
+  height: '$6',
+  borderRadius: '$lg',
+  right: '$4',
+  border: '1px solid $surface100',
+});
+
+export const SuffixContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  width: '$40',
+});
+
+export const NotificationsBadgeContainer = styled('div', {
+  position: 'absolute',
+  backgroundColor: '$secondary500',
+  width: '14px',
+  height: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '7px',
+  top: '$0',
+  right: '$0',
+});

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -0,0 +1,11 @@
+export interface PropTypes {
+  onClick: () => void;
+  isConnected?: boolean;
+}
+export interface HomeButtonsPropTypes {
+  layoutRef: HTMLDivElement | null;
+  onClickRefresh?: () => void;
+  onClickHistory?: () => void;
+  onClickSettings?: () => void;
+  onClickNotifications?: () => void;
+}

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -0,0 +1,68 @@
+import type { HomeButtonsPropTypes } from './HeaderButtons.types';
+
+import { i18n } from '@lingui/core';
+import {
+  NotificationsIcon,
+  Popover,
+  RefreshIcon,
+  SettingsIcon,
+  Tooltip,
+  TransactionIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { NotificationContent } from '../NotificationContent';
+
+import { HeaderButton } from './HeaderButtons.styles';
+import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
+
+export function HomeButtons(props: HomeButtonsPropTypes) {
+  const {
+    layoutRef,
+    onClickRefresh,
+    onClickHistory,
+    onClickSettings,
+    onClickNotifications,
+  } = props;
+
+  return (
+    <>
+      <Tooltip side="top" content={i18n.t('Refresh')}>
+        <HeaderButton
+          variant="ghost"
+          size="small"
+          onClick={onClickRefresh}
+          disabled={!onClickRefresh}>
+          <RefreshIcon size={16} color={!onClickRefresh ? 'gray' : 'black'} />
+        </HeaderButton>
+      </Tooltip>
+
+      <Tooltip side="top" content={i18n.t('Notifications')}>
+        <Popover
+          align="center"
+          collisionBoundary={layoutRef}
+          collisionPadding={{ right: 20, left: 20 }}
+          container={document.getElementById('swap-box') as HTMLElement}
+          content={<NotificationContent />}>
+          <HeaderButton
+            size="small"
+            variant="ghost"
+            onClick={onClickNotifications}>
+            <NotificationsIcon size={18} color="black" />
+            <UnreadNotificationsBadge />
+          </HeaderButton>
+        </Popover>
+      </Tooltip>
+      <Tooltip side="top" content={i18n.t('Settings')}>
+        <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
+          <SettingsIcon size={18} color="black" />
+        </HeaderButton>
+      </Tooltip>
+      <Tooltip side="top" content={i18n.t('Transactions History')}>
+        <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
+          <TransactionIcon size={18} color="black" />
+        </HeaderButton>
+      </Tooltip>
+    </>
+  );
+}

package/src/components/HeaderButtons/UnreadNotificationsBadge.tsx

@@ -0,0 +1,20 @@
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useNotificationStore } from '../../store/notification';
+
+import { NotificationsBadgeContainer } from './HeaderButtons.styles';
+
+export function UnreadNotificationsBadge() {
+  const { getUnreadNotifications } = useNotificationStore();
+
+  const notificationsCount = getUnreadNotifications().length;
+
+  return notificationsCount ? (
+    <NotificationsBadgeContainer>
+      <Typography variant="body" size="xsmall" color="$background">
+        {notificationsCount}
+      </Typography>
+    </NotificationsBadgeContainer>
+  ) : null;
+}

package/src/components/HeaderButtons/WalletButton.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './HeaderButtons.types';
+
+import { i18n } from '@lingui/core';
+import { Tooltip, WalletIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { ConnectedIcon, HeaderButton } from './HeaderButtons.styles';
+
+function WalletButton(props: PropTypes) {
+  return (
+    <Tooltip side="top" content={i18n.t('Connect Wallet')}>
+      <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
+        {props.isConnected && <ConnectedIcon />}
+        <WalletIcon size={18} color="black" />
+      </HeaderButton>
+    </Tooltip>
+  );
+}
+
+export { WalletButton };

package/src/components/HeaderButtons/index.ts

@@ -0,0 +1,4 @@
+export { BackButton } from './BackButton';
+export { CancelButton } from './CancelButton';
+export { WalletButton } from './WalletButton';
+export { HomeButtons } from './HomeButtons';

package/src/components/Layout/Layout.styles.ts

@@ -0,0 +1,50 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '$primary',
+  overflow: 'hidden !important',
+  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+  width: '95vw',
+  maxWidth: '390px',
+  maxHeight: '700px',
+  variants: {
+    fixedHeight: {
+      true: {
+        height: '95vh',
+      },
+      false: {
+        height: 'auto',
+      },
+    },
+  },
+});
+export const Content = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  padding: '$20 $20 $10 $20',
+  backgroundColor: '$background',
+  position: 'relative',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  variants: {
+    noPadding: {
+      true: {
+        padding: '0',
+      },
+    },
+  },
+});
+
+export const Footer = styled('div', {
+  backgroundColor: '$background',
+  '& .footer__content': {
+    padding: '$0 $20',
+  },
+  '& .footer__logo': {
+    padding: '$0 $20 $10 $20',
+  },
+});

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,72 @@
+import type { PropTypes, Ref } from './Layout.types';
+import type { PropsWithChildren } from 'react';
+
+import { BottomLogo, Divider, Header } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
+import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
+
+import { Container, Content, Footer } from './Layout.styles';
+
+function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
+  const {
+    children,
+    header,
+    footer,
+    noPadding,
+    hasLogo = true,
+    fixedHeight = true,
+  } = props;
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+
+  const connectWalletsButtonDisabled =
+    useUiStore.use.connectWalletsButtonDisabled();
+  const navigate = useNavigate();
+
+  const onConnectWallet = () => {
+    if (!connectWalletsButtonDisabled) {
+      navigate('/' + navigationRoutes.wallets);
+    }
+  };
+  return (
+    <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
+      <Header
+        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
+        title={header.title}
+        suffix={
+          <>
+            {header.suffix}
+            {header.hasConnectWallet && (
+              <WalletButton
+                onClick={onConnectWallet}
+                isConnected={!!connectedWallets?.length}
+              />
+            )}
+            {header.onCancel && <CancelButton onClick={header.onCancel} />}
+          </>
+        }
+      />
+      <Content noPadding={noPadding}>{children}</Content>
+      {(hasLogo || footer) && (
+        <Footer>
+          <div className="footer__content">{footer}</div>
+          {hasLogo && (
+            <div className="footer__logo">
+              <Divider size={12} />
+              <BottomLogo />
+            </div>
+          )}
+        </Footer>
+      )}
+    </Container>
+  );
+}
+
+const Layout = React.forwardRef(LayoutComponent);
+Layout.displayName = 'Layout';
+
+export { Layout };

package/src/components/Layout/Layout.types.ts

@@ -0,0 +1,20 @@
+export interface PropTypes {
+  header: {
+    title: string;
+    hasConnectWallet?: boolean;
+    hasSettings?: boolean;
+    suffix?: React.ReactNode;
+    onBack?: () => void;
+    onCancel?: () => void;
+  };
+  hasLogo?: boolean;
+  footer?: React.ReactNode;
+  noPadding?: boolean;
+  fixedHeight?: boolean;
+}
+
+export type Ref =
+  | ((instance: HTMLDivElement | null) => void)
+  | React.RefObject<HTMLDivElement>
+  | null
+  | undefined;

package/src/components/Layout/index.ts

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

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.styles.ts

@@ -0,0 +1,5 @@
+import { ListItem, styled } from '@rango-dev/ui';
+
+export const CustomeListItem = styled(ListItem, {
+  height: 61,
+});

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.tsx

@@ -0,0 +1,23 @@
+import { Checkbox, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { LiquiditySourceList } from '../SettingsContainer';
+
+import { CustomeListItem } from './LoadingLiquiditySourceList.styles';
+
+const ITEM_SKELETON_COUNT = 30;
+export function LoadingLiquiditySourceList() {
+  return (
+    <LiquiditySourceList>
+      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
+        <CustomeListItem
+          hasDivider
+          key={e}
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          title={<Skeleton variant="text" size="large" width={90} />}
+          end={<Checkbox checked={false} />}
+        />
+      ))}
+    </LiquiditySourceList>
+  );
+}

package/src/components/LoadingLiquiditySourceList/index.ts

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