@rango-dev/ui 0.1.10-next.89 → 0.1.10-next.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.89",
+  "version": "0.1.10-next.90",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/TokenSelector/TokenSelector.tsx

@@ -7,7 +7,7 @@ import { TokenWithAmount } from '../TokenList/TokenList';
 export interface PropTypes {
   list: TokenWithAmount[];
   type?: 'Source' | 'Destination';
-  selected?: TokenWithAmount;
+  selected: TokenWithAmount | null;
   onChange: (token: TokenWithAmount) => void;
   hasHeader?: boolean;
   multiSelect?: boolean;

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,5 +1,5 @@
-import { BestRouteResponse } from 'rango-sdk';
 import React, { Fragment, PropsWithChildren, ReactNode } from 'react';
+import { Spacer } from '../../components';
 import { Alert } from '../../components/Alert';
 import { Button } from '../../components/Button';
 import { RetryIcon, GasIcon } from '../../components/Icon';
@@ -7,6 +7,7 @@ import { SecondaryPage } from '../../components/SecondaryPage/';
 import { StepDetail } from '../../components/StepDetail';
 import { Typography } from '../../components/Typography';
 import { styled } from '../../theme';
+import { BestRouteWithFee } from '../../types/swaps';
 
 const MainContainer = styled('div', {
   overflow: 'hidden',
@@ -77,9 +78,8 @@ const BestRouteContainer = styled('div', {
 });
 
 const Alerts = styled('div', { paddingBottom: '$16' });
-
 export interface PropTypes {
-  bestRoute: BestRouteResponse | null;
+  bestRoute: BestRouteWithFee | null;
   onRefresh?: React.MouseEventHandler<SVGElement>;
   confirmButtonTitle: string;
   confirmButtonDisabled: boolean;
@@ -130,15 +130,20 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
           {extraMessages || null}
           <Alerts>
             {errors?.map((error, index) => (
-              <Alert type="error" key={index}>
-                {error}
-              </Alert>
+              <>
+                <Spacer direction="vertical" />
+                <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>
+              <>
+                <Spacer direction="vertical" />
+                <Alert type="warning" key={index}>
+                  {warning}
+                </Alert>
+              </>
             ))}
           </Alerts>
         </div>
@@ -168,8 +173,7 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
                   <Fee>
                     <GasIcon />
                     <Typography ml={4} variant="caption">
-                      {parseFloat(swap.fee[0].amount).toFixed(6)} estimated gas
-                      fee
+                      ${swap.feeInUsd} estimated gas fee
                     </Typography>
                   </Fee>
                 </div>

package/src/containers/ConfirmWallets/ConfirmWallets.tsx

@@ -22,7 +22,7 @@ const ConfirmButton = styled(Button, {
 });
 
 export interface PropTypes {
-  swap: BestRouteResponse;
+  swap: BestRouteResponse | null;
   fromAmount: string;
   toAmount: string;
   onBack: () => void;
@@ -51,8 +51,8 @@ export function ConfirmWallets(props: PropsWithChildren<PropTypes>) {
     toAmount,
   } = props;
 
-  const firstStep = swap.result?.swaps[0];
-  const lastStep = swap.result?.swaps[swap.result?.swaps.length - 1];
+  const firstStep = swap?.result?.swaps[0];
+  const lastStep = swap?.result?.swaps[swap.result?.swaps.length - 1];
 
   return (
     <SecondaryPage

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -161,7 +161,7 @@ export function SwapHistory(props: PropTypes) {
                   <Fee>
                     <GasIcon />
                     <Typography ml={4} variant="caption">
-                      {step.feeInUsd} estimated gas fee
+                      ${step.feeInUsd} estimated gas fee
                     </Typography>
                   </Fee>
                 </div>

package/src/types/index.ts

@@ -1 +1,3 @@
 export * from './wallet';
+
+export { BestRouteWithFee } from './swaps';

package/src/types/{swaps.tsx → swaps.ts}

@@ -1,6 +1,8 @@
 import {
   BestRouteResponse,
   BlockchainValidationStatus,
+  SimulationResult,
+  SwapResult,
   WalletRequiredAssets,
 } from 'rango-sdk';
 export type SwapStatus = 'running' | 'failed' | 'success';
@@ -34,3 +36,9 @@ export type SwapSavedSettings = {
 export type SimulationAssetAndAmount = WalletRequiredAssets;
 export type SimulationValidationStatus = BlockchainValidationStatus;
 export type BestRouteType = BestRouteResponse;
+
+export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
+  result: Omit<SimulationResult, 'swaps'> & {
+    swaps: (SwapResult & { feeInUsd?: string })[];
+  };
+};

package/src/types/wallet.ts

@@ -17,6 +17,7 @@ export type WalletInfo = {
   name: string;
   image: string;
   type: WalletType;
+  showOnMobile: boolean;
 };
 
 export interface SelectableWallet {