@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/dist/widget/ui/src/theme.d.ts.map

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWnE,CAAC;AAEH,eAAO,MAAM,UAAU;;;gEAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;MAkBpB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JjB,CAAC;AAgBF,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjE,CAAC;AAEL,eAAO,MAAM,UAAU;;;gEAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;MA0BpB,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Token } from 'rango-sdk';
+import type { Token } from 'rango-sdk';
 export type TokenMeta = {
     blockchain: string;
     symbol: string;

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,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,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"}

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

@@ -1,4 +1,4 @@
-import { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
+import type { 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';

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

@@ -1 +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"}
+{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,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/widget/ui/src/types/wallet.d.ts

@@ -1,26 +1,4 @@
-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;
-}
+import type { WalletType } from '@rango-dev/wallets-shared';
 interface Wallet {
     chain: string;
     address: string;

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,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.15.1-next.2",
+  "version": "0.15.1-next.21",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "yarn bundle --watch",
     "build": "node ../../scripts/build/command.mjs --path widget/ui",
+    "build:icons": "svgr svgs/resources/fill --config-file svgs/configs/.svgrrc.default.cjs",
     "type-checking": "tsc --declaration --emitDeclarationOnly",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
@@ -30,12 +31,14 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-essentials": "^7.1.1",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^7.0.9",
-    "@storybook/addons": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-webpack5": "^7.0.9",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/addons": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+    "@svgr/cli": "^8.0.1",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
@@ -46,7 +49,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "storybook": "^7.0.9",
+    "storybook": "^7.1.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.1",
     "typescript": "^4.8.4"
@@ -55,10 +58,12 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@radix-ui/react-checkbox": "^1.0.1",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.6",
     "@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.15.1-next.1",
+    "@rango-dev/wallets-shared": "^0.15.1-next.4",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.35",

package/readme.md

@@ -1 +1,5 @@
 # @rango-dev/ui
+
+### Icons
+
+Add your svg icon to `svgs/resources/` then run `yarn build:icons`.

package/src/components/Alert/Alert.helpers.ts

@@ -0,0 +1,17 @@
+import type { Type } from './Alert.types';
+
+export const getColor = (type: Type, variant: 'alarm' | 'regular') => {
+  if (variant === 'regular') {
+    return undefined;
+  }
+
+  switch (type) {
+    case 'success':
+    case 'warning':
+    case 'error':
+    case 'info':
+      return `${type}500`;
+    default:
+      return undefined;
+  }
+};

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

@@ -1,16 +1,16 @@
+import type { PropTypes } from './Alert.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
+
 import { Alert } from '.';
-import { PropTypes } from './Alert';
-import { Meta } from '@storybook/react';
-import { Typography } from '../Typography';
 
 export default {
   title: 'Components/Alert',
   component: Alert,
   args: {
     type: 'success',
-    title: 'Alert Title',
-    footer: <Typography variant='body1'>It's a Alert!</Typography>
+    title: 'Please reset your liquidity sources.',
   },
   argTypes: {
     type: {
@@ -18,13 +18,13 @@ export default {
       defaultValue: 'success',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'success', 'warning', 'error'],
+        options: ['success', 'warning', 'error', 'info'],
       },
     },
 
     title: {
       name: 'title',
-      defaultValue: 'Alert Title',
+      defaultValue: 'Swap transaction successfully',
       control: {
         type: 'text',
       },
@@ -32,4 +32,16 @@ export default {
   },
 } as Meta<typeof Alert>;
 
-export const Main = (args: PropTypes) => <Alert {...args} />;
+export const Main = (args: PropTypes) => (
+  <div style={{ width: 350 }}>
+    <Alert
+      {...args}
+      footer="Transaction was not sent. 38.3493  AVAX on Avalanche remain in your wallet."
+    />
+  </div>
+);
+export const WithoutFooter = (args: PropTypes) => (
+  <div style={{ width: 350 }}>
+    <Alert {...args} variant="alarm" />
+  </div>
+);

package/src/components/Alert/Alert.styles.ts

@@ -0,0 +1,166 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '$xs',
+
+  '.title': {
+    display: 'flex',
+    alignItems: 'center',
+    flex: '1 0 0',
+  },
+
+  '.title_typography:first-letter': {
+    textTransform: 'uppercase',
+  },
+
+  '.footer': {
+    paddingTop: '$5',
+    paddingLeft: '$24',
+  },
+  '.description': {
+    $$color: '$colors$neutral900',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral800',
+    },
+    color: '$$color',
+    fontSize: '$10',
+    lineHeight: '$12',
+  },
+  variants: {
+    type: {
+      success: {},
+      warning: {},
+      error: {},
+      info: {},
+      loading: {},
+    },
+    variant: {
+      regular: {
+        padding: '$5',
+        alignItems: 'flex-start',
+        backgroundColor: '$neutral400',
+      },
+      alarm: {
+        padding: '$5 $10',
+        alignItems: 'center',
+        '.title_typography': {
+          fontWeight: '$medium',
+        },
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'warning',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$warning100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      type: 'error',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$error100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      type: 'info',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      type: 'success',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$success100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  ],
+});
+
+export const Main = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  variants: {
+    variant: {
+      regular: {
+        justifyContent: 'space-between',
+      },
+      alarm: {
+        justifyContent: 'flex-start',
+      },
+    },
+  },
+});
+
+export const IconHighlight = styled('div', {
+  borderRadius: '$lg',
+  width: '$20',
+  height: '$20',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  alignSelf: 'flex-start',
+  variants: {
+    type: {
+      success: {
+        $$color: '$colors$success300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success600',
+        },
+        backgroundColor: '$$color',
+      },
+      warning: {
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
+      },
+      error: {
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
+      },
+      info: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
+      },
+      loading: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+});

package/src/components/Alert/Alert.tsx

@@ -1,102 +1,57 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
-import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
-import { Typography } from '../Typography';
-import { styled } from '../../theme';
-import { Divider } from '../Divider';
+import type { PropTypes } from './Alert.types';
+import type { PropsWithChildren } from 'react';
 
-const MainContainer = styled('div', {
-  width: '100%',
-  padding: '$16',
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
-  color: '$neutral800',
+import React from 'react';
 
-  '.main': {
-    display: 'flex',
-    alignItems: 'center',
-  },
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
 
-  '.footer': {
-    paddingTop: '$8',
-  },
-  '&.hasIcon .footer': {
-    paddingLeft: '$32',
-  },
-  variants: {
-    type: {
-      primary: {
-        color: '$primary200',
-      },
-      secondary: {
-        color: '$foreground',
-      },
-      success: {
-        color: '$success300',
-      },
-      warning: {
-        color: '$warning500',
-      },
-      error: {
-        color: '$error300',
-      },
-    },
-  },
-});
-
-export interface PropTypes {
-  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
-  title?: string;
-  footer?: ReactNode;
-}
+import { getColor } from './Alert.helpers';
+import { Container, IconHighlight, Main } from './Alert.styles';
+import AlertIcon from './AlertIcon';
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
-  const { type, children, title } = props;
-
-  const showIcon = (
-    ['error', 'success', 'warning'] as PropTypes['type'][]
-  ).includes(type);
+  const {
+    type,
+    title,
+    footer,
+    action,
+    containerStyles,
+    variant = 'regular',
+  } = props;
+  const isFooterString = typeof footer === 'string';
 
   return (
-    <MainContainer type={type} className={showIcon ? 'hasIcon' : ''}>
-      <div className="main">
-        {showIcon && (
-          <>
-            <div
-              style={{
-                width: '32px',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              {type === 'success' && <CheckCircleIcon color={type} size={24} />}
-              {type === 'warning' && <WarningIcon color={type} size={24} />}
-              {type === 'error' && <InfoCircleIcon color={type} size={24} />}
-              <Divider size={4} direction='horizontal' />
-            </div>
-          </>
-        )}
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'start',
-            flexDirection: 'column',
-            width: '100%',
-          }}
-        >
+    <Container
+      className="_alert"
+      style={containerStyles}
+      type={type}
+      variant={variant}>
+      <Main variant={variant}>
+        <div className="title">
+          <IconHighlight type={type}>
+            <AlertIcon type={type} />
+          </IconHighlight>
+          <Divider direction="horizontal" size={4} />
           {title && (
-            <>
-              <Typography className="title" variant="title" color={type}>
-                {title}
-              </Typography>
-              {!!children && <Divider size={4} />}
-            </>
+            <Typography
+              color={getColor(type, variant)}
+              variant="body"
+              className="title_typography"
+              size={variant === 'regular' ? 'xsmall' : 'small'}>
+              {title}
+            </Typography>
           )}
-          {children}
         </div>
-      </div>
-      {props.footer ? <div className="footer">{props.footer}</div> : null}
-    </MainContainer>
+        {action ? <div>{action}</div> : null}
+      </Main>
+      {footer ? (
+        <div className={`footer ${isFooterString ? 'description' : ''}`}>
+          {footer}
+        </div>
+      ) : null}
+    </Container>
   );
 }
+
+Alert.toString = () => '._alert';

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
+
+export interface PropTypes {
+  type: Type;
+  title?: ReactNode;
+  footer?: ReactNode;
+  action?: ReactNode;
+  variant?: 'alarm' | 'regular';
+  containerStyles?: CSSProperties;
+}

package/src/components/Alert/AlertIcon.tsx

@@ -0,0 +1,28 @@
+import type { PropTypes } from './Alert.types';
+
+import React from 'react';
+
+import {
+  CompleteIcon,
+  ErrorIcon,
+  InfoErrorIcon,
+  WarningIcon,
+} from '../../icons';
+import { Spinner } from '../Spinner';
+
+function AlertIcon(props: Pick<PropTypes, 'type'>) {
+  switch (props.type) {
+    case 'success':
+      return <CompleteIcon color={props.type} size={12} />;
+    case 'warning':
+      return <WarningIcon color={props.type} size={12} />;
+    case 'error':
+      return <ErrorIcon color={props.type} size={12} />;
+    case 'loading':
+      return <Spinner color="info" size={12} />;
+    default:
+      return <InfoErrorIcon color={props.type} size={12} />;
+  }
+}
+
+export default AlertIcon;

package/src/components/Alert/LoadingFailedAlert.tsx

@@ -1,7 +1,11 @@
-import React from 'react';
 import { i18n } from '@lingui/core';
+import React from 'react';
+
 import { Alert } from './Alert';
 
+/**
+ * @deprecated Please use the Alert directly.
+ */
 export function LoadingFailedAlert() {
   return (
     <Alert

package/src/components/Alert/NotFoundAlert.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Alert } from './Alert';
 
 interface PropTypes {
@@ -6,11 +7,14 @@ interface PropTypes {
   searchedFor?: string;
 }
 
+/**
+ * @deprecated Please use the Alert directly.
+ */
 export function NotFoundAlert(props: PropTypes) {
   const { catergory, searchedFor } = props;
   return (
     <Alert
-      type="secondary"
+      type="error"
       title={`${catergory} ${
         searchedFor ? "'" + searchedFor + "'" : ''
       } not found.`}