@rango-dev/ui 0.1.10-next.78 → 0.1.10-next.81

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,5 +1,5 @@
 import { BestRouteResponse } from 'rango-sdk';
-import React, { Fragment, PropsWithChildren } from 'react';
+import React, { Fragment, PropsWithChildren, ReactNode } from 'react';
 import { Alert } from '../../components/Alert';
 import { Button } from '../../components/Button';
 import { RetryIcon, GasIcon } from '../../components/Icon';
@@ -8,6 +8,10 @@ import { StepDetail } from '../../components/StepDetail';
 import { Typography } from '../../components/Typography';
 import { styled } from '../../theme';
 
+const MainContainer = styled('div', {
+  overflow: 'hidden',
+});
+
 export const Line = styled('div', {
   width: '0',
   marginLeft: '$12',
@@ -68,24 +72,38 @@ export const StyledUpdateIcon = styled(UpdateIcon, {
   cursor: 'pointer',
 });
 
+const BestRouteContainer = styled('div', {
+  overflow: 'auto',
+});
+
 const Alerts = styled('div', { paddingBottom: '$16' });
 
 export interface PropTypes {
   bestRoute: BestRouteResponse | null;
+  onRefresh?: React.MouseEventHandler<SVGElement>;
+  confirmButtonTitle: string;
+  confirmButtonDisabled: boolean;
   onBack: () => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   loading?: boolean;
-  error?: string;
-  warning?: string;
+  errors?: ReactNode[];
+  warnings?: ReactNode[];
+  extraMessages?: ReactNode;
 }
-export function ConfirmSwap({
-  bestRoute,
-  onBack,
-  onConfirm,
-  loading,
-  error,
-  warning,
-}: PropsWithChildren<PropTypes>) {
+export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
+  const {
+    bestRoute,
+    onRefresh,
+    onBack,
+    onConfirm,
+    loading,
+    errors,
+    warnings,
+    extraMessages,
+    confirmButtonTitle,
+    confirmButtonDisabled,
+  } = props;
+
   return (
     <SecondaryPage
       textField={false}
@@ -99,56 +117,76 @@ export function ConfirmSwap({
             loading={loading}
             variant="contained"
             onClick={onConfirm}
+            disabled={confirmButtonDisabled}
           >
-            Swap
+            {confirmButtonTitle}
           </Button>
         </Footer>
       }
-      Content={bestRoute?.result?.swaps.map((swap, index) => (
-        <Fragment key={index}>
+      TopButton={<StyledUpdateIcon size={24} onClick={onRefresh} />}
+    >
+      <MainContainer>
+        <div>
+          {extraMessages || null}
           <Alerts>
-            {error && <Alert description={error} type="error" />}
-            {warning && <Alert description={warning} type="warning" />}
+            {errors?.map((error, index) => (
+              <Alert type="error" key={index}>
+                {error}
+              </Alert>
+            ))}
+            {/* {error && warnings && <Spacer direction="vertical" size={16} />} */}
+            {warnings?.map((warning, index) => (
+              <Alert type="warning" key={index}>
+                {warning}
+              </Alert>
+            ))}
           </Alerts>
-          {index === 0 && (
-            <RelativeContainer>
+        </div>
+        <BestRouteContainer>
+          {bestRoute?.result?.swaps.map((swap, index) => (
+            <Fragment key={index}>
+              {index === 0 && (
+                <RelativeContainer>
+                  <StepDetail
+                    logo={swap.from.logo}
+                    symbol={swap.from.symbol}
+                    chainLogo={swap.from.blockchainLogo}
+                    blockchain={swap.from.blockchain}
+                    amount={swap.fromAmount}
+                  />
+                  <Dot />
+                </RelativeContainer>
+              )}
+              <Line />
+              <SwapperContainer>
+                <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
+                <div>
+                  <Typography ml={4} variant="caption">
+                    {swap.swapperType} from {swap.from.symbol} to{' '}
+                    {swap.to.symbol} via {swap.swapperId}{' '}
+                  </Typography>
+                  <Fee>
+                    <GasIcon />
+                    <Typography ml={4} variant="caption">
+                      {parseFloat(swap.fee[0].amount).toFixed(6)} estimated gas
+                      fee
+                    </Typography>
+                  </Fee>
+                </div>
+              </SwapperContainer>
+              <Line />
+              {index + 1 === bestRoute.result?.swaps.length && <ArrowDown />}
               <StepDetail
-                logo={swap.from.logo}
-                symbol={swap.from.symbol}
-                chainLogo={swap.from.blockchainLogo}
-                blockchain={swap.from.blockchain}
-                amount={swap.fromAmount}
+                logo={swap.to.logo}
+                symbol={swap.to.symbol}
+                chainLogo={swap.to.blockchainLogo}
+                blockchain={swap.to.blockchain}
+                amount={swap.toAmount}
               />
-              <Dot />
-            </RelativeContainer>
-          )}
-          <Line />
-          <SwapperContainer>
-            <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
-            <div>
-              <Typography ml={4} variant="caption">
-                {swap.swapperType} from {swap.from.symbol} to {swap.to.symbol}{' '}
-                via {swap.swapperId}{' '}
-              </Typography>
-              <Fee>
-                <GasIcon />
-                <Typography ml={4} variant="caption">
-                  {parseFloat(swap.fee[0].amount).toFixed(6)} estimated gas fee
-                </Typography>
-              </Fee>
-            </div>
-          </SwapperContainer>
-          <Line />
-          {index + 1 === bestRoute.result?.swaps.length && <ArrowDown />}
-          <StepDetail
-            logo={swap.to.logo}
-            symbol={swap.to.symbol}
-            chainLogo={swap.to.blockchainLogo}
-            blockchain={swap.to.blockchain}
-            amount={swap.toAmount}
-          />
-        </Fragment>
-      ))}
-    />
+            </Fragment>
+          ))}
+        </BestRouteContainer>
+      </MainContainer>
+    </SecondaryPage>
   );
 }

package/src/containers/ConfirmWallets/ConfirmWallets.tsx

@@ -5,9 +5,8 @@ import { Button } from '../../components/Button';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { SelectableWalletList } from '../../components/SelectableWalletList';
 import { Typography } from '../../components/Typography';
-import { decimalNumber } from '../../helper';
 import { styled } from '../../theme';
-import { SelectableWallet } from './types';
+import { SelectableWallet } from '../../types';
 
 const Footer = styled('div', {
   display: 'flex',
@@ -18,8 +17,14 @@ const AlertContainer = styled('div', {
   padding: '$16 0',
 });
 
+const ConfirmButton = styled(Button, {
+  marginTop: '$16',
+});
+
 export interface PropTypes {
   swap: BestRouteResponse;
+  fromAmount: string;
+  toAmount: string;
   onBack: () => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   confirmDisabled?: boolean;
@@ -30,24 +35,25 @@ export interface PropTypes {
   isExperimentalChain?: (wallet: string) => boolean;
   handleConnectChain?: (wallet: string) => void;
 }
-export function ConfirmWallets({
-  onBack,
-  loading,
-  onConfirm,
-  swap,
-  requiredWallets,
-  selectableWallets,
-  onChange,
-  confirmDisabled,
-  isExperimentalChain,
-  handleConnectChain,
-}: PropsWithChildren<PropTypes>) {
+export function ConfirmWallets(props: PropsWithChildren<PropTypes>) {
+  const {
+    onBack,
+    loading,
+    onConfirm,
+    swap,
+    requiredWallets,
+    selectableWallets,
+    onChange,
+    confirmDisabled,
+    isExperimentalChain,
+    handleConnectChain,
+    fromAmount,
+    toAmount,
+  } = props;
+
   const firstStep = swap.result?.swaps[0];
   const lastStep = swap.result?.swaps[swap.result?.swaps.length - 1];
 
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
-
   return (
     <SecondaryPage
       textField={false}
@@ -55,7 +61,7 @@ export function ConfirmWallets({
       onBack={onBack}
       Footer={
         <Footer>
-          <Button
+          <ConfirmButton
             fullWidth
             loading={loading}
             type="primary"
@@ -64,51 +70,49 @@ export function ConfirmWallets({
             disabled={confirmDisabled}
           >
             Confirm
-          </Button>
+          </ConfirmButton>
         </Footer>
       }
-      Content={
-        <>
-          <Typography variant="h6" mb={12}>
-            Confirm swap {fromAmount} {lastStep?.from.symbol} (
-            {firstStep?.from.blockchain}) to {toAmount} {lastStep?.to.symbol}{' '}
-            (on {lastStep?.to.blockchain})
-          </Typography>
-          {requiredWallets.map((wallet, index) => {
-            const list = selectableWallets.filter((w) => wallet === w.chain);
-            return (
-              <div key={index}>
-                <Typography variant="body2" mb={12} mt={12}>
-                  {index + 1}) Your {wallet} Wallet
-                </Typography>
-                {list.length === 0 && (
-                  <>
-                    <AlertContainer>
-                      <Alert
-                        type="error"
-                        description={`You should connect a ${wallet} supported wallet`}
-                      />
-                    </AlertContainer>
-                    {isExperimentalChain?.(wallet) && (
-                      <Button
-                        variant="contained"
-                        type="primary"
-                        align="grow"
-                        onClick={() => handleConnectChain?.(wallet)}
-                      >
-                        {`Add ${wallet} chain to Cosmos wallets`}
-                      </Button>
-                    )}
-                  </>
-                )}
-                {list.length != 0 && (
-                  <SelectableWalletList list={list} onChange={onChange} />
-                )}
-              </div>
-            );
-          })}
-        </>
-      }
-    />
+    >
+      <>
+        <Typography variant="h6" mb={12}>
+          Confirm swap {fromAmount} {firstStep?.from.symbol} (
+          {firstStep?.from.blockchain}) to {toAmount} {lastStep?.to.symbol} (on
+          {lastStep?.to.blockchain})
+        </Typography>
+        {requiredWallets.map((wallet, index) => {
+          const list = selectableWallets.filter((w) => wallet === w.chain);
+          return (
+            <div key={index}>
+              <Typography variant="body2" mb={12} mt={12}>
+                {index + 1}) Your {wallet} Wallet
+              </Typography>
+              {list.length === 0 && (
+                <>
+                  <AlertContainer>
+                    <Alert type="error">
+                      <Typography variant="body2">{`You should connect a ${wallet} supported wallet`}</Typography>
+                    </Alert>
+                  </AlertContainer>
+                  {isExperimentalChain?.(wallet) && (
+                    <Button
+                      variant="contained"
+                      type="primary"
+                      align="grow"
+                      onClick={() => handleConnectChain?.(wallet)}
+                    >
+                      {`Add ${wallet} chain to Cosmos wallets`}
+                    </Button>
+                  )}
+                </>
+              )}
+              {list.length != 0 && (
+                <SelectableWalletList list={list} onChange={onChange} />
+              )}
+            </div>
+          );
+        })}
+      </>
+    </SecondaryPage>
   );
 }

package/src/containers/History/History.tsx

@@ -79,7 +79,8 @@ export function History({
       textField={true}
       textFieldPlaceholder="Search By Blockchain Or Token"
       title="History"
-      Content={({ searchedFor }) => {
+    >
+      {(searchedFor) => {
         const filterSwaps = filteredHistory(list, searchedFor);
         return filterSwaps.length ? (
           <SwapsGroup list={filterSwaps} onSwapClick={onSwapClick} />
@@ -89,6 +90,6 @@ export function History({
           </BodyError>
         );
       }}
-    />
+    </SecondaryPage>
   );
 }

package/src/containers/History/types.tsx

@@ -1,4 +1,12 @@
-import { CosmosTransaction, EvmTransaction, SimulationResult, SolanaTransaction, SwapExplorerUrl, SwapperStatusStep, Transfer } from 'rango-sdk';
+import {
+  CosmosTransaction,
+  EvmTransaction,
+  SimulationResult,
+  SolanaTransaction,
+  SwapExplorerUrl,
+  SwapperStatusStep,
+  Transfer,
+} from 'rango-sdk';
 import {
   MessageSeverity,
   PendingSwapNetworkStatus,
@@ -28,6 +36,7 @@ export type PendingSwapStep = {
   swapperId: string;
   swapperLogo: string;
   swapperType: string;
+  feeInUsd: string;
   expectedOutputAmountHumanReadable: string | null;
   startTransactionTime: number;
   outputAmount: string;

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -63,103 +63,95 @@ export function SwapHistory(props: PropTypes) {
   const { pendingSwap, onBack } = props;
 
   return (
-    <SecondaryPage
-      title="History"
-      textField={false}
-      onBack={onBack}
-      Content={
-        <>
-          {pendingSwap?.steps.map((step, index) => (
-            <Fragment key={index}>
-              {index === 0 && (
-                <RelativeContainer>
-                  <StepDetail
-                    logo={step.fromLogo}
-                    symbol={step.fromSymbol}
-                    chainLogo={step.fromBlockchainLogo}
-                    blockchain={step.fromBlockchain}
-                    amount={pendingSwap.inputAmount}
-                  />
-                  <Dot />
-                </RelativeContainer>
-              )}
-              <Line />
-              <SwapperContainer>
-                <SwapperLogo src={step.swapperLogo} alt={step.swapperId} />
-                <div>
+    <SecondaryPage title="History" textField={false} onBack={onBack}>
+      <>
+        {pendingSwap?.steps.map((step, index) => (
+          <Fragment key={index}>
+            {index === 0 && (
+              <RelativeContainer>
+                <StepDetail
+                  logo={step.fromLogo}
+                  symbol={step.fromSymbol}
+                  chainLogo={step.fromBlockchainLogo}
+                  blockchain={step.fromBlockchain}
+                  amount={pendingSwap.inputAmount}
+                />
+                <Dot />
+              </RelativeContainer>
+            )}
+            <Line />
+            <SwapperContainer>
+              <SwapperLogo src={step.swapperLogo} alt={step.swapperId} />
+              <div>
+                <Typography ml={4} variant="caption">
+                  {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
+                  via {step.swapperId}
+                </Typography>
+                <Fee>
+                  <GasIcon />
                   <Typography ml={4} variant="caption">
-                    {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
-                    via {step.swapperId}
+                    {step.feeInUsd} estimated gas fee
                   </Typography>
-                  <Fee>
-                    <GasIcon />
-                    <Typography ml={4} variant="caption">
-                      {/* {parseFloat(step.fee[0].amount).toFixed(6)} estimated gas */}
-                      fee
-                    </Typography>
-                  </Fee>
-                </div>
-              </SwapperContainer>
-              <div
-                style={{
-                  display: 'flex',
-                }}
-              >
-                <InternalDetailsContainer>
-                  <Line />
-                  {!!step.explorerUrl && (
-                    <div>
-                      {step.explorerUrl.map((item, index) => (
-                        <InternalDetail key={index}>
-                          <DescriptionContainer>
-                            <CheckCircleIcon color="success" />
-                            <Description variant="body2">
-                              {!item.description ? (
-                                <b>View transaction</b>
-                              ) : (
-                                <b>
-                                  {item.description
-                                    .substring(0, 1)
-                                    .toUpperCase()}
-                                  {item.description.substring(1)}
-                                </b>
-                              )}
-                            </Description>
-                          </DescriptionContainer>
-                          <StyledAnchor
-                            href={item.url}
-                            target="_blank"
-                            rel="noreferrer"
-                            key={index}
-                          >
-                            TX-Link
-                          </StyledAnchor>
-                        </InternalDetail>
-                      ))}
-                      {step.status === 'failed' && (
-                        <InternalDetail>
-                          <DescriptionContainer>
-                            <InfoCircleIcon color="error" />
-                            <Error variant="body2">Step failed</Error>
-                          </DescriptionContainer>
-                        </InternalDetail>
-                      )}
-                    </div>
-                  )}
-                </InternalDetailsContainer>
+                </Fee>
               </div>
-              {index + 1 === pendingSwap.steps.length && <ArrowDown />}
-              <StepDetail
-                logo={step.toLogo}
-                symbol={step.toSymbol}
-                chainLogo={step.toBlockchainLogo}
-                blockchain={step.toBlockchain}
-                amount={step.outputAmount}
-              />
-            </Fragment>
-          ))}
-        </>
-      }
-    />
+            </SwapperContainer>
+            <div
+              style={{
+                display: 'flex',
+              }}
+            >
+              <InternalDetailsContainer>
+                <Line />
+                {!!step.explorerUrl && (
+                  <div>
+                    {step.explorerUrl.map((item, index) => (
+                      <InternalDetail key={index}>
+                        <DescriptionContainer>
+                          <CheckCircleIcon color="success" />
+                          <Description variant="body2">
+                            {!item.description ? (
+                              <b>View transaction</b>
+                            ) : (
+                              <b>
+                                {item.description.substring(0, 1).toUpperCase()}
+                                {item.description.substring(1)}
+                              </b>
+                            )}
+                          </Description>
+                        </DescriptionContainer>
+                        <StyledAnchor
+                          href={item.url}
+                          target="_blank"
+                          rel="noreferrer"
+                          key={index}
+                        >
+                          TX-Link
+                        </StyledAnchor>
+                      </InternalDetail>
+                    ))}
+                    {step.status === 'failed' && (
+                      <InternalDetail>
+                        <DescriptionContainer>
+                          <InfoCircleIcon color="error" />
+                          <Error variant="body2">Step failed</Error>
+                        </DescriptionContainer>
+                      </InternalDetail>
+                    )}
+                  </div>
+                )}
+              </InternalDetailsContainer>
+            </div>
+            {index + 1 === pendingSwap.steps.length && <ArrowDown />}
+            <StepDetail
+              logo={step.toLogo}
+              symbol={step.toSymbol}
+              chainLogo={step.toBlockchainLogo}
+              blockchain={step.toBlockchain}
+              amount={step.outputAmount}
+            />
+          </Fragment>
+        ))}
+      </>
+    </SecondaryPage>
   );
 }

package/src/helper/index.ts

@@ -1,23 +1,2 @@
-import { BestRouteResponse } from 'rango-sdk';
-
-export const secondsToString = (s: number): string => {
-  const minutes = parseInt((s / 60).toString()).toString();
-  return `${minutes}`;
-};
-export const totalArrivalTime = (data: BestRouteResponse) =>
-  data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
-
-export const rawFees = (data: BestRouteResponse): string =>
-  (
-    data?.result?.swaps?.flatMap((s) =>
-      s.fee.map((f) => ({ swapperId: s.swapperId, fee: f }))
-    ) || []
-  )
-    .reduce((partialSum, a) => partialSum + parseFloat(a.fee.amount), 0)
-    .toFixed(3);
-
-export const decimalNumber = (number = '0', toFixed: number) =>
-  parseFloat(number).toFixed(toFixed);
-
 export const containsText = (text: string, searchText: string) =>
-  text.toLowerCase().includes(searchText.toLowerCase());
+  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;

package/src/types/wallet.ts

@@ -18,3 +18,12 @@ export type WalletInfo = {
   image: string;
   type: WalletType;
 };
+
+export interface SelectableWallet {
+  chain: string;
+  walletType: WalletType;
+  address: string;
+  image: string;
+  selected: boolean;
+  name: string;
+}

package/dist/containers/ConfirmWallets/types.d.ts

@@ -1,9 +0,0 @@
-import { WalletType } from '@rango-dev/wallets-shared';
-export interface SelectableWallet {
-    chain: string;
-    walletType: WalletType;
-    address: string;
-    image: string;
-    selected: boolean;
-    name: string;
-}

package/src/containers/ConfirmWallets/types.ts

@@ -1,10 +0,0 @@
-import { WalletType } from '@rango-dev/wallets-shared';
-
-export interface SelectableWallet {
-  chain: string;
-  walletType: WalletType;
-  address: string;
-  image: string;
-  selected: boolean;
-  name: string;
-}