@rango-dev/ui 0.1.15 → 0.1.16-next.1

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AA4H/D,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAW3D,CAAC;AAEH,eAAO,MAAM,UAAU;;;gEAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;MAkBpB,CAAC"}

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
-export * from './wallet';
-export { BestRouteWithFee } from './swaps';
+export * from './wallet';
+export type { BestRouteWithFee } from './swaps';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAEzB,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/meta.d.ts

@@ -1,23 +1,24 @@
-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';
+//# sourceMappingURL=meta.d.ts.map

package/dist/types/meta.d.ts.map

@@ -0,0 +1 @@
+{"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/types/swaps.d.ts

@@ -1,29 +1,30 @@
-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;
+        })[];
+    };
+};
+//# sourceMappingURL=swaps.d.ts.map

package/dist/types/swaps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACrB,MAAM,WAAW,CAAC;AACnB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,oBAAoB,GACpB,UAAU,CAAC;AAEf,oBAAY,wBAAwB;IAClC,0BAA0B,+BAA+B;IACzD,eAAe,oBAAoB;IACnC,uBAAuB,4BAA4B;IACnD,cAAc,mBAAmB;CAClC;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;QACxC,KAAK,EAAE,CAAC,UAAU,GAAG;YAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,CAAC;KAC/C,CAAC;CACH,CAAC"}

package/dist/types/wallet.d.ts

@@ -1,23 +1,24 @@
-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;
+}
+//# sourceMappingURL=wallet.d.ts.map

package/dist/types/wallet.d.ts.map

@@ -0,0 +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"}

package/package.json

@@ -1,58 +1,39 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.15",
+  "version": "0.1.16-next.1",
   "license": "MIT",
-  "main": "dist/index.js",
+  "type": "module",
+  "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": "node ../../scripts/build/command.mjs --path widget/ui",
+    "type-checking": "tsc --declaration --emitDeclarationOnly",
+    "storybook": "storybook dev -p 3000",
+    "build-storybook": "storybook build",
+    "clean": "rimraf dist"
   },
   "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 +45,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"

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 (