@daimo/pay 1.15.0 → 1.16.1

package/build/src/components/Pages/MobileConnectors/index.js

@@ -7,50 +7,56 @@ import { ScrollArea } from '../../Common/ScrollArea/index.js';
 import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
 
 const MobileConnectors = () => {
-    const context = usePayContext();
-    const { paymentState, setRoute } = context;
-    // filter out installed wallets
-    const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
-        const wallet = walletConfigs[walletId];
-        if (!wallet.showInMobileConnectors)
-            return false;
-        // If the mobile wallet supports solana only, don't show it if we are not supporting solana has a payment method
-        if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)
-            return false;
-        return true;
-    }) ?? [];
-    const goToWallet = (wallet) => {
-        if (wallet.getDaimoPayDeeplink == null) {
-            console.error(`wallet ${wallet.name} has no deeplink`);
-            return;
-        }
-        if (paymentState.isDepositFlow) {
-            context.paymentState.setSelectedWallet(wallet);
-            setRoute(ROUTES.SELECT_WALLET_AMOUNT);
-        }
-        else {
-            paymentState.openInWalletBrowser(wallet);
-        }
-    };
-    return (jsx(PageContent, { style: { width: 312 }, children: jsx(Container, { children: jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsx(WalletList, { children: walletsIdsToDisplay
-                            .sort(
-                        // sort by name
-                        (a, b) => {
-                            const walletA = walletConfigs[a];
-                            const walletB = walletConfigs[b];
-                            const nameA = walletA.name ?? walletA.shortName ?? a;
-                            const nameB = walletB.name ?? walletB.shortName ?? b;
-                            return nameA.localeCompare(nameB);
-                        })
-                            .filter((walletId) => !(walletId === "coinbaseWallet" ||
-                            walletId === "com.coinbase.wallet"))
-                            .map((walletId, i) => {
-                            const wallet = walletConfigs[walletId];
-                            const { name, shortName, iconConnector, icon } = wallet;
-                            return (jsxs(WalletItem, { onClick: () => goToWallet(wallet), style: {
-                                    animationDelay: `${i * 50}ms`,
-                                }, children: [jsx(WalletIcon, { children: iconConnector ?? icon }), jsx(WalletLabel, { children: shortName ?? name })] }, i));
-                        }) }) }) }) }) }));
+  const context = usePayContext();
+  const { paymentState, setRoute } = context;
+  const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
+    const wallet = walletConfigs[walletId];
+    if (!wallet.showInMobileConnectors) return false;
+    if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)
+      return false;
+    return true;
+  }) ?? [];
+  const goToWallet = (wallet) => {
+    if (wallet.getDaimoPayDeeplink == null) {
+      console.error(`wallet ${wallet.name} has no deeplink`);
+      return;
+    }
+    if (paymentState.isDepositFlow) {
+      context.paymentState.setSelectedWallet(wallet);
+      setRoute(ROUTES.SELECT_WALLET_AMOUNT);
+    } else {
+      paymentState.openInWalletBrowser(wallet);
+    }
+  };
+  return /* @__PURE__ */ jsx(PageContent, { style: { width: 312 }, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(ModalContent, { style: { paddingBottom: 0 }, children: /* @__PURE__ */ jsx(ScrollArea, { height: 340, children: /* @__PURE__ */ jsx(WalletList, { children: walletsIdsToDisplay.sort(
+    // sort by name
+    (a, b) => {
+      const walletA = walletConfigs[a];
+      const walletB = walletConfigs[b];
+      const nameA = walletA.name ?? walletA.shortName ?? a;
+      const nameB = walletB.name ?? walletB.shortName ?? b;
+      return nameA.localeCompare(nameB);
+    }
+  ).filter(
+    (walletId) => !(walletId === "coinbaseWallet" || walletId === "com.coinbase.wallet")
+  ).map((walletId, i) => {
+    const wallet = walletConfigs[walletId];
+    const { name, shortName, iconConnector, icon } = wallet;
+    return /* @__PURE__ */ jsxs(
+      WalletItem,
+      {
+        onClick: () => goToWallet(wallet),
+        style: {
+          animationDelay: `${i * 50}ms`
+        },
+        children: [
+          /* @__PURE__ */ jsx(WalletIcon, { children: iconConnector ?? icon }),
+          /* @__PURE__ */ jsx(WalletLabel, { children: shortName ?? name })
+        ]
+      },
+      i
+    );
+  }) }) }) }) }) });
 };
 
 export { MobileConnectors as default };

package/build/src/components/Pages/MobileConnectors/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/MobileConnectors/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/MobileConnectors/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport {\n  WalletConfigProps,\n  walletConfigs,\n} from \"../../../wallets/walletConfigs\";\nimport { ModalContent, PageContent } from \"../../Common/Modal/styles\";\nimport { ScrollArea } from \"../../Common/ScrollArea\";\nimport {\n  Container,\n  WalletIcon,\n  WalletItem,\n  WalletLabel,\n  WalletList,\n} from \"./styles\";\n\nconst MobileConnectors: React.FC = () => {\n  const context = usePayContext();\n  const { paymentState, setRoute } = context;\n\n  // filter out installed wallets\n  const walletsIdsToDisplay =\n    Object.keys(walletConfigs).filter((walletId) => {\n      const wallet = walletConfigs[walletId];\n      if (!wallet.showInMobileConnectors) return false;\n      // If the mobile wallet supports solana only, don't show it if we are not supporting solana has a payment method\n      if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)\n        return false;\n      return true;\n    }) ?? [];\n\n  const goToWallet = (wallet: WalletConfigProps) => {\n    if (wallet.getDaimoPayDeeplink == null) {\n      console.error(`wallet ${wallet.name} has no deeplink`);\n      return;\n    }\n    if (paymentState.isDepositFlow) {\n      context.paymentState.setSelectedWallet(wallet);\n      setRoute(ROUTES.SELECT_WALLET_AMOUNT);\n    } else {\n      paymentState.openInWalletBrowser(wallet);\n    }\n  };\n\n  return (\n    <PageContent style={{ width: 312 }}>\n      <Container>\n        <ModalContent style={{ paddingBottom: 0 }}>\n          <ScrollArea height={340}>\n            <WalletList>\n              {walletsIdsToDisplay\n                .sort(\n                  // sort by name\n                  (a, b) => {\n                    const walletA = walletConfigs[a];\n                    const walletB = walletConfigs[b];\n                    const nameA = walletA.name ?? walletA.shortName ?? a;\n                    const nameB = walletB.name ?? walletB.shortName ?? b;\n                    return nameA.localeCompare(nameB);\n                  },\n                )\n                .filter(\n                  (walletId) =>\n                    !(\n                      walletId === \"coinbaseWallet\" ||\n                      walletId === \"com.coinbase.wallet\"\n                    ),\n                )\n                .map((walletId, i) => {\n                  const wallet = walletConfigs[walletId];\n                  const { name, shortName, iconConnector, icon } = wallet;\n                  return (\n                    <WalletItem\n                      key={i}\n                      onClick={() => goToWallet(wallet)}\n                      style={{\n                        animationDelay: `${i * 50}ms`,\n                      }}\n                    >\n                      <WalletIcon>{iconConnector ?? icon}</WalletIcon>\n                      <WalletLabel>{shortName ?? name}</WalletLabel>\n                    </WalletItem>\n                  );\n                })}\n            </WalletList>\n          </ScrollArea>\n        </ModalContent>\n      </Container>\n    </PageContent>\n  );\n};\n\nexport default MobileConnectors;\n"],"names":[],"mappings":"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"}

package/build/src/components/Pages/MobileConnectors/styles.js

@@ -1,13 +1,13 @@
 import { keyframes, css } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 
-const WalletItem = styled.button `
+const WalletItem = styled.button`
   text-align: center;
   transition: opacity 100ms ease;
-  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+  opacity: ${(props) => props.$waiting ? 0.4 : 1};
   background: transparent;
 `;
-const WalletIcon = styled.div `
+const WalletIcon = styled.div`
   z-index: 9;
   position: relative;
   margin: 0 auto 10px;
@@ -16,8 +16,7 @@ const WalletIcon = styled.div `
   height: 60px;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.04);
-  ${(props) => props.$outline &&
-    `
+  ${(props) => props.$outline && `
   &:before {
     content: '';
     z-index: 2;
@@ -33,26 +32,25 @@ const WalletIcon = styled.div `
     height: auto;
   }
 `;
-const WalletLabel = styled.div `
+const WalletLabel = styled.div`
   color: var(--ck-body-color);
   font-size: 13px;
   line-height: 15px;
   font-weight: 500;
   opacity: 0.75;
 `;
-const PulseKeyframes = keyframes `
+const PulseKeyframes = keyframes`
   0%,100% { opacity:1; }
   50% { opacity:0.5; }
 `;
-const WalletList = styled.div `
+const WalletList = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px 8px;
   margin: 0 -10px;
   padding: 4px 0 0;
   transition: opacity 300ms ease;
-  ${(props) => props.$disabled &&
-    css `
+  ${(props) => props.$disabled && css`
       pointer-events: none;
       opacity: 0.4;
       ${WalletItem} {
@@ -60,7 +58,7 @@ const WalletList = styled.div `
       }
     `}
 `;
-const Container = styled.div ``;
+const Container = styled.div``;
 
 export { Container, WalletIcon, WalletItem, WalletLabel, WalletList };
 //# sourceMappingURL=styles.js.map

package/build/src/components/Pages/MobileConnectors/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/MobileConnectors/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAwB,CAAA;;;AAGlD,WAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;;EAEhD;AACW,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAA;;;;;;;;;AASxD,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ;AACd,IAAA,CAAA;;;;;;;;AAQA,GAAA,CAAA,CAAA;;;;;;;EAOF;AACW,MAAA,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;EAMnC;AAEF,MAAM,cAAc,GAAG,SAAS,CAAA,CAAA;;;CAG/B,CAAC;AAEW,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAA;;;;;;;AAOzD,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,SAAS;AACf,IAAA,GAAG,CAAA,CAAA;;;QAGC,UAAU,CAAA;qBACG,cAAc,CAAA;;AAE9B,IAAA,CAAA,CAAA;EACH;MACW,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/MobileConnectors/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nexport const WalletItem = styled.button<{ $waiting?: boolean }>`\n  text-align: center;\n  transition: opacity 100ms ease;\n  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};\n  background: transparent;\n`;\nexport const WalletIcon = styled.div<{ $outline?: boolean }>`\n  z-index: 9;\n  position: relative;\n  margin: 0 auto 10px;\n  border-radius: 16px;\n  width: 60px;\n  height: 60px;\n  overflow: hidden;\n  background: rgba(0, 0, 0, 0.04);\n  ${(props) =>\n    props.$outline &&\n    `\n  &:before {\n    content: '';\n    z-index: 2;\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);\n  }`}\n  svg {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: auto;\n  }\n`;\nexport const WalletLabel = styled.div`\n  color: var(--ck-body-color);\n  font-size: 13px;\n  line-height: 15px;\n  font-weight: 500;\n  opacity: 0.75;\n`;\n\nconst PulseKeyframes = keyframes`\n  0%,100% { opacity:1; }\n  50% { opacity:0.5; }\n`;\n\nexport const WalletList = styled.div<{ $disabled?: boolean }>`\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 22px 8px;\n  margin: 0 -10px;\n  padding: 4px 0 0;\n  transition: opacity 300ms ease;\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n      ${WalletItem} {\n        animation: ${PulseKeyframes} 1s infinite ease-in-out;\n      }\n    `}\n`;\nexport const Container = styled.div``;\n"],"names":[],"mappings":";;;AAGO,MAAM,aAAa,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA,WAAA,EAGpB,CAAC,KAAA,KAAW,KAAM,CAAA,QAAA,GAAW,MAAM,CAAE,CAAA;AAAA;AAAA,EAAA;AAG3C,MAAM,aAAa,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS7B,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,QACN,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQG,MAAM,cAAc,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQlC,MAAM,cAAiB,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKhB,MAAM,aAAa,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7B,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,SACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,MAAA,EAGI,UAAU,CAAA;AAAA,mBAAA,EACG,cAAc,CAAA;AAAA;AAAA,IAE9B,CAAA,CAAA;AAAA,EAAA;AAEE,MAAM,YAAY,MAAO,CAAA,GAAA,CAAA;;;;"}

package/build/src/components/Pages/Onboarding/index.js

@@ -8,10 +8,26 @@ import { usePayContext } from '../../../hooks/usePayContext.js';
 import Button from '../../Common/Button/index.js';
 
 const Introduction = () => {
-    const context = usePayContext();
-    const locales = useLocales({});
-    const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
-    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Base, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.MetaMask, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Rainbow, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Phantom, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Trust, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+  const context = usePayContext();
+  const locales = useLocales({});
+  const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsxs(Graphic, { children: [
+      /* @__PURE__ */ jsxs(LogoGroup, { children: [
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Base, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.MetaMask, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Rainbow, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Phantom, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Trust, {}) }) }) }) }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(GraphicBackground, { children: wave })
+    ] }),
+    /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [
+      /* @__PURE__ */ jsx(ModalH1, { $small: true, children: locales.onboardingScreen_h1 }),
+      /* @__PURE__ */ jsx(ModalBody, { children: locales.onboardingScreen_p })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })
+  ] });
 };
 
 export { Introduction as default };

package/build/src/components/Pages/Onboarding/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Onboarding/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AA0BM,MAAA,YAAY,GAAa,MAAK;AAClC,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;AAChC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;IAC/B,MAAM,MAAM,GACV,OAAO,CAAC,OAAO,EAAE,mBAAmB,IAAI,OAAO,CAAC,uBAAuB,CAAC;IAC1E,QACEA,KAAC,WAAW,EAAA,EAAA,QAAA,EAAA,CACVA,KAAC,OAAO,EAAA,EAAA,QAAA,EAAA,CACNA,IAAC,CAAA,SAAS,EACR,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EACH,EAAA,QAAA,EAAAA,GAAA,CAAC,YAAY,EACX,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EACR,EAAA,QAAA,EAAAA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAC,CAAA,aAAa,cACZA,GAAC,CAAA,WAAW,cACVA,GAAC,CAAA,KAAK,CAAC,IAAI,EAAA,EAAA,CAAG,EACF,CAAA,EAAA,CACA,EACH,CAAA,EAAA,CACL,GACC,EACV,CAAA,EACPA,GAAC,CAAA,IAAI,EACH,EAAA,QAAA,EAAAA,GAAA,CAAC,YAAY,EACX,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACRA,GAAC,CAAA,YAAY,cACXA,GAAC,CAAA,aAAa,cACZA,GAAC,CAAA,WAAW,cACVA,GAAC,CAAA,KAAK,CAAC,QAAQ,EAAG,EAAA,CAAA,EAAA,CACN,GACA,EACH,CAAA,EAAA,CACL,EACC,CAAA,EAAA,CACV,EACPA,GAAA,CAAC,IAAI,EACH,EAAA,QAAA,EAAAA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAC,CAAA,SAAS,cACRA,GAAC,CAAA,YAAY,cACXA,GAAC,CAAA,aAAa,cACZA,GAAC,CAAA,WAAW,EACV,EAAA,QAAA,EAAAA,GAAA,CAAC,KAAK,CAAC,OAAO,EAAG,EAAA,CAAA,EAAA,CACL,EACA,CAAA,EAAA,CACH,EACL,CAAA,EAAA,CACC,GACV,EACPA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHA,GAAC,CAAA,YAAY,cACXA,GAAC,CAAA,SAAS,cACRA,GAAC,CAAA,YAAY,cACXA,GAAC,CAAA,aAAa,EACZ,EAAA,QAAA,EAAAA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,IAAC,KAAK,CAAC,OAAO,EAAA,EAAA,CAAG,EACL,CAAA,EAAA,CACA,GACH,EACL,CAAA,EAAA,CACC,EACV,CAAA,EACPA,GAAC,CAAA,IAAI,cACHA,GAAC,CAAA,YAAY,cACXA,GAAC,CAAA,SAAS,cACRA,GAAC,CAAA,YAAY,EACX,EAAA,QAAA,EAAAA,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAC,CAAA,KAAK,CAAC,KAAK,KAAG,EACH,CAAA,EAAA,CACA,EACH,CAAA,EAAA,CACL,EACC,CAAA,EAAA,CACV,IACG,EACZA,GAAA,CAAC,iBAAiB,EAAE,EAAA,QAAA,EAAA,IAAI,GAAqB,CACrC,EAAA,CAAA,EACVD,IAAC,CAAA,YAAY,EAAC,EAAA,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CACxCC,IAAC,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAA,EAAS,OAAO,CAAC,mBAAmB,EAAA,CAAW,EACvDA,GAAC,CAAA,SAAS,cAAE,OAAO,CAAC,kBAAkB,EAAa,CAAA,CAAA,EAAA,CACtC,EACfA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EACxB,IAAA,EAAA,QAAA,EAAA,OAAO,CAAC,wBAAwB,EAAA,CAC1B,CACG,EAAA,CAAA,EACd;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Onboarding/index.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  FloatWrapper,\n  Graphic,\n  GraphicBackground,\n  Logo,\n  LogoGraphic,\n  LogoGroup,\n  LogoInner,\n  LogoPosition,\n  RotateWrapper,\n} from \"./styles\";\n\nimport Logos from \"../../../assets/logos\";\nimport wave from \"../../../assets/wave\";\nimport {\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport Button from \"../../Common/Button\";\n\nconst Introduction: React.FC = () => {\n  const context = usePayContext();\n  const locales = useLocales({});\n  const ctaUrl =\n    context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;\n  return (\n    <PageContent>\n      <Graphic>\n        <LogoGroup>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Base />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.MetaMask />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Rainbow />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Phantom />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Trust />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n        </LogoGroup>\n        <GraphicBackground>{wave}</GraphicBackground>\n      </Graphic>\n      <ModalContent style={{ paddingBottom: 18 }}>\n        <ModalH1 $small>{locales.onboardingScreen_h1}</ModalH1>\n        <ModalBody>{locales.onboardingScreen_p}</ModalBody>\n      </ModalContent>\n      <Button href={ctaUrl} arrow>\n        {locales.onboardingScreen_ctaText}\n      </Button>\n    </PageContent>\n  );\n};\n\nexport default Introduction;\n"],"names":[],"mappings":"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"}

package/build/src/components/Pages/Onboarding/styles.js

@@ -3,7 +3,7 @@ import { keyframes } from 'styled-components';
 import defaultTheme from '../../../constants/defaultTheme.js';
 import styled from '../../../styles/styled/index.js';
 
-const Graphic = styled(motion.div) `
+const Graphic = styled(motion.div)`
   position: relative;
   margin: 16px auto 20px;
   height: 190px;
@@ -16,12 +16,12 @@ const Graphic = styled(motion.div) `
     margin-bottom: 32px;
   }
 `;
-const LogoGroup = styled(motion.div) `
+const LogoGroup = styled(motion.div)`
   position: absolute;
   inset: 0;
   z-index: 2;
 `;
-const graphicIn = keyframes `
+const graphicIn = keyframes`
   0%{
     opacity:0;
     transform:scale(0.9);
@@ -31,7 +31,7 @@ const graphicIn = keyframes `
     transform:none;
   }
 `;
-const GraphicBackground = styled(motion.div) `
+const GraphicBackground = styled(motion.div)`
   z-index: 1;
   position: absolute;
   inset: 0;
@@ -59,7 +59,7 @@ const GraphicBackground = styled(motion.div) `
   //   animation: none;
   // }
 `;
-const logoIn = keyframes `
+const logoIn = keyframes`
   0%{
     opacity:0;
     transform:scale(0) translateY(40%);
@@ -69,16 +69,16 @@ const logoIn = keyframes `
     transform:none;
   }
 `;
-const LogoPosition = styled(motion.div) `
+const LogoPosition = styled(motion.div)`
   position: absolute;
   inset: 0;
   animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
   animation-delay: inherit;
 `;
-const LogoInner = styled(motion.div) `
+const LogoInner = styled(motion.div)`
   position: absolute;
 `;
-const LogoGraphic = styled(motion.div) `
+const LogoGraphic = styled(motion.div)`
   position: relative;
   overflow: hidden;
   height: 58px;
@@ -94,27 +94,27 @@ const LogoGraphic = styled(motion.div) `
     height: 100%;
   }
 `;
-const float = keyframes `
+const float = keyframes`
   0%,100%{ transform:none; }
   50%{ transform: translateY(-10%) }
 `;
-const FloatWrapper = styled(motion.div) `
+const FloatWrapper = styled(motion.div)`
   position: relative;
   animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
   animation-name: ${float};
   animation-duration: 3600ms;
 `;
-const rotate = keyframes `
+const rotate = keyframes`
   0%,100%{ transform:rotate(-3deg); }
   50%{ transform:rotate(3deg); }
 `;
-const RotateWrapper = styled(motion.div) `
+const RotateWrapper = styled(motion.div)`
   position: relative;
   animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
   animation-name: ${rotate};
   animation-duration: 3200ms;
 `;
-const Logo = styled(motion.div) `
+const Logo = styled(motion.div)`
   position: absolute;
   inset: 0;
 

package/build/src/components/Pages/Onboarding/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/Onboarding/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAKa,MAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;AAOF,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;EAK7D;AACW,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;EAIzC;AACF,MAAM,SAAS,GAAG,SAAS,CAAA,CAAA;;;;;;;;;CAS1B,CAAC;AACW,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;eAuBpC,SAAS,CAAA;AACkB,wCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;EAGhE;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;;;;;;;CASvB,CAAC;AACW,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;EAK5C;AACW,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;EAEzC;AACW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;EAe3C;AACF,MAAM,KAAK,GAAG,SAAS,CAAA,CAAA;;;CAGtB,CAAC;AACW,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;oBAG1B,KAAK,CAAA;;EAEvB;AACF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;CAGvB,CAAC;AACW,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;oBAG3B,MAAM,CAAA;;EAExB;AACW,MAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;eAIvB,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;MAuBf,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;;MAMb,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;AAKwB,wCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;AAEzD,OAAA,EAAA,aAAa,IAAI,YAAY,CAAA;;;;;IAKlC,SAAS,CAAA;;;;mBAIM,YAAY,CAAA;;MAEzB,WAAW,CAAA;;;;;;mBAME,YAAY,CAAA;;;mBAGZ,YAAY,CAAA;;;mBAGZ,YAAY,CAAA;;;mBAGZ,YAAY,CAAA;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/Onboarding/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"./../../../styles/styled\";\n\nexport const Graphic = styled(motion.div)`\n  position: relative;\n  margin: 16px auto 20px;\n  height: 190px;\n  max-width: 295px;\n  pointer-events: none;\n  user-select: none;\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    height: 200px;\n    max-width: 100%;\n    margin-bottom: 32px;\n  }\n`;\nexport const LogoGroup = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n`;\nconst graphicIn = keyframes`\n  0%{\n    opacity:0;\n    transform:scale(0.9);\n  }\n  100%{\n    opacity:1;\n    transform:none;\n  }\n`;\nexport const GraphicBackground = styled(motion.div)`\n  z-index: 1;\n  position: absolute;\n  inset: 0;\n  top: -2px;\n  overflow: hidden;\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: var(--ck-body-background);\n    background: radial-gradient(\n      closest-side,\n      var(--ck-body-background-transparent, transparent) 18.75%,\n      var(--ck-body-background) 100%\n    );\n    background-size: 100%;\n  }\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n  animation: ${graphicIn} 1000ms 100ms ease both;\n  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n  //   animation: none;\n  // }\n`;\n\nconst logoIn = keyframes`\n  0%{\n    opacity:0;\n    transform:scale(0) translateY(40%);\n  }\n  100%{\n    opacity:1;\n    transform:none;\n  }\n`;\nexport const LogoPosition = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;\n  animation-delay: inherit;\n`;\nexport const LogoInner = styled(motion.div)`\n  position: absolute;\n`;\nexport const LogoGraphic = styled(motion.div)`\n  position: relative;\n  overflow: hidden;\n  height: 58px;\n  width: 58px;\n  border-radius: 13.84px;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.05),\n    0 2px 20px 0 rgba(0, 0, 0, 0.03);\n\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n`;\nconst float = keyframes`\n  0%,100%{ transform:none; }\n  50%{ transform: translateY(-10%) }\n`;\nexport const FloatWrapper = styled(motion.div)`\n  position: relative;\n  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;\n  animation-name: ${float};\n  animation-duration: 3600ms;\n`;\nconst rotate = keyframes`\n  0%,100%{ transform:rotate(-3deg); }\n  50%{ transform:rotate(3deg); }\n`;\nexport const RotateWrapper = styled(motion.div)`\n  position: relative;\n  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;\n  animation-name: ${rotate};\n  animation-duration: 3200ms;\n`;\nexport const Logo = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n\n  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;\n  &:nth-child(1) {\n    z-index: 2;\n    animation-delay: 0ms;\n  }\n  &:nth-child(2) {\n    z-index: 1;\n    animation-delay: 60ms;\n  }\n  &:nth-child(3) {\n    z-index: 1;\n    animation-delay: 30ms;\n  }\n  &:nth-child(4) {\n    z-index: 1;\n    animation-delay: 90ms;\n  }\n  &:nth-child(5) {\n    z-index: 1;\n    animation-delay: 120ms;\n  }\n\n  &:nth-child(1) {\n    ${RotateWrapper} {\n      animation-delay: 0ms;\n    }\n  }\n  &:nth-child(2) {\n    ${RotateWrapper} {\n      animation-delay: -600ms;\n    }\n  }\n  &:nth-child(3) {\n    ${RotateWrapper} {\n      animation-delay: -1200ms;\n    }\n  }\n  &:nth-child(4) {\n    ${RotateWrapper} {\n      animation-delay: -1800ms;\n    }\n  }\n  &:nth-child(5) {\n    ${RotateWrapper} {\n      animation-delay: -2400ms;\n    }\n  }\n\n  &:nth-child(1) {\n    ${FloatWrapper} {\n      animation-delay: -200ms;\n    }\n  }\n  &:nth-child(2) {\n    ${FloatWrapper} {\n      animation-delay: -600ms;\n    }\n  }\n  &:nth-child(3) {\n    ${FloatWrapper} {\n      animation-delay: -800ms;\n    }\n  }\n  &:nth-child(4) {\n    ${FloatWrapper} {\n      animation-delay: -300ms;\n    }\n  }\n  &:nth-child(5) {\n    ${FloatWrapper} {\n      animation-delay: -3200ms;\n    }\n  }\n\n  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n  //   animation: none !important;\n  //   ${RotateWrapper},${FloatWrapper} {\n  //     animation: none !important;\n  //   }\n  }\n\n  ${LogoInner} {\n    transform: translate(-50%, -50%);\n  }\n\n  &:nth-child(1) ${LogoPosition} {\n    transform: translate(50%, 50%);\n    ${LogoGraphic} {\n      border-radius: 17.2px;\n      width: 72px;\n      height: 72px;\n    }\n  }\n  &:nth-child(2) ${LogoPosition} {\n    transform: translate(21%, 21.5%);\n  }\n  &:nth-child(3) ${LogoPosition} {\n    transform: translate(78%, 14%);\n  }\n  &:nth-child(4) ${LogoPosition} {\n    transform: translate(22.5%, 76%);\n  }\n  &:nth-child(5) ${LogoPosition} {\n    transform: translate(76%, 80%);\n  }\n`;\n"],"names":[],"mappings":"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"}