@rango-dev/ui 0.1.14 → 0.1.16-next.0

package/dist/types/index.d.ts

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

package/dist/types/meta.d.ts

@@ -1,23 +1,23 @@
-export declare type TokenMeta = {
-    blockchain: string;
-    symbol: string;
-    image: string;
-    address: string | null;
-    usdPrice: number | null;
-    isSecondaryCoin: boolean;
-    coinSource: string | null;
-    coinSourceUrl: string | null;
-    name: string | null;
-    decimals: number;
-    balance?: {
-        amount: string;
-        usdPrice: string;
-    };
-};
-export interface LiquiditySource {
-    title: string;
-    logo: string;
-    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
-    selected: boolean;
-}
-export declare type LoadingStatus = 'loading' | 'success' | 'failed';
+export type TokenMeta = {
+    blockchain: string;
+    symbol: string;
+    image: string;
+    address: string | null;
+    usdPrice: number | null;
+    isSecondaryCoin: boolean;
+    coinSource: string | null;
+    coinSourceUrl: string | null;
+    name: string | null;
+    decimals: number;
+    balance?: {
+        amount: string;
+        usdPrice: string;
+    };
+};
+export interface LiquiditySource {
+    title: string;
+    logo: string;
+    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+    selected: boolean;
+}
+export type LoadingStatus = 'loading' | 'success' | 'failed';

package/dist/types/swaps.d.ts

@@ -1,29 +1,29 @@
-import { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
-export declare type SwapStatus = 'running' | 'failed' | 'success';
-export declare type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
-export declare type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
-export declare enum PendingSwapNetworkStatus {
-    WaitingForConnectingWallet = "waitingForConnectingWallet",
-    WaitingForQueue = "waitingForQueue",
-    WaitingForNetworkChange = "waitingForNetworkChange",
-    NetworkChanged = "networkChanged"
-}
-export declare type WalletTypeAndAddress = {
-    walletType: string;
-    address: string;
-};
-export declare type SwapSavedSettings = {
-    slippage: string;
-    disabledSwappersIds: string[];
-    disabledSwappersGroups: string[];
-};
-export declare type SimulationAssetAndAmount = WalletRequiredAssets;
-export declare type SimulationValidationStatus = BlockchainValidationStatus;
-export declare type BestRouteType = BestRouteResponse;
-export declare type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
-    result: Omit<SimulationResult, 'swaps'> & {
-        swaps: (SwapResult & {
-            feeInUsd?: string;
-        })[];
-    };
-};
+import { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
+export type SwapStatus = 'running' | 'failed' | 'success';
+export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
+export type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
+export declare enum PendingSwapNetworkStatus {
+    WaitingForConnectingWallet = "waitingForConnectingWallet",
+    WaitingForQueue = "waitingForQueue",
+    WaitingForNetworkChange = "waitingForNetworkChange",
+    NetworkChanged = "networkChanged"
+}
+export type WalletTypeAndAddress = {
+    walletType: string;
+    address: string;
+};
+export type SwapSavedSettings = {
+    slippage: string;
+    disabledSwappersIds: string[];
+    disabledSwappersGroups: string[];
+};
+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/dist/types/wallet.d.ts

@@ -1,23 +1,23 @@
-import { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
-export declare enum WalletState {
-    NOT_INSTALLED = "not installed",
-    DISCONNECTED = "disconnected",
-    CONNECTING = "connecting",
-    CONNECTED = "connected"
-}
-export declare type WalletInfo = {
-    state: WalletState.CONNECTED | WalletState.DISCONNECTED | WalletState.CONNECTING | WalletState.NOT_INSTALLED;
-    installLink: InstallObjects | string;
-    name: string;
-    image: string;
-    type: WalletType;
-    showOnMobile: boolean;
-};
-export interface SelectableWallet {
-    chain: string;
-    walletType: WalletType;
-    address: string;
-    image: string;
-    selected: boolean;
-    name: string;
-}
+import { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
+export declare enum WalletState {
+    NOT_INSTALLED = "not installed",
+    DISCONNECTED = "disconnected",
+    CONNECTING = "connecting",
+    CONNECTED = "connected"
+}
+export type WalletInfo = {
+    state: WalletState.CONNECTED | WalletState.DISCONNECTED | WalletState.CONNECTING | WalletState.NOT_INSTALLED;
+    installLink: InstallObjects | string;
+    name: string;
+    image: string;
+    type: WalletType;
+    showOnMobile: boolean;
+};
+export interface SelectableWallet {
+    chain: string;
+    walletType: WalletType;
+    address: string;
+    image: string;
+    selected: boolean;
+    name: string;
+}

package/package.json

@@ -1,58 +1,37 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.14",
+  "version": "0.1.16-next.0",
   "license": "MIT",
-  "main": "dist/index.js",
+  "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "dev": "tsdx watch",
-    "build": "tsdx build  --tsconfig ./tsconfig.json",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build  --tsconfig ./tsconfig.json",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 3000",
-    "build-storybook": "build-storybook"
+    "dev": "yarn bundle --watch",
+    "bundle": "esbuild src/index.ts --bundle --minify --keep-names --sourcemap --outdir=dist --platform=node --format=esm --packages=external",
+    "build": "yarn type-checking && yarn bundle",
+    "type-checking": "tsc --declaration --emitDeclarationOnly",
+    "storybook": "storybook dev -p 3000",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "module": "dist/ui.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/ui.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/ui.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@size-limit/preset-small-lib": "^8.1.0",
-    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/addons": "^7.0.9",
+    "@storybook/react": "^7.0.9",
+    "@storybook/react-webpack5": "^7.0.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
@@ -64,6 +43,7 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "size-limit": "^8.1.0",
+    "storybook": "^7.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.1",
     "typescript": "^4.8.4"
@@ -73,7 +53,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.1.13",
+    "@rango-dev/wallets-shared": "^0.1.14",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.27",

package/src/components/Alert/Alert.stories.tsx

@@ -1,22 +1,35 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
 import { Alert } from '.';
 import { PropTypes } from './Alert';
+import { Meta } from '@storybook/react';
+import { Typography } from '../Typography';
 
 export default {
-  title: 'Alert',
+  title: 'Components/Alert',
   component: Alert,
+  args: {
+    type: 'success',
+    title: 'Alert Title',
+    footer: <Typography variant='body1'>It's a Alert!</Typography>
+  },
   argTypes: {
     type: {
+      name: 'type',
       defaultValue: 'success',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'warning', 'error'],
+      },
     },
+
     title: {
+      name: 'title',
       defaultValue: 'Alert Title',
-    },
-    description: {
-      defaultValue: 'Alert description ...',
+      control: {
+        type: 'text',
+      },
     },
   },
-} as ComponentMeta<typeof Alert>;
+} as Meta<typeof Alert>;
 
 export const Main = (args: PropTypes) => <Alert {...args} />;

package/src/components/Alert/Alert.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
 import { styled } from '../../theme';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 
 const MainContainer = styled('div', {
   width: '100%',
@@ -72,7 +72,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
               {type === 'success' && <CheckCircleIcon color={type} size={24} />}
               {type === 'warning' && <WarningIcon color={type} size={24} />}
               {type === 'error' && <InfoCircleIcon color={type} size={24} />}
-              <Spacer size={4} />
+              <Divider size={4} direction='horizontal' />
             </div>
           </>
         )}
@@ -90,7 +90,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
               <Typography className="title" variant="title" color={type}>
                 {title}
               </Typography>
-              {!!children && <Spacer size={4} direction="vertical" />}
+              {!!children && <Divider size={4} />}
             </>
           )}
           {children}

package/src/components/BestRoute/BestRoute.stories.tsx

@@ -1,27 +1,37 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
 import { BestRoute, PropTypes } from './BestRoute';
 import { bestRoute, bestRouteExample2, bestRouteExample3 } from './mock';
+import { Meta } from '@storybook/react';
 
 export default {
   title: 'Components/Best Route',
   component: BestRoute,
-} as ComponentMeta<typeof BestRoute>;
+} as Meta<typeof BestRoute>;
 
 export const Main = (props: PropTypes) => (
   <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRoute} />
+    <BestRoute {...props} data={bestRoute} totalFee="0.28" totalTime="10:45" />
   </div>
 );
 export const With4Step = (props: PropTypes) => (
   <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRouteExample2} />
+    <BestRoute
+      {...props}
+      data={bestRouteExample2}
+      totalFee="0.28"
+      totalTime="10:45"
+    />
   </div>
 );
 
 export const With2Step = (props: PropTypes) => (
   <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRouteExample3} />
+    <BestRoute
+      {...props}
+      data={bestRouteExample3}
+      totalFee="0.28"
+      totalTime="10:45"
+    />
   </div>
 );
 export const WithError = (props: PropTypes) => (

package/src/components/BestRoute/mock.ts

@@ -174,7 +174,7 @@ export const bestRouteExample2: BestRouteType = {
         warnings: [],
         swapperId: 'ParaSwap Bsc',
         swapperType: 'DEX',
-        swapperLogo: 'https://api.rango.exchange/swappers/para-swap.png',
+        swapperLogo: 'https://api.rango.exchange/swappers/paraswap.svg',
 
         from: {
           symbol: 'USDC',

package/src/components/BlockchainsList/BlockchainsList.stories.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { BlockchainsList, PropTypes } from './BlockchainsList';
 import { blockchainMeta } from './mockData';
 
 export default {
-  title: 'Blockchains List',
+  title: 'Components/Blockchains List',
   component: BlockchainsList,
+  args: {
+    searchedText: '',
+  },
   argTypes: {
     searchedText: {
       type: 'string',
       defaultValue: '',
+      control: {
+        type: 'text',
+      },
     },
   },
-} as ComponentMeta<typeof BlockchainsList>;
+} as Meta<typeof BlockchainsList>;
 
 export const Main = (args: PropTypes) => {
   return (