@rango-dev/widget-embedded 0.12.1-next.0 → 0.12.1-next.10

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -0,0 +1,101 @@
+import type { CompleteModalPropTypes } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  TokenAmount,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+
+export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
+  const {
+    open,
+    onClose,
+    status,
+    priceValue,
+    usdValue,
+    token,
+    chain,
+    percentageChange,
+    description,
+    diagnosisUrl,
+  } = props;
+  const navigate = useNavigate();
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={document.getElementById('swap-box') || document.body}>
+      {status === 'success' ? (
+        <MessageBox type="success" title={i18n.t('Swap Successful')}>
+          <TokenAmount
+            direction="vertical"
+            type="output"
+            centerAlign={true}
+            price={{
+              value: priceValue,
+              usdValue,
+            }}
+            token={token}
+            chain={chain}
+            percentageChange={percentageChange}
+          />
+          <Divider size={12} />
+          <Typography
+            variant="body"
+            size="medium"
+            color="neutral900"
+            align="center">
+            {description}
+          </Typography>
+        </MessageBox>
+      ) : (
+        <MessageBox
+          type="error"
+          title={i18n.t('Transaction Failed')}
+          description={description}
+        />
+      )}
+      <Divider size={32} />
+      {status === 'success' && (
+        <Button
+          variant="contained"
+          type="primary"
+          size="large"
+          onClick={() => navigate(navigationRoutes.home)}>
+          <Typography variant="title" size="medium" color="neutral100">
+            {i18n.t('Done')}
+          </Typography>
+        </Button>
+      )}
+      <Divider size={12} />
+      {diagnosisUrl && (
+        <>
+          <Button
+            variant="contained"
+            type="primary"
+            size="large"
+            onClick={() => window.open(diagnosisUrl, '_blank')}>
+            <Typography variant="title" size="medium" color="primary">
+              {i18n.t('Diagnosis')}
+            </Typography>
+          </Button>
+          <Divider size={12} />
+        </>
+      )}
+      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+        <Typography variant="title" size="medium" color="primary">
+          {i18n.t('See Details')}
+        </Typography>
+      </Button>
+    </Modal>
+  );
+}

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -0,0 +1,34 @@
+import type { CancelContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
+  return (
+    <>
+      <Divider size={20} />
+      <MessageBox
+        type="error"
+        title={i18n.t('Transaction Cancel')}
+        description={i18n.t('Are you sure you want to Cancel this swap?')}
+      />
+      <Divider size={32} />
+      <Button
+        variant="contained"
+        type="primary"
+        size="large"
+        onClick={onCancel}>
+        <Typography variant="title" size="medium" color="neutral100">
+          {i18n.t('Yes, Cancel it')}
+        </Typography>
+      </Button>
+      <Divider size={12} />
+      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+        <Typography variant="title" size="medium" color="primary">
+          {i18n.t('No, Continue')}
+        </Typography>
+      </Button>
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx

@@ -0,0 +1,34 @@
+import type { DeleteContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
+  return (
+    <>
+      <Divider size={20} />
+      <MessageBox
+        type="error"
+        title={i18n.t('Delete Transaction')}
+        description={i18n.t('Are you sure you want to delete this swap?')}
+      />
+      <Divider size={32} />
+      <Button
+        variant="contained"
+        type="primary"
+        size="large"
+        onClick={onDelete}>
+        <Typography variant="title" size="medium" color="neutral100">
+          {i18n.t('Yes, Delete it')}
+        </Typography>
+      </Button>
+      <Divider size={12} />
+      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+        <Typography variant="title" size="medium" color="primary">
+          {i18n.t('No, Cancel')}
+        </Typography>
+      </Button>
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -0,0 +1,35 @@
+import type { WalletStateContentProps } from './SwapDetailsModal.types';
+
+import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React from 'react';
+
+import { WalletContainer } from './SwapDetailsModal.styles';
+
+export const WalletStateContent = ({
+  type,
+  title,
+  currentStepWallet,
+  message,
+}: WalletStateContentProps) => {
+  const { connect, getWalletInfo, state: walletState } = useWallets();
+  const walletType = currentStepWallet?.walletType;
+  const isConnected = walletType && walletState(walletType).connected;
+  const state = isConnected ? WalletState.CONNECTED : WalletState.DISCONNECTED;
+  return (
+    <>
+      <MessageBox type={type} title={title} description={message} />
+      {walletType && (
+        <WalletContainer>
+          <Wallet
+            title={getWalletInfo(walletType).name}
+            image={getWalletInfo(walletType).img}
+            type={walletType}
+            state={state}
+            onClick={async () => connect(walletType)}
+          />
+        </WalletContainer>
+      )}
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx

@@ -0,0 +1,22 @@
+import type { ModalNetworkValueTypes } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+
+export const modalNetworkValues: Record<
+  Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>,
+  ModalNetworkValueTypes
+> = {
+  [PendingSwapNetworkStatus.WaitingForNetworkChange]: {
+    type: 'loading',
+    title: i18n.t('Change Network'),
+  },
+  [PendingSwapNetworkStatus.WaitingForConnectingWallet]: {
+    type: 'warning',
+    title: i18n.t('Connect Wallet'),
+  },
+  [PendingSwapNetworkStatus.NetworkChanged]: {
+    type: 'success',
+    title: i18n.t('Network Changed'),
+  },
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '@rango-dev/ui';
+
+export const WalletContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+});

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -0,0 +1,42 @@
+import type { ModalPropTypes } from './SwapDetailsModal.types';
+
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import { Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { CancelContent } from './SwapDetailsModal.Cancel';
+import { DeleteContent } from './SwapDetailsModal.Delete';
+import { modalNetworkValues } from './SwapDetailsModal.helpers';
+import { WalletStateContent } from './SwapDetailsModal.WalletState';
+
+export function SwapDetailsModal(props: ModalPropTypes) {
+  const { state, onClose, onDelete, onCancel, currentStepWallet, message } =
+    props;
+
+  const showWalletStateContent =
+    state === PendingSwapNetworkStatus.WaitingForNetworkChange ||
+    state === PendingSwapNetworkStatus.WaitingForConnectingWallet ||
+    state === PendingSwapNetworkStatus.NetworkChanged;
+
+  return (
+    <Modal
+      open={!!state}
+      onClose={onClose}
+      container={document.getElementById('swap-box') || document.body}>
+      {showWalletStateContent && (
+        <WalletStateContent
+          type={modalNetworkValues[state].type}
+          title={modalNetworkValues[state].title}
+          currentStepWallet={currentStepWallet}
+          message={message}
+        />
+      )}
+      {state === 'delete' && (
+        <DeleteContent onClose={onClose} onDelete={onDelete} />
+      )}
+      {state === 'cancel' && (
+        <CancelContent onClose={onClose} onCancel={onCancel} />
+      )}
+    </Modal>
+  );
+}

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -0,0 +1,53 @@
+import type { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+export type ModalState =
+  | Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>
+  | 'delete'
+  | 'cancel'
+  | null;
+type WalletTypeAndAddress = {
+  walletType: WalletType;
+  address: string;
+};
+export interface ModalPropTypes {
+  onClose: () => void;
+  onCancel: () => void;
+  onDelete: () => void;
+  state: ModalState;
+  currentStepWallet: WalletTypeAndAddress | null;
+  message: string;
+}
+
+export interface CompleteModalPropTypes {
+  open: boolean;
+  onClose: () => void;
+  status: 'success' | 'failed' | null;
+  priceValue: string;
+  usdValue: string;
+  percentageChange: string;
+  chain: {
+    displayName?: string;
+    image: string;
+  };
+  token: {
+    displayName: string;
+    image: string;
+  };
+  description?: string;
+  diagnosisUrl?: string | null;
+}
+
+export interface ModalNetworkValueTypes {
+  type: 'loading' | 'warning' | 'success';
+  title: string;
+}
+
+export interface WalletStateContentProps extends ModalNetworkValueTypes {
+  currentStepWallet: WalletTypeAndAddress | null;
+  message: string;
+}
+
+export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;
+
+export type DeleteContentProps = Pick<ModalPropTypes, 'onClose' | 'onDelete'>;

package/src/components/SwapDetailsModal/index.ts

@@ -0,0 +1,3 @@
+export { SwapDetailsModal } from './SwapDetailsModal';
+export { SwapDetailsCompleteModal } from './SwapDetailsCompleteModal';
+export type { ModalState } from './SwapDetailsModal.types';

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -0,0 +1,26 @@
+import { styled } from '@rango-dev/ui';
+
+export const Group = styled('div', {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Time = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-start',
+  padding: '$2',
+});
+
+export const SwapList = styled('div', {
+  gap: '$10',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const NotFoundContainer = styled('div', {
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -0,0 +1,125 @@
+import type { PropTypes } from './SwapsGroup.types';
+
+import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { limitDecimalPlaces } from '../../utils/numbers';
+
+import { Group, SwapList, Time } from './SwapsGroup.styles';
+
+export function SwapsGroup(props: PropTypes) {
+  const { list, onSwapClick, groupBy, isLoading } = props;
+  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
+
+  if (isLoading) {
+    const swaps = [{}, {}];
+
+    const loadingGroups = [
+      {
+        title: 'Today',
+        swaps,
+      },
+      {
+        title: 'Last month',
+        swaps,
+      },
+    ];
+    return (
+      <>
+        {loadingGroups.map((group) => (
+          <React.Fragment key={group.title}>
+            <Group>
+              <Time>
+                <Typography
+                  variant="label"
+                  size="medium"
+                  color="neutral800"
+                  className="group-title">
+                  {group.title}
+                </Typography>
+              </Time>
+              <Divider size={4} />
+              <SwapList>
+                {group.swaps.map((_, index) => {
+                  const key = index + group.title;
+                  return (
+                    <React.Fragment key={key}>
+                      <SwapListItem isLoading={true} />
+                    </React.Fragment>
+                  );
+                })}
+              </SwapList>
+            </Group>
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {groups
+        .filter((group) => group.swaps.length > 0)
+        .map((group) => (
+          <React.Fragment key={group.title}>
+            <Group>
+              <Time>
+                <Typography
+                  variant="label"
+                  size="medium"
+                  color="neutral800"
+                  className="group-title">
+                  {group.title}
+                </Typography>
+              </Time>
+              <Divider size={4} />
+              <SwapList>
+                {group.swaps.map((swap) => {
+                  const firstStep = swap.steps[0];
+                  const lastStep = swap.steps[swap.steps.length - 1];
+                  return (
+                    <React.Fragment key={swap.requestId}>
+                      <SwapListItem
+                        requestId={swap.requestId}
+                        creationTime={swap.creationTime}
+                        status={swap.status}
+                        onClick={onSwapClick}
+                        onlyShowTime={group.title === 'Today'}
+                        swapTokenData={{
+                          from: {
+                            token: {
+                              image: firstStep.fromLogo,
+                              displayName: firstStep.fromSymbol,
+                            },
+                            blockchain: {
+                              image: firstStep.fromBlockchainLogo || '',
+                            },
+                            amount: limitDecimalPlaces(swap.inputAmount),
+                          },
+                          to: {
+                            token: {
+                              image: lastStep.toLogo,
+                              displayName: lastStep.toSymbol,
+                            },
+                            blockchain: {
+                              image: lastStep.toBlockchainLogo || '',
+                            },
+                            amount: limitDecimalPlaces(
+                              lastStep.outputAmount || ''
+                            ),
+                            estimatedAmount: limitDecimalPlaces(
+                              lastStep.expectedOutputAmountHumanReadable || ''
+                            ),
+                          },
+                        }}
+                      />
+                    </React.Fragment>
+                  );
+                })}
+              </SwapList>
+            </Group>
+          </React.Fragment>
+        ))}
+    </>
+  );
+}

package/src/components/SwapsGroup/SwapsGroup.types.ts

@@ -0,0 +1,13 @@
+import type { PendingSwap } from 'rango-types';
+
+export type GroupBy = (list: PendingSwap[]) => {
+  title: string;
+  swaps: PendingSwap[];
+}[];
+
+export interface PropTypes {
+  list: PendingSwap[];
+  onSwapClick: (requestId: string) => void;
+  groupBy?: GroupBy;
+  isLoading: boolean;
+}

package/src/components/SwapsGroup/index.ts

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

package/src/components/SwitchFromAndTo.tsx

@@ -1,10 +1,11 @@
+import { ReverseIcon, styled } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';
 import { useInRouterContext, useSearchParams } from 'react-router-dom';
-import { styled, Button, VerticalSwapIcon } from '@rango-dev/ui';
+
 import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 
-function SwithFromAndTo({ count }: { count: number }) {
+function SwitchFromAndTo({ count }: { count: number }) {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const outputAmount = useBestRouteStore.use.outputAmount();
@@ -37,24 +38,39 @@ const SwitchButtonContainer = styled('div', {
   bottom: '-12px',
   left: '50%',
   transform: 'translate(-50%, 10%)',
+  cursor: 'pointer',
+});
+
+const StyledButton = styled('div', {
+  borderRadius: '$md',
+  border: '3px solid $background',
+  background: '$neutral100',
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '$foreground',
+  '&:hover': {
+    color: '$secondary500',
+  },
 });
 
-export function SwithFromAndToButton() {
+export function SwitchFromAndToButton() {
   const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
   const isRouterInContext = useInRouterContext();
   const [count, setCount] = useState(0);
 
   return (
     <SwitchButtonContainer>
-      <Button
-        variant="ghost"
+      <StyledButton
         onClick={() => {
           switchFromAndTo();
           setCount((prev) => prev + 1);
         }}>
-        <VerticalSwapIcon size={32} />
-        {isRouterInContext && <SwithFromAndTo count={count} />}
-      </Button>
+        <ReverseIcon size={12} />
+        {isRouterInContext && <SwitchFromAndTo count={count} />}
+      </StyledButton>
     </SwitchButtonContainer>
   );
 }

package/src/components/TokenList/LoadingTokenList.tsx

@@ -0,0 +1,34 @@
+import type { LoadingTokenListProps } from './TokenList.types';
+
+import { Divider, ListItem, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { End, List } from './TokenList.styles';
+
+export function LoadingTokenList(props: LoadingTokenListProps) {
+  return (
+    <List>
+      {Array.from(Array(props.size), (e) => (
+        <ListItem
+          key={e}
+          hasDivider
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          end={
+            <End>
+              <Skeleton variant="text" size="large" width={70} />
+              <Divider size={4} />
+              <Skeleton variant="text" size="medium" width={50} />
+            </End>
+          }
+          title={
+            <div>
+              <Skeleton variant="text" size="large" width={90} />
+              <Divider size={4} />
+              <Skeleton variant="text" size="medium" width={90} />
+            </div>
+          }
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/TokenList/TokenList.helpers.ts

@@ -0,0 +1,13 @@
+import type { TokenWithBalance } from './TokenList.types';
+
+import { containsText } from '../../utils/common';
+
+export const filterTokens = (list: TokenWithBalance[], searchedFor: string) =>
+  list
+    .filter(
+      (token) =>
+        containsText(token.symbol, searchedFor) ||
+        containsText(token.address || '', searchedFor) ||
+        containsText(token.name || '', searchedFor)
+    )
+    .sort((a, b) => (b.pin as any) - (a.pin as any));