@daimo/pay 1.15.0 → 1.16.1

package/build/src/components/DaimoPayButton/styles.js

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
 import styled from '../../styles/styled/index.js';
 
-const TextContainer = styled(motion.div) `
+const TextContainer = styled(motion.div)`
   top: 0;
   bottom: 0;
   left: 0;
@@ -10,7 +10,7 @@ const TextContainer = styled(motion.div) `
   justify-content: center;
   white-space: nowrap;
 `;
-styled(motion.div) `
+styled(motion.div)`
   position: relative;
   width: 24px;
   height: 24px;
@@ -20,7 +20,7 @@ styled(motion.div) `
     display: block;
   }
 `;
-styled(motion.div) `
+styled(motion.div)`
   pointer-events: none;
   user-select: none;
   position: relative;
@@ -28,7 +28,7 @@ styled(motion.div) `
   height: 24px;
   margin-right: 8px;
 `;
-styled(motion.div) `
+styled(motion.div)`
   z-index: 1;
   position: absolute;
   inset: 0;

package/build/src/components/DaimoPayButton/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/DaimoPayButton/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;EAQ7C;AAE4B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;EAS9C;AAC2B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;EAO7C;AAEyC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DaimoPayButton/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport styled from \"./../../styles/styled\";\n\nexport const TextContainer = styled(motion.div)`\n  top: 0;\n  bottom: 0;\n  left: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n`;\n\nexport const ChainContainer = styled(motion.div)`\n  position: relative;\n  width: 24px;\n  height: 24px;\n  border-radius: 12px;\n  overflow: hidden;\n  svg {\n    display: block;\n  }\n`;\nexport const IconContainer = styled(motion.div)`\n  pointer-events: none;\n  user-select: none;\n  position: relative;\n  width: 24px;\n  height: 24px;\n  margin-right: 8px;\n`;\n\nexport const UnsupportedNetworkContainer = styled(motion.div)`\n  z-index: 1;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);\n  background: var(--ck-body-color-danger, red);\n  color: #fff;\n  svg {\n    display: block;\n    position: relative;\n    top: -1px;\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUhB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUlB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AASH,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/src/components/DaimoPayModal/ConnectUsing.js

@@ -9,33 +9,59 @@ import Alert from '../Common/Alert/index.js';
 import { contentVariants } from '../Common/Modal/index.js';
 
 const states = {
-    QRCODE: "qrcode",
-    INJECTOR: "injector",
+  QRCODE: "qrcode",
+  INJECTOR: "injector"
 };
 const ConnectUsing = () => {
-    const context = usePayContext();
-    const { pendingConnectorId } = context;
-    const wallet = useWallet(pendingConnectorId ?? "");
-    // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it
-    const isQrCode = !wallet?.isInstalled;
-    const [status, setStatus] = useState(isQrCode ? states.QRCODE : states.INJECTOR);
-    useEffect(() => {
-        // if no provider, change to qrcode
-        const checkProvider = async () => {
-            const res = await wallet?.connector?.getProvider();
-            if (!res) {
-                setStatus(states.QRCODE);
-                setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+  const context = usePayContext();
+  const { pendingConnectorId } = context;
+  const wallet = useWallet(pendingConnectorId ?? "");
+  const isQrCode = !wallet?.isInstalled;
+  const [status, setStatus] = useState(
+    isQrCode ? states.QRCODE : states.INJECTOR
+  );
+  useEffect(() => {
+    const checkProvider = async () => {
+      const res = await wallet?.connector?.getProvider();
+      if (!res) {
+        setStatus(states.QRCODE);
+        setTimeout(context.triggerResize, 10);
+      }
+    };
+    if (status === states.INJECTOR) checkProvider();
+  }, []);
+  if (!wallet) return /* @__PURE__ */ jsx(Alert, { children: "Connector not found" });
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    status === states.QRCODE && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+        children: /* @__PURE__ */ jsx(ConnectWithQRCode, {})
+      },
+      states.QRCODE
+    ),
+    status === states.INJECTOR && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+        children: /* @__PURE__ */ jsx(
+          ConnectWithInjector,
+          {
+            switchConnectMethod: () => {
+              setStatus(states.QRCODE);
             }
-        };
-        if (status === states.INJECTOR)
-            checkProvider();
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    if (!wallet)
-        return jsx(Alert, { children: "Connector not found" });
-    return (jsxs(AnimatePresence, { children: [status === states.QRCODE && (jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsx(ConnectWithQRCode, {}) }, states.QRCODE)), status === states.INJECTOR && (jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsx(ConnectWithInjector, { switchConnectMethod: () => {
-                        setStatus(states.QRCODE);
-                    } }) }, states.INJECTOR))] }));
+          }
+        )
+      },
+      states.INJECTOR
+    )
+  ] });
 };
 
 export { ConnectUsing as default };

package/build/src/components/DaimoPayModal/ConnectUsing.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectUsing.js","sources":["../../../../src/components/DaimoPayModal/ConnectUsing.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAYA,MAAM,MAAM,GAAG;AACb,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEI,MAAA,YAAY,GAAG,MAAK;AACxB,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;AAChC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,MAAM,GAAG,SAAS,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC;;AAGnD,IAAA,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC;IAEtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,CAC3C,CAAC;IAEF,SAAS,CAAC,MAAK;;AAEb,QAAA,MAAM,aAAa,GAAG,YAAW;YAC/B,MAAM,GAAG,GAAG,MAAM,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;YACnD,IAAI,CAAC,GAAG,EAAE;AACR,gBAAA,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACzB,UAAU,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;aACvC;AACH,SAAC,CAAC;AACF,QAAA,IAAI,MAAM,KAAK,MAAM,CAAC,QAAQ;AAAE,YAAA,aAAa,EAAE,CAAC;AAClD,KAAC,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,IAAI,CAAC,MAAM;QAAE,OAAOA,GAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,CAA4B,CAAC;AAEvD,IAAA,QACEC,IAAC,CAAA,eAAe,EACb,EAAA,QAAA,EAAA,CAAA,MAAM,KAAK,MAAM,CAAC,MAAM,KACvBD,GAAC,CAAA,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,eAAe,EAEzB,QAAA,EAAAA,GAAA,CAAC,iBAAiB,EAAA,EAAA,CAAG,IANhB,MAAM,CAAC,MAAM,CAOP,CACd,EACA,MAAM,KAAK,MAAM,CAAC,QAAQ,KACzBA,GAAA,CAAC,MAAM,CAAC,GAAG,EAET,EAAA,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,eAAe,EAAA,QAAA,EAEzBA,IAAC,mBAAmB,EAAA,EAClB,mBAAmB,EAAE,MAAK;AACxB,wBAAA,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;qBAC1B,EAAA,CACD,IAVG,MAAM,CAAC,QAAQ,CAWT,CACd,CACe,EAAA,CAAA,EAClB;AACJ;;;;"}
+{"version":3,"file":"ConnectUsing.js","sources":["../../../../src/components/DaimoPayModal/ConnectUsing.tsx"],"sourcesContent":["import { AnimatePresence, motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\nimport { usePayContext } from \"../../hooks/usePayContext\";\nimport { useWallet } from \"../../wallets/useWallets\";\n\nimport ConnectWithInjector from \"./ConnectWithInjector\";\nimport ConnectWithQRCode from \"./ConnectWithQRCode\";\n\nimport Alert from \"../Common/Alert\";\nimport { contentVariants } from \"../Common/Modal\";\n\nconst states = {\n  QRCODE: \"qrcode\",\n  INJECTOR: \"injector\",\n};\n\nconst ConnectUsing = () => {\n  const context = usePayContext();\n  const { pendingConnectorId } = context;\n\n  const wallet = useWallet(pendingConnectorId ?? \"\");\n  // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it\n  const isQrCode = !wallet?.isInstalled;\n\n  const [status, setStatus] = useState(\n    isQrCode ? states.QRCODE : states.INJECTOR,\n  );\n\n  useEffect(() => {\n    // if no provider, change to qrcode\n    const checkProvider = async () => {\n      const res = await wallet?.connector?.getProvider();\n      if (!res) {\n        setStatus(states.QRCODE);\n        setTimeout(context.triggerResize, 10); // delay required here for modal to resize\n      }\n    };\n    if (status === states.INJECTOR) checkProvider();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!wallet) return <Alert>Connector not found</Alert>;\n\n  return (\n    <AnimatePresence>\n      {status === states.QRCODE && (\n        <motion.div\n          key={states.QRCODE}\n          initial={\"initial\"}\n          animate={\"animate\"}\n          exit={\"exit\"}\n          variants={contentVariants}\n        >\n          <ConnectWithQRCode />\n        </motion.div>\n      )}\n      {status === states.INJECTOR && (\n        <motion.div\n          key={states.INJECTOR}\n          initial={\"initial\"}\n          animate={\"animate\"}\n          exit={\"exit\"}\n          variants={contentVariants}\n        >\n          <ConnectWithInjector\n            switchConnectMethod={() => {\n              setStatus(states.QRCODE);\n            }}\n          />\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default ConnectUsing;\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,MAAS,GAAA;AAAA,EACb,MAAQ,EAAA,QAAA;AAAA,EACR,QAAU,EAAA,UAAA;AACZ,CAAA,CAAA;AAEA,MAAM,eAAe,MAAM;AACzB,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,kBAAA,IAAsB,EAAE,CAAA,CAAA;AAEjD,EAAM,MAAA,QAAA,GAAW,CAAC,MAAQ,EAAA,WAAA,CAAA;AAE1B,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA;AAAA,IAC1B,QAAA,GAAW,MAAO,CAAA,MAAA,GAAS,MAAO,CAAA,QAAA;AAAA,GACpC,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,gBAAgB,YAAY;AAChC,MAAA,MAAM,GAAM,GAAA,MAAM,MAAQ,EAAA,SAAA,EAAW,WAAY,EAAA,CAAA;AACjD,MAAA,IAAI,CAAC,GAAK,EAAA;AACR,QAAA,SAAA,CAAU,OAAO,MAAM,CAAA,CAAA;AACvB,QAAW,UAAA,CAAA,OAAA,CAAQ,eAAe,EAAE,CAAA,CAAA;AAAA,OACtC;AAAA,KACF,CAAA;AACA,IAAI,IAAA,MAAA,KAAW,MAAO,CAAA,QAAA,EAAwB,aAAA,EAAA,CAAA;AAAA,GAChD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,IAAI,CAAC,MAAA,EAAe,uBAAA,GAAA,CAAC,SAAM,QAAmB,EAAA,qBAAA,EAAA,CAAA,CAAA;AAE9C,EAAA,4BACG,eACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,OAAO,MACjB,oBAAA,GAAA;AAAA,MAAC,MAAO,CAAA,GAAA;AAAA,MAAP;AAAA,QAEC,OAAS,EAAA,SAAA;AAAA,QACT,OAAS,EAAA,SAAA;AAAA,QACT,IAAM,EAAA,MAAA;AAAA,QACN,QAAU,EAAA,eAAA;AAAA,QAEV,8BAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MANd,MAAO,CAAA,MAAA;AAAA,KAOd;AAAA,IAED,MAAA,KAAW,OAAO,QACjB,oBAAA,GAAA;AAAA,MAAC,MAAO,CAAA,GAAA;AAAA,MAAP;AAAA,QAEC,OAAS,EAAA,SAAA;AAAA,QACT,OAAS,EAAA,SAAA;AAAA,QACT,IAAM,EAAA,MAAA;AAAA,QACN,QAAU,EAAA,eAAA;AAAA,QAEV,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,qBAAqB,MAAM;AACzB,cAAA,SAAA,CAAU,OAAO,MAAM,CAAA,CAAA;AAAA,aACzB;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,MAVK,MAAO,CAAA,QAAA;AAAA,KAWd;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/src/components/DaimoPayModal/ConnectWithInjector/index.js

@@ -17,178 +17,318 @@ import BrowserIcon from '../../Common/BrowserIcon/index.js';
 import CircleSpinner from '../../Spinners/CircleSpinner/index.js';
 
 const states = {
-    CONNECTED: "connected",
-    CONNECTING: "connecting",
-    EXPIRING: "expiring",
-    FAILED: "failed",
-    REJECTED: "rejected",
-    NOTCONNECTED: "notconnected",
-    UNAVAILABLE: "unavailable",
+  CONNECTED: "connected",
+  CONNECTING: "connecting",
+  EXPIRING: "expiring",
+  FAILED: "failed",
+  REJECTED: "rejected",
+  NOTCONNECTED: "notconnected",
+  UNAVAILABLE: "unavailable"
 };
 const contentVariants = {
-    initial: {
-        willChange: "transform,opacity",
-        position: "relative",
-        opacity: 0,
-        scale: 0.95,
-    },
-    animate: {
-        position: "relative",
-        opacity: 1,
-        scale: 1,
-        transition: {
-            ease: [0.16, 1, 0.3, 1],
-            duration: 0.4,
-            delay: 0.05,
-            position: { delay: 0 },
-        },
-    },
-    exit: {
-        position: "absolute",
-        opacity: 0,
-        scale: 0.95,
-        transition: {
-            ease: [0.16, 1, 0.3, 1],
-            duration: 0.3,
-        },
-    },
+  initial: {
+    willChange: "transform,opacity",
+    position: "relative",
+    opacity: 0,
+    scale: 0.95
+  },
+  animate: {
+    position: "relative",
+    opacity: 1,
+    scale: 1,
+    transition: {
+      ease: [0.16, 1, 0.3, 1],
+      duration: 0.4,
+      delay: 0.05,
+      position: { delay: 0 }
+    }
+  },
+  exit: {
+    position: "absolute",
+    opacity: 0,
+    scale: 0.95,
+    transition: {
+      ease: [0.16, 1, 0.3, 1],
+      duration: 0.3
+    }
+  }
 };
 const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
-    const { connect } = useConnect({
-        mutation: {
-            onMutate: (connector) => {
-                if (connector.connector) {
-                    setStatus(states.CONNECTING);
-                }
-                else {
-                    setStatus(states.UNAVAILABLE);
-                }
-            },
-            onError(err) {
-                console.error(err);
-            },
-            onSettled(data, error) {
-                if (error) {
-                    setShowTryAgainTooltip(true);
-                    setTimeout(() => setShowTryAgainTooltip(false), 3500);
-                    if (error.code) {
-                        // https://github.com/MetaMask/eth-rpc-errors/blob/main/src/error-constants.ts
-                        switch (error.code) {
-                            case -32002:
-                                setStatus(states.NOTCONNECTED);
-                                break;
-                            case 4001:
-                                setStatus(states.REJECTED);
-                                break;
-                            default:
-                                setStatus(states.FAILED);
-                                break;
-                        }
-                    }
-                    else {
-                        // Sometimes the error doesn't respond with a code
-                        if (error.message) {
-                            switch (error.message) {
-                                case "User rejected request":
-                                    setStatus(states.REJECTED);
-                                    break;
-                                default:
-                                    setStatus(states.FAILED);
-                                    break;
-                            }
-                        }
-                    }
-                }
-                setTimeout(triggerResize, 100);
-            },
-        },
-    });
-    const { triggerResize } = usePayContext();
-    const { pendingConnectorId } = usePayContext();
-    const wallet = useWallet(pendingConnectorId ?? "");
-    const walletInfo = {
-        name: wallet?.name,
-        shortName: wallet?.shortName ?? wallet?.name,
-        icon: wallet?.iconConnector ?? wallet?.icon,
-        iconShape: wallet?.iconShape ?? "circle",
-        iconShouldShrink: wallet?.iconShouldShrink,
-    };
-    const [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
-    const browser = detectBrowser();
-    const extensionUrl = wallet?.downloadUrls?.[browser];
-    const suggestedExtension = wallet?.downloadUrls
-        ? {
-            name: Object.keys(wallet?.downloadUrls)[0],
-            label: Object.keys(wallet?.downloadUrls)[0]?.charAt(0).toUpperCase() +
-                Object.keys(wallet?.downloadUrls)[0]?.slice(1), // Capitalise first letter, but this might be better suited as a lookup table
-            url: wallet?.downloadUrls[Object.keys(wallet?.downloadUrls)[0]],
+  const { connect } = useConnect({
+    mutation: {
+      onMutate: (connector) => {
+        if (connector.connector) {
+          setStatus(states.CONNECTING);
+        } else {
+          setStatus(states.UNAVAILABLE);
         }
-        : undefined;
-    const [status, setStatus] = useState(forceState
-        ? forceState
-        : !wallet?.isInstalled
-            ? states.UNAVAILABLE
-            : states.CONNECTING);
-    const locales = useLocales({
-        CONNECTORNAME: walletInfo.name,
-        CONNECTORSHORTNAME: walletInfo.shortName ?? walletInfo.name,
-        SUGGESTEDEXTENSIONBROWSER: suggestedExtension?.label ?? "your browser",
-    });
-    const runConnect = async () => {
-        if (wallet?.isInstalled && wallet?.connector) {
-            connect({ connector: wallet?.connector });
-        }
-        else {
-            setStatus(states.UNAVAILABLE);
+      },
+      onError(err) {
+        console.error(err);
+      },
+      onSettled(data, error) {
+        if (error) {
+          setShowTryAgainTooltip(true);
+          setTimeout(() => setShowTryAgainTooltip(false), 3500);
+          if (error.code) {
+            switch (error.code) {
+              case -32002:
+                setStatus(states.NOTCONNECTED);
+                break;
+              case 4001:
+                setStatus(states.REJECTED);
+                break;
+              default:
+                setStatus(states.FAILED);
+                break;
+            }
+          } else {
+            if (error.message) {
+              switch (error.message) {
+                case "User rejected request":
+                  setStatus(states.REJECTED);
+                  break;
+                default:
+                  setStatus(states.FAILED);
+                  break;
+              }
+            }
+          }
         }
+        setTimeout(triggerResize, 100);
+      }
+    }
+  });
+  const { triggerResize } = usePayContext();
+  const { pendingConnectorId } = usePayContext();
+  const wallet = useWallet(pendingConnectorId ?? "");
+  const walletInfo = {
+    name: wallet?.name,
+    shortName: wallet?.shortName ?? wallet?.name,
+    icon: wallet?.iconConnector ?? wallet?.icon,
+    iconShape: wallet?.iconShape ?? "circle",
+    iconShouldShrink: wallet?.iconShouldShrink
+  };
+  const [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
+  const browser = detectBrowser();
+  const extensionUrl = wallet?.downloadUrls?.[browser];
+  const suggestedExtension = wallet?.downloadUrls ? {
+    name: Object.keys(wallet?.downloadUrls)[0],
+    label: Object.keys(wallet?.downloadUrls)[0]?.charAt(0).toUpperCase() + Object.keys(wallet?.downloadUrls)[0]?.slice(1),
+    // Capitalise first letter, but this might be better suited as a lookup table
+    url: wallet?.downloadUrls[Object.keys(wallet?.downloadUrls)[0]]
+  } : void 0;
+  const [status, setStatus] = useState(
+    forceState ? forceState : !wallet?.isInstalled ? states.UNAVAILABLE : states.CONNECTING
+  );
+  const locales = useLocales({
+    CONNECTORNAME: walletInfo.name,
+    CONNECTORSHORTNAME: walletInfo.shortName ?? walletInfo.name,
+    SUGGESTEDEXTENSIONBROWSER: suggestedExtension?.label ?? "your browser"
+  });
+  const runConnect = async () => {
+    if (wallet?.isInstalled && wallet?.connector) {
+      connect({ connector: wallet?.connector });
+    } else {
+      setStatus(states.UNAVAILABLE);
+    }
+  };
+  useEffect(() => {
+    if (status === states.UNAVAILABLE) return;
+    const connectTimeout = setTimeout(runConnect, 600);
+    return () => {
+      clearTimeout(connectTimeout);
     };
-    useEffect(() => {
-        if (status === states.UNAVAILABLE)
-            return;
-        // UX: Give user time to see the UI before opening the extension
-        const connectTimeout = setTimeout(runConnect, 600);
-        return () => {
-            clearTimeout(connectTimeout);
-        };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    /** Timeout functionality if necessary
-    let expiryTimeout: any;
-    useEffect(() => {
-      if (status === states.EXPIRING) {
-        expiryTimeout = setTimeout(
-          () => {
-            if (expiryTimer <= 0) {
-              setStatus(states.FAILED);
-              setExpiryTimer(expiryDefault);
-            } else {
-              setExpiryTimer(expiryTimer - 1);
+  }, []);
+  if (!wallet) {
+    return /* @__PURE__ */ jsx(PageContent, { children: /* @__PURE__ */ jsxs(Container, { children: [
+      /* @__PURE__ */ jsx(ModalHeading, { children: locales.invalidState_heading }),
+      /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(Alert, { children: locales.invalidState_description }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(PageContent, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(ConnectingContainer, { children: /* @__PURE__ */ jsxs(
+      ConnectingAnimation,
+      {
+        $shake: status === states.FAILED || status === states.REJECTED,
+        $circle: walletInfo.iconShape === "circle",
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: (status === states.FAILED || status === states.REJECTED) && /* @__PURE__ */ jsx(
+            RetryButton,
+            {
+              "aria-label": locales.retry,
+              initial: { opacity: 0, scale: 0.8 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              whileTap: { scale: 0.9 },
+              transition: { duration: 0.1 },
+              onClick: runConnect,
+              children: /* @__PURE__ */ jsx(RetryIconContainer, { children: /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  open: showTryAgainTooltip && (status === states.FAILED || status === states.REJECTED),
+                  message: locales.tryAgainQuestion,
+                  xOffset: -6,
+                  children: /* @__PURE__ */ jsx(RetryIconCircle, {})
+                }
+              ) })
+            }
+          ) }),
+          walletInfo.iconShape === "circle" ? /* @__PURE__ */ jsx(
+            CircleSpinner,
+            {
+              logo: status === states.UNAVAILABLE ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: "scale(1.14)",
+                    position: "relative",
+                    width: "100%"
+                  },
+                  children: walletInfo.icon
+                }
+              ) : /* @__PURE__ */ jsx(Fragment, { children: walletInfo.icon }),
+              smallLogo: walletInfo.iconShouldShrink,
+              loading: status === states.CONNECTING,
+              unavailable: status === states.UNAVAILABLE
             }
-          },
-          expiryTimer === 9 ? 1500 : 1000 // Google: Chronostasis
-        );
+          ) : /* @__PURE__ */ jsx(
+            SquircleSpinner,
+            {
+              logo: status === states.UNAVAILABLE ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: "scale(1.14)",
+                    position: "relative",
+                    width: "100%"
+                  },
+                  children: walletInfo.icon
+                }
+              ) : /* @__PURE__ */ jsx(Fragment, { children: walletInfo.icon }),
+              loading: status === states.CONNECTING
+            }
+          )
+        ]
       }
-      return () => {
-        clearTimeout(expiryTimeout);
-      };
-    }, [status, expiryTimer]);
-    */
-    if (!wallet) {
-        return (jsx(PageContent, { children: jsxs(Container, { children: [jsx(ModalHeading, { children: locales.invalidState_heading }), jsx(ModalContent, { children: jsx(Alert, { children: locales.invalidState_description }) })] }) }));
-    }
-    return (jsx(PageContent, { children: jsxs(Container, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$shake": status === states.FAILED || status === states.REJECTED, "$circle": walletInfo.iconShape === "circle", children: [jsx(AnimatePresence, { children: (status === states.FAILED || status === states.REJECTED) && (jsx(RetryButton, { "aria-label": locales.retry, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
-                                                (status === states.FAILED || status === states.REJECTED), message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), walletInfo.iconShape === "circle" ? (jsx(CircleSpinner, { logo: status === states.UNAVAILABLE ? (jsx("div", { style: {
-                                        transform: "scale(1.14)",
-                                        position: "relative",
-                                        width: "100%",
-                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), smallLogo: walletInfo.iconShouldShrink, loading: status === states.CONNECTING, unavailable: status === states.UNAVAILABLE })) : (jsx(SquircleSpinner, { logo: status === states.UNAVAILABLE ? (jsx("div", { style: {
-                                        transform: "scale(1.14)",
-                                        position: "relative",
-                                        width: "100%",
-                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), loading: status === states.CONNECTING }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states.FAILED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states.FAILED)), status === states.REJECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states.REJECTED)), (status === states.CONNECTING || status === states.EXPIRING) && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: wallet.connector?.id === "injected"
-                                                ? locales.injectionScreen_connecting_injected_h1
-                                                : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector?.id === "injected"
-                                                ? locales.injectionScreen_connecting_injected_p
-                                                : locales.injectionScreen_connecting_p }), jsxs(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: runConnect, children: ["Connect ", walletInfo.name] })] }) }, states.CONNECTING)), status === states.CONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", locales.injectionScreen_connected_h1] }), jsx(ModalBody, { children: locales.injectionScreen_connected_p })] }) }, states.CONNECTED)), status === states.NOTCONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })] }) }, states.NOTCONNECTED)), status === states.UNAVAILABLE && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: !extensionUrl ? (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }), jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })] }), !wallet.isInstalled && suggestedExtension && (jsxs(Button, { href: suggestedExtension?.url, icon: jsx(BrowserIcon, { browser: suggestedExtension?.name }), children: ["Install on ", suggestedExtension?.label] }))] })) : (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { children: locales.injectionScreen_install_h1 }), jsx(ModalBody, { children: locales.injectionScreen_install_p })] }), !wallet.isInstalled && extensionUrl && (jsx(Button, { href: extensionUrl, icon: jsx(BrowserIcon, {}), children: locales.installTheExtension }))] })) }, states.UNAVAILABLE))] }) })] }) }));
+    ) }),
+    /* @__PURE__ */ jsx(ModalContentContainer, { children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, children: [
+      status === states.FAILED && /* @__PURE__ */ jsx(
+        Content,
+        {
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          variants: contentVariants,
+          children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+            /* @__PURE__ */ jsxs(ModalH1, { $error: true, children: [
+              /* @__PURE__ */ jsx(AlertIcon, {}),
+              locales.injectionScreen_failed_h1
+            ] }),
+            /* @__PURE__ */ jsx(ModalBody, { children: locales.injectionScreen_failed_p })
+          ] })
+        },
+        states.FAILED
+      ),
+      status === states.REJECTED && /* @__PURE__ */ jsx(
+        Content,
+        {
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          variants: contentVariants,
+          children: /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [
+            /* @__PURE__ */ jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }),
+            /* @__PURE__ */ jsx(ModalBody, { children: locales.injectionScreen_rejected_p })
+          ] })
+        },
+        states.REJECTED
+      ),
+      (status === states.CONNECTING || status === states.EXPIRING) && /* @__PURE__ */ jsx(
+        Content,
+        {
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          variants: contentVariants,
+          children: /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [
+            /* @__PURE__ */ jsx(ModalH1, { children: wallet.connector?.id === "injected" ? locales.injectionScreen_connecting_injected_h1 : locales.injectionScreen_connecting_h1 }),
+            /* @__PURE__ */ jsx(ModalBody, { children: wallet.connector?.id === "injected" ? locales.injectionScreen_connecting_injected_p : locales.injectionScreen_connecting_p }),
+            /* @__PURE__ */ jsxs(Button, { icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}), onClick: runConnect, children: [
+              "Connect ",
+              walletInfo.name
+            ] })
+          ] })
+        },
+        states.CONNECTING
+      ),
+      status === states.CONNECTED && /* @__PURE__ */ jsx(
+        Content,
+        {
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          variants: contentVariants,
+          children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+            /* @__PURE__ */ jsxs(ModalH1, { $valid: true, children: [
+              /* @__PURE__ */ jsx(TickIcon, {}),
+              " ",
+              locales.injectionScreen_connected_h1
+            ] }),
+            /* @__PURE__ */ jsx(ModalBody, { children: locales.injectionScreen_connected_p })
+          ] })
+        },
+        states.CONNECTED
+      ),
+      status === states.NOTCONNECTED && /* @__PURE__ */ jsx(
+        Content,
+        {
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          variants: contentVariants,
+          children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+            /* @__PURE__ */ jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }),
+            /* @__PURE__ */ jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })
+          ] })
+        },
+        states.NOTCONNECTED
+      ),
+      status === states.UNAVAILABLE && /* @__PURE__ */ jsx(
+        Content,
+        {
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          variants: contentVariants,
+          children: !extensionUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [
+              /* @__PURE__ */ jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }),
+              /* @__PURE__ */ jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })
+            ] }),
+            !wallet.isInstalled && suggestedExtension && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                href: suggestedExtension?.url,
+                icon: /* @__PURE__ */ jsx(BrowserIcon, { browser: suggestedExtension?.name }),
+                children: [
+                  "Install on ",
+                  suggestedExtension?.label
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [
+              /* @__PURE__ */ jsx(ModalH1, { children: locales.injectionScreen_install_h1 }),
+              /* @__PURE__ */ jsx(ModalBody, { children: locales.injectionScreen_install_p })
+            ] }),
+            !wallet.isInstalled && extensionUrl && /* @__PURE__ */ jsx(Button, { href: extensionUrl, icon: /* @__PURE__ */ jsx(BrowserIcon, {}), children: locales.installTheExtension })
+          ] })
+        },
+        states.UNAVAILABLE
+      )
+    ] }) })
+  ] }) });
 };
 
 export { ConnectWithInjector as default, states };