@rango-dev/ui 0.14.1-next.0 → 0.15.0

package/dist/widget/ui/src/components/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8CxC,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AASD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,SAAS,qBAyCX"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA6CxC,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AASD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,SAAS,qBAyCX"}

package/dist/widget/ui/src/components/index.d.ts

@@ -12,23 +12,18 @@ export * from './Divider';
 export * from './Drawer';
 export * from './Header';
 export * from './HeaderButtons';
-export * from './HeaderLayout';
 export * from './Icon';
 export * from './Modal';
-export * from './PercentageChange';
 export * from './Radio';
-export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';
 export * from './SwapDetail';
-export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
 export * from './TokenList';
-export * from './TokenPreview';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';

package/dist/widget/ui/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/dist/widget/ui/src/containers/ConfirmSwap/ConfirmSwap.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwap.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/ConfirmSwap/ConfirmSwap.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;;;;AAqC1B,wBAO8B;AAE9B,eAAO,MAAM,IAAI,UAAW,SAAS,sBAOpC,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,SAAS,sBAO5C,CAAC"}
+{"version":3,"file":"ConfirmSwap.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/ConfirmSwap/ConfirmSwap.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;;;;AA8M1B,wBAO8B;AAE9B,eAAO,MAAM,IAAI,UAAW,SAAS,sBAOpC,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,SAAS,sBAO5C,CAAC"}

package/dist/widget/ui/src/containers/index.d.ts

@@ -1,11 +1,9 @@
 export * from './ConfirmSwap';
 export * from './History';
-export * from './HomePanel';
 export * from './SwapHistory';
 export * from './BlockchainSelector';
 export * from './ConnectWalletsModal';
 export * from './LiquiditySourcesSelector';
-export * from './TokenInfo';
 export * from './TokenSelector';
 export * from './Settings';
 export * from './Warnings';

package/dist/widget/ui/src/containers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/dist/widget/ui/src/types/meta.d.ts

@@ -1,4 +1,3 @@
-import { Token } from 'rango-sdk';
 export type TokenMeta = {
     blockchain: string;
     symbol: string;
@@ -22,10 +21,4 @@ export interface LiquiditySource {
     selected: boolean;
 }
 export type LoadingStatus = 'loading' | 'success' | 'failed';
-export interface TokenWithBalance extends Token {
-    balance?: {
-        amount: string;
-        usdValue: string;
-    };
-}
 //# sourceMappingURL=meta.d.ts.map

package/dist/widget/ui/src/types/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../../../src/types/meta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,YAAY,GAAG,KAAK,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,KAAK;IAC7C,OAAO,CAAC,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../../../src/types/meta.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,YAAY,GAAG,KAAK,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC"}

package/dist/widget/ui/src/types/wallet.d.ts

@@ -21,27 +21,4 @@ export interface SelectableWallet {
     selected: boolean;
     name: string;
 }
-interface Wallet {
-    chain: string;
-    address: string;
-    walletType: WalletType;
-}
-export type TokenBalance = {
-    chain: string;
-    symbol: string;
-    ticker: string;
-    address: string | null;
-    rawAmount: string;
-    decimal: number | null;
-    amount: string;
-    logo: string | null;
-    usdPrice: number | null;
-};
-export interface ConnectedWallet extends Wallet {
-    balances: TokenBalance[] | null;
-    loading: boolean;
-    error: boolean;
-    explorerUrl: string | null;
-}
-export {};
 //# sourceMappingURL=wallet.d.ts.map

package/dist/widget/ui/src/types/wallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallet.d.ts","sourceRoot":"","sources":["../../../../../src/types/wallet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,oBAAY,WAAW;IACrB,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EACD,WAAW,CAAC,SAAS,GACrB,WAAW,CAAC,YAAY,GACxB,WAAW,CAAC,UAAU,GACtB,WAAW,CAAC,aAAa,CAAC;IAC9B,WAAW,EAAE,cAAc,GAAG,MAAM,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,MAAM;IAC7C,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B"}
+{"version":3,"file":"wallet.d.ts","sourceRoot":"","sources":["../../../../../src/types/wallet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,oBAAY,WAAW;IACrB,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EACD,WAAW,CAAC,SAAS,GACrB,WAAW,CAAC,YAAY,GACxB,WAAW,CAAC,UAAU,GACtB,WAAW,CAAC,aAAa,CAAC;IAC9B,WAAW,EAAE,cAAc,GAAG,MAAM,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.14.1-next.0",
+  "version": "0.15.0",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -58,7 +58,7 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.14.0",
+    "@rango-dev/wallets-shared": "^0.15.0",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.35",

package/src/components/ColorPicker/ColorPicker.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
+import { ChromePicker } from 'react-color';
+import rgbHex from 'rgb-hex';
+
 import { styled } from '../../theme';
 import { Button } from '../Button';
 import { CloseIcon } from '../Icon';
-import rgbHex from 'rgb-hex';
-import ReactColor from 'react-color';
-
-const { ChromePicker } = ReactColor;
 
 const Container = styled('div', {
   position: 'relative',

package/src/components/index.ts

@@ -12,23 +12,18 @@ export * from './Divider';
 export * from './Drawer';
 export * from './Header';
 export * from './HeaderButtons';
-export * from './HeaderLayout';
 export * from './Icon';
 export * from './Modal';
-export * from './PercentageChange';
 export * from './Radio';
-export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';
 export * from './SwapDetail';
-export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
 export * from './TokenList';
-export * from './TokenPreview';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';

package/src/containers/ConfirmSwap/ConfirmSwap.stories.tsx

@@ -2,7 +2,178 @@ import { Meta } from '@storybook/react';
 import { ConfirmSwap, PropTypes } from './ConfirmSwap';
 import { exampleFor5Wallets, wallets, bestRoute } from './mock';
 import React from 'react';
-import { Divider, RoutesOverview, TokenPreview } from '../../';
+import { Button, Typography, Divider, Image, GasIcon, styled } from '../../';
+import { BestRouteResponse } from 'rango-sdk';
+import { ChevronRightIcon } from '../../components';
+const Box = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  overflow: 'hidden',
+});
+
+const Container = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutral100',
+      },
+      outlined: {
+        border: '1px solid $neutral100',
+      },
+    },
+  },
+
+  defaultVariants: {
+    type: 'filled',
+  },
+
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8',
+    },
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+    '.amount': {
+      width: '30%',
+    },
+  },
+});
+
+const OutputContainer = styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$surface',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8',
+});
+
+const TokenPreview = ({
+  chain,
+  token,
+  ...props
+}: {
+  label: string;
+  amount: string;
+  usdValue?: number;
+  chain: {
+    displayName: string;
+    logo: string;
+  };
+  token: {
+    symbol: string;
+    image: string;
+  };
+}) => (
+  <Box>
+    <Container type={'outlined'}>
+      <div className="head">
+        <Typography variant="body2" color="neutral800">
+          {props.label}
+        </Typography>
+        <div>
+          <Typography
+            variant="caption"
+            color="neutral600"
+            className="usd-value">{`$${props.usdValue}`}</Typography>
+        </div>
+      </div>
+      <div className="form">
+        <Button
+          className="selectors"
+          variant="outlined"
+          prefix={<Image src={chain.logo} size={24} />}
+          align="start"
+          size="large">
+          {chain.displayName}
+        </Button>
+        <Divider size={12} direction="horizontal" />
+        <Button
+          className="selectors"
+          variant="outlined"
+          prefix={<Image src={token.image} size={24} />}
+          size="large"
+          align="start">
+          {token.symbol}
+        </Button>
+        <Divider size={12} direction="horizontal" />
+        <div className="amount">
+          <OutputContainer>
+            <Typography variant="h4">{props.amount}</Typography>
+          </OutputContainer>
+        </div>
+      </div>
+    </Container>
+  </Box>
+);
+const OverviewContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
+  fontSize: '$12',
+
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+const RoutesOverview = (props: { routes: BestRouteResponse; totalFee?: string }) => {
+  const swaps = props.routes.result?.swaps;
+  return (
+    <OverviewContainer>
+      <div className="routes">
+        {swaps?.map((swap, idx) => {
+          const isLast = idx + 1 == swaps.length;
+          return (
+            <React.Fragment key={idx}>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className="fee">
+        <GasIcon size={12} />
+        <Divider size={4} direction="horizontal" />${props.totalFee}
+      </div>
+    </OverviewContainer>
+  );
+};
 
 const previewInputs = () => (
   <>
@@ -15,8 +186,7 @@ const previewInputs = () => (
         symbol: bestRoute?.result?.swaps[0].from.symbol || '',
         image: bestRoute?.result?.swaps[0].from.logo || '',
       }}
-      usdValue={'2'}
-      loadingStatus="success"
+      usdValue={2}
       amount={'2.99'}
       label="From"
     />
@@ -30,8 +200,7 @@ const previewInputs = () => (
         symbol: bestRoute?.result?.swaps[0].to.symbol || '',
         image: bestRoute?.result?.swaps[0].to.logo || '',
       }}
-      usdValue={'2'}
-      loadingStatus="success"
+      usdValue={2}
       amount={'2.99'}
       label="To"
     />

package/src/containers/index.ts

@@ -1,11 +1,9 @@
 export * from './ConfirmSwap';
 export * from './History';
-export * from './HomePanel';
 export * from './SwapHistory';
 export * from './BlockchainSelector';
 export * from './ConnectWalletsModal';
 export * from './LiquiditySourcesSelector';
-export * from './TokenInfo';
 export * from './TokenSelector';
 export * from './Settings';
 export * from './Warnings';

package/src/helper/index.ts

@@ -73,7 +73,7 @@ const colorShade = (col: string, amt: number) => {
 export const generateRangeColors = (
   name: string,
   mode: 'light' | 'dark',
-  color?: string
+  color?: string,
 ) => {
   let colors = { [name]: color };
   if (color) {

package/src/types/meta.ts

@@ -1,5 +1,3 @@
-import { Token } from 'rango-sdk';
-
 export type TokenMeta = {
   blockchain: string;
   symbol: string;
@@ -22,10 +20,3 @@ export interface LiquiditySource {
 }
 
 export type LoadingStatus = 'loading' | 'success' | 'failed';
-
-export interface TokenWithBalance extends Token {
-  balance?: {
-    amount: string;
-    usdValue: string;
-  };
-}

package/src/types/wallet.ts

@@ -28,28 +28,3 @@ export interface SelectableWallet {
   selected: boolean;
   name: string;
 }
-
-interface Wallet {
-  chain: string;
-  address: string;
-  walletType: WalletType;
-}
-
-export type TokenBalance = {
-  chain: string;
-  symbol: string;
-  ticker: string;
-  address: string | null;
-  rawAmount: string;
-  decimal: number | null;
-  amount: string;
-  logo: string | null;
-  usdPrice: number | null;
-};
-
-export interface ConnectedWallet extends Wallet {
-  balances: TokenBalance[] | null;
-  loading: boolean;
-  error: boolean;
-  explorerUrl: string | null;
-}

package/dist/widget/ui/src/components/HeaderLayout/HeaderLayout.d.ts

@@ -1,14 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { LoadingStatus } from '../../types/meta';
-import { ConnectedWallet } from '../../types/wallet';
-interface HeaderLayoutProps {
-    loadingStatus: LoadingStatus;
-    connectedWalletsImages: string[];
-    connectedWallets: ConnectedWallet[];
-    totalBalance: string;
-    fetchingBalance: boolean;
-    onClick: () => void;
-}
-export declare function HeaderLayout({ connectedWalletsImages, loadingStatus, connectedWallets, totalBalance, fetchingBalance, onClick, children, }: PropsWithChildren<HeaderLayoutProps>): React.JSX.Element;
-export {};
-//# sourceMappingURL=HeaderLayout.d.ts.map

package/dist/widget/ui/src/components/HeaderLayout/HeaderLayout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/HeaderLayout/HeaderLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,UAAU,iBAAiB;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AACD,wBAAgB,YAAY,CAAC,EAC3B,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,qBAoCtC"}

package/dist/widget/ui/src/components/HeaderLayout/index.d.ts

@@ -1,2 +0,0 @@
-export { HeaderLayout } from './HeaderLayout';
-//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/HeaderLayout/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/HeaderLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/widget/ui/src/components/PercentageChange/PercentageChange.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-interface PropTypes {
-    showPercentageChange: boolean;
-    percentageChange: string;
-}
-export declare function PercentageChange(props: PropTypes): React.JSX.Element;
-export {};
-//# sourceMappingURL=PercentageChange.d.ts.map

package/dist/widget/ui/src/components/PercentageChange/PercentageChange.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PercentageChange.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PercentageChange/PercentageChange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,SAAS;IACjB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,qBAYhD"}

package/dist/widget/ui/src/components/PercentageChange/index.d.ts

@@ -1,2 +0,0 @@
-export { PercentageChange } from './PercentageChange';
-//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/PercentageChange/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PercentageChange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/widget/ui/src/components/RoutesOverview/RoutesOverview.d.ts

@@ -1,120 +0,0 @@
-import React from 'react';
-import { BestRouteResponse } from 'rango-sdk';
-export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-}, {
-    colors: {
-        primary: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        surface: string;
-        neutral100: string;
-        neutral200: string;
-        neutral300: string;
-        neutral400: string;
-        neutral500: string;
-        neutral600: string;
-        neutral700: string;
-        neutral800: string;
-        neutral900: string;
-        background: string;
-        foreground: string;
-        success: string;
-        success100: string;
-        success300: string;
-        success500: string;
-        success700: string;
-        warning: string;
-        warning100: string;
-        warning300: string;
-        warning500: string;
-        warning700: string;
-        error: string;
-        error100: string;
-        error300: string;
-        error500: string;
-        error700: string;
-        white: string;
-    };
-    space: {
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        10: string;
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        30: string;
-        32: string;
-    };
-    fontSizes: {
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        18: string;
-        20: string;
-        24: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    fonts: {};
-    fontWeights: {
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-    };
-    lineHeights: {};
-    letterSpacings: {};
-    sizes: {
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    borderWidths: {};
-    borderStyles: {};
-    radii: {
-        5: string;
-        10: string;
-    };
-    shadows: {
-        s: string;
-    };
-    zIndices: {};
-    transitions: {};
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-interface PropTypes {
-    routes: BestRouteResponse | null;
-    totalFee?: string;
-}
-export declare function RoutesOverview(props: PropTypes): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=RoutesOverview.d.ts.map

package/dist/widget/ui/src/components/RoutesOverview/RoutesOverview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RoutesOverview.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RoutesOverview/RoutesOverview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAkBpB,CAAC;AAEH,UAAU,SAAS;IACjB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,4BA0B9C"}

package/dist/widget/ui/src/components/RoutesOverview/index.d.ts

@@ -1,2 +0,0 @@
-export { RoutesOverview } from './RoutesOverview';
-//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/RoutesOverview/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RoutesOverview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}