@rango-dev/ui 0.1.16-next.2 → 0.1.16-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.16-next.2",
+  "version": "0.1.16-next.4",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",
@@ -57,7 +57,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.15-next.1",
+    "@rango-dev/wallets-shared": "^0.1.15-next.2",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.27",

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>
           );
         })}