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

package/dist/theme.d.ts

@@ -899,7 +899,119 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
     };
     zIndices: {};
     transitions: {};
-}, DefaultThemeMap, {}>; })[]) => () => string;
+}, DefaultThemeMap, {}>; })[]) => () => string, config: {
+    prefix: "";
+    media: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    theme: {
+        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: {};
+    };
+    themeMap: DefaultThemeMap;
+    utils: {};
+};
 export declare const lightTheme: string & {
     className: string;
     selector: string;
@@ -926,3 +1038,4 @@ export declare const darkTheme: string & {
         s: string;
     };
 }, "">;
+//# sourceMappingURL=theme.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWnE,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 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

@@ -21,3 +21,4 @@ export interface LiquiditySource {
     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

@@ -27,3 +27,4 @@ export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
         })[];
     };
 };
+//# 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

@@ -21,3 +21,4 @@ export interface SelectableWallet {
     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,7 +1,8 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.16-next.0",
+  "version": "0.1.16-next.10",
   "license": "MIT",
+  "type": "module",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -11,10 +12,13 @@
   "scripts": {
     "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",
+    "build": "node ../../scripts/build/command.mjs --path widget/ui",
     "type-checking": "tsc --declaration --emitDeclarationOnly",
     "storybook": "storybook dev -p 3000",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "clean": "rimraf dist",
+    "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
+    "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
   },
   "peerDependencies": {
     "@rango-dev/queue-manager-rango-preset": "*",
@@ -53,10 +57,10 @@
     "@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.14",
+    "@rango-dev/wallets-shared": "^0.1.15-next.5",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
-    "rango-sdk": "^0.1.27",
+    "rango-sdk": "^0.1.29",
     "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",

package/src/components/Alert/index.ts

@@ -1,2 +1,3 @@
 export { Alert } from './Alert';
 export { LoadingFailedAlert } from './LoadingFailedAlert';
+export { NotFoundAlert } from './NotFoundAlert';

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,7 @@
-import { CSSProperties } from '@stitches/react';
+import { CSS } from '@stitches/react';
 import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { styled } from '../../theme';
+import { config, styled } from '../../theme';
 import { CloseIcon } from '../Icon/CloseIcon';
 import { Typography } from '../Typography';
 
@@ -11,7 +11,7 @@ export interface PropTypes {
   onClose: () => void;
   content: React.ReactNode;
   action?: React.ReactNode;
-  containerStyle?: CSSProperties;
+  containerStyle?: CSS<typeof config>;
 }
 
 const BackDrop = styled('div', {
@@ -25,7 +25,6 @@ const BackDrop = styled('div', {
   height: '100vh',
   backgroundColor: 'rgba(0,0,0,.1)',
   zIndex: 10,
-
 });
 
 const ModalContainer = styled('div', {
@@ -48,16 +47,8 @@ const ModalHeader = styled('div', {
   marginBottom: '$16',
 });
 
-
 export function Modal(props: PropTypes) {
-  const {
-    title,
-    content,
-    open,
-    onClose,
-    containerStyle,
-    action,
-  } = props;
+  const { title, content, open, onClose, containerStyle, action } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) onClose();
@@ -71,7 +62,7 @@ export function Modal(props: PropTypes) {
       {open &&
         createPortal(
           <BackDrop onClick={handleBackDropClick}>
-            <ModalContainer style={containerStyle}>
+            <ModalContainer css={containerStyle}>
               <ModalHeader>
                 <Typography variant="h4">{title}</Typography>
                 <Row>
@@ -82,7 +73,7 @@ export function Modal(props: PropTypes) {
               {content}
             </ModalContainer>
           </BackDrop>,
-          document.body
+          document.body,
         )}
     </>
   );

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -77,12 +77,9 @@ export interface PropTypes {
   onChange: (w: SelectableWallet) => void;
 }
 
-export function SelectableWalletList({
-  list,
-  onChange,
-}: PropsWithChildren<PropTypes>) {
+export function SelectableWalletList({ list, onChange }: PropsWithChildren<PropTypes>) {
   const [active, setActive] = useState<string>(
-    list.find((item) => item.selected)?.walletType || ''
+    list.find((item) => item.selected)?.walletType || '',
   );
   const onClick = (w: SelectableWallet) => {
     setActive(w.walletType);
@@ -98,19 +95,11 @@ export function SelectableWalletList({
       {list.map((w, index) => {
         const checked = active === w.walletType;
         return (
-          <Container
-            checked={checked}
-            onClick={onClick.bind(null, w)}
-            key={index}
-          >
+          <Container checked={checked} onClick={onClick.bind(null, w)} key={index}>
             <Image src={w.image} alt={w.walletType} size={24} />
             <Typography variant="body2">{w.name}</Typography>
-            <Typography variant="caption">
-              {getConciseAddress(w.address)}
-            </Typography>
-            <Circle checked={checked}>
-              <SolidCircle checked={checked} />
-            </Circle>
+            <Typography variant="caption">{getConciseAddress(w.address)}</Typography>
+            <Circle checked={checked}>{checked && <SolidCircle checked={checked} />}</Circle>
           </Container>
         );
       })}

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { Alert, Divider } from '../../components';
+import { Alert, Checkbox, Divider, TextField } from '../../components';
 import { Button } from '../../components/Button';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { SelectableWalletList } from '../../components/SelectableWalletList';
@@ -72,6 +72,13 @@ export interface PropTypes {
   errors?: Message[];
   warnings?: Message[];
   extraMessages?: ReactNode;
+  customDestination?: string;
+  checkedDestination: boolean;
+  setDestinationChain: (chain: string) => void;
+  setCustomDestination: (customDestination: string) => void;
+  customDestinationEnabled?: boolean;
+  isValidCustomDestination: (blockchain: string, address: string) => boolean;
+  isWalletRequired?: boolean;
 }
 export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
   const {
@@ -88,8 +95,14 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
     errors,
     warnings,
     extraMessages,
+    customDestination,
+    setCustomDestination,
+    checkedDestination,
+    setDestinationChain,
+    customDestinationEnabled = true,
+    isValidCustomDestination,
+    isWalletRequired,
   } = props;
-console.log(props);
 
   return (
     <SecondaryPage
@@ -104,13 +117,18 @@ console.log(props);
             type="primary"
             variant="contained"
             onClick={onConfirm}
-            disabled={confirmDisabled}
-          >
+            disabled={
+              confirmDisabled ||
+              (!!customDestination &&
+                !isValidCustomDestination(
+                  requiredWallets[requiredWallets.length - 1],
+                  customDestination,
+                ))
+            }>
             {confirmButtonTitle}
           </ConfirmButton>
         </Footer>
-      }
-    >
+      }>
       <MainContainer>
         <div>
           {extraMessages || null}
@@ -121,9 +139,7 @@ console.log(props);
                 <Alert
                   type="error"
                   key={index}
-                  {...(typeof error === 'string'
-                    ? { title: error }
-                    : { children: error })}
+                  {...(typeof error === 'string' ? { title: error } : { children: error })}
                 />
               </React.Fragment>
             ))}
@@ -133,9 +149,7 @@ console.log(props);
                 <Alert
                   type="warning"
                   key={index}
-                  {...(typeof warning === 'string'
-                    ? { title: warning }
-                    : { children: warning })}
+                  {...(typeof warning === 'string' ? { title: warning } : { children: warning })}
                 />
               </React.Fragment>
             ))}
@@ -148,7 +162,6 @@ console.log(props);
             {props.previewRoutes}
           </Section>
         ) : null}
-
         {requiredWallets.map((wallet, index) => {
           const list = selectableWallets.filter((w) => wallet === w.chain);
           return (
@@ -158,28 +171,73 @@ console.log(props);
                 <Divider size={8} direction="horizontal" />
                 <Typography variant="body2">Your {wallet} Wallet</Typography>
               </div>
-              {list.length === 0 && (
+              {list.length === 0 &&
+                (isWalletRequired || (!isWalletRequired && !checkedDestination)) && (
+                  <>
+                    <AlertContainer>
+                      <Alert type="error">
+                        You need to connect a compatible wallet with {wallet}.
+                      </Alert>
+                    </AlertContainer>
+                    {isExperimentalChain?.(wallet) && (
+                      <Button
+                        variant="contained"
+                        type="primary"
+                        align="grow"
+                        onClick={() => handleConnectChain?.(wallet)}>
+                        {`Add ${wallet} chain to Cosmos wallets`}
+                      </Button>
+                    )}
+                  </>
+                )}
+              {list.length != 0 && (
+                <SelectableWalletList
+                  list={list}
+                  onChange={(w) => {
+                    onChange(w);
+                    setDestinationChain('');
+                    setCustomDestination('');
+                  }}
+                />
+              )}
+              {index === requiredWallets.length - 1 && customDestinationEnabled && (
                 <>
-                  <AlertContainer>
-                    <Alert type="error">
-                      You need to connect a compatible wallet with {wallet}.
-                    </Alert>
-                  </AlertContainer>
-                  {isExperimentalChain?.(wallet) && (
-                    <Button
-                      variant="contained"
-                      type="primary"
-                      align="grow"
-                      onClick={() => handleConnectChain?.(wallet)}
-                    >
-                      {`Add ${wallet} chain to Cosmos wallets`}
-                    </Button>
+                  <Divider />
+                  <Checkbox
+                    label={`Choose a custom ${wallet} address`}
+                    checked={checkedDestination}
+                    onCheckedChange={(checked) => {
+                      if (!checked) {
+                        setDestinationChain('');
+                        setCustomDestination('');
+                        list.length && onChange(list[0]);
+                      } else {
+                        setDestinationChain(wallet);
+                      }
+                    }}
+                    id={'custom_destination'}
+                  />
+                  <Divider />
+
+                  {checkedDestination && (
+                    <>
+                      <TextField
+                        placeholder="Your destination address"
+                        value={customDestination}
+                        onChange={(e) => {
+                          setCustomDestination(e.target.value);
+                        }}
+                      />
+                      {!!customDestination &&
+                        !isValidCustomDestination(wallet, customDestination) && (
+                          <AlertContainer>
+                            <Alert type="error">Not a valid {wallet} address.</Alert>
+                          </AlertContainer>
+                        )}
+                    </>
                   )}
                 </>
               )}
-              {list.length != 0 && (
-                <SelectableWalletList list={list} onChange={onChange} />
-              )}
             </Container>
           );
         })}

package/src/theme.ts

@@ -125,7 +125,7 @@ const utils = {
 
 const typedCreateStiches = createStitches as CreateStitches;
 
-export const { styled, css, createTheme, keyframes, globalCss } = typedCreateStiches<
+export const { styled, css, createTheme, keyframes, globalCss, config } = typedCreateStiches<
   '',
   typeof media,
   typeof theme,