@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

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

@@ -0,0 +1,34 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const LogoContainer = styled('div', {
+  position: 'relative',
+});
+
+const SpinAnimation = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const Spinner = styled('div', {
+  position: 'absolute',
+  border: '2px solid rgba(0, 0, 0, 0.1)',
+  borderTop: '2px solid $info500',
+  borderRadius: '$lg',
+  width: '$45',
+  height: '$45',
+  animation: `${SpinAnimation} 1s linear infinite`,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+});
+
+export const WalletImageContainer = styled('div', {
+  '& img': {
+    borderRadius: '50%',
+  },
+});

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -0,0 +1,294 @@
+/* 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 { i18n } from '@lingui/core';
+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,
+  TIME_TO_IGNORE_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();
+  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
+  const { list, error, handleClick } = useWalletList({
+    config,
+    chain,
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenWalletStateModal(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: () => {
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
+      }
+      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
+          ? i18n.t({
+              id: 'addChain',
+              message: 'Add {chain} chain',
+              values: { 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 (
+          <>
+            <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={i18n.t({
+                    id: 'addBlockchain',
+                    message: 'Add {blockchainDisplayName} Chain',
+                    values: { blockchainDisplayName },
+                  })}
+                  type="warning"
+                  description={i18n.t({
+                    id: 'addBlockchainDescription',
+                    message:
+                      'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+                    values: { blockchainDisplayName },
+                  })}>
+                  <Divider size={18} />
+                  <Divider size={32} />
+                  <Button
+                    onClick={addExperimentalChain.bind(
+                      null,
+                      experimentalChainWallet
+                    )}
+                    variant="outlined"
+                    type="primary"
+                    fullWidth
+                    size="large">
+                    {i18n.t('Confirm')}
+                  </Button>
+                </MessageBox>
+              </Modal>
+            )}
+            {addingExperimentalChainStatus && (
+              <Modal
+                open={!!addingExperimentalChainStatus}
+                onClose={setAddingExperimentalChainStatus.bind(null, null)}
+                container={modalContainer}>
+                {addingExperimentalChainStatus === 'in-progress' ? (
+                  <MessageBox
+                    type="loading"
+                    title={i18n.t({
+                      id: 'addBlockchain',
+                      message: 'Add {blockchainDisplayName} Chain',
+                      values: { blockchainDisplayName },
+                    })}
+                    description={i18n.t({
+                      id: 'addBlockchainDescription',
+                      message:
+                        'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+                      values: { blockchainDisplayName },
+                    })}
+                    icon={
+                      <LogoContainer>
+                        <WalletImageContainer>
+                          <Image src={wallet.image} size={45} />
+                        </WalletImageContainer>
+                        <Spinner />
+                      </LogoContainer>
+                    }
+                  />
+                ) : (
+                  <MessageBox
+                    type="success"
+                    title={i18n.t({
+                      id: 'blockchainAdded',
+                      message: '{blockchainDisplayName} Chain Added',
+                      values: { blockchainDisplayName },
+                    })}
+                    description={i18n.t({
+                      id: 'blockchainAddedDescription',
+                      message:
+                        '{blockchainDisplayName} is added to your wallet, you can use it to swap.',
+                      values: { blockchainDisplayName },
+                    })}
+                  />
+                )}
+                <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">
+            {i18n.t('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 { darkTheme, IconButton, styled } from '@rango-dev/ui';
+
+export const HeaderButton = styled(IconButton, {
+  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,12 @@
+export interface PropTypes {
+  onClick: () => void;
+  isConnected?: boolean;
+  container?: HTMLElement;
+}
+export interface HomeButtonsPropTypes {
+  layoutRef: HTMLDivElement | null;
+  onClickRefresh?: () => void;
+  onClickHistory?: () => void;
+  onClickSettings?: () => void;
+  onClickNotifications?: () => void;
+}

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -0,0 +1,81 @@
+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 { getContainer } from '../../utils/common';
+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
+        container={getContainer()}
+        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
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Notifications')}>
+        <Popover
+          align="center"
+          collisionBoundary={layoutRef}
+          collisionPadding={{ right: 20, left: 20 }}
+          container={getContainer()}
+          content={<NotificationContent />}>
+          <HeaderButton
+            size="small"
+            variant="ghost"
+            onClick={onClickNotifications}>
+            <NotificationsIcon size={18} color="black" />
+            <UnreadNotificationsBadge />
+          </HeaderButton>
+        </Popover>
+      </Tooltip>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Settings')}>
+        <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
+          <SettingsIcon size={18} color="black" />
+        </HeaderButton>
+      </Tooltip>
+      <Tooltip
+        container={getContainer()}
+        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,23 @@
+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
+      container={props.container}
+      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,53 @@
+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',
+  backgroundColor: '$neutral100',
+  variants: {
+    fixedHeight: {
+      true: {
+        height: '95vh',
+      },
+      false: {
+        height: 'auto',
+      },
+    },
+  },
+});
+export const Content = styled('div', {
+  borderTopLeftRadius: '20px',
+  borderTopRightRadius: '20px',
+  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',
+  },
+});