@multiplatform.one/web3 5.0.27

package/dist/esm/connectkit/components/Pages/Onboarding/index.native.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Graphic, LogoGroup, Logo, FloatWrapper, LogoPosition, LogoInner, LogoGraphic, GraphicBackground, RotateWrapper } from "./styles.native.js";
+import { PageContent, ModalBody, ModalContent, ModalH1 } from "../../Common/Modal/styles.native.js";
+import Logos from "../../../assets/logos.native.js";
+import wave from "../../../assets/wave.native.js";
+import Button from "../../Common/Button/index.native.js";
+import useLocales from "../../../hooks/useLocales.native.js";
+import { useContext } from "../../ConnectKit.native.js";
+var Introduction = function Introduction2() {
+  var _ref;
+  var _context_options;
+  var context = useContext();
+  var locales = useLocales({});
+  var ctaUrl = (_ref = (_context_options = context.options) === null || _context_options === void 0 ? void 0 : _context_options.walletOnboardingUrl) !== null && _ref !== void 0 ? _ref : 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.Coinbase, {
+                      background: true
+                    })
+                  })
+                })
+              })
+            })
+          })
+        }), /* @__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, {
+                      background: true
+                    })
+                  })
+                })
+              })
+            })
+          })
+        }), /* @__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(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.Argent, {})
+                  })
+                })
+              })
+            })
+          })
+        }), /* @__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.ImToken, {})
+                  })
+                })
+              })
+            })
+          })
+        })]
+      }), /* @__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
+    })]
+  });
+};
+var Onboarding_default = Introduction;
+export { Onboarding_default as default };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/connectkit/components/Pages/Onboarding/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","Graphic","LogoGroup","Logo","FloatWrapper","LogoPosition","LogoInner","LogoGraphic","GraphicBackground","RotateWrapper","PageContent","ModalBody","ModalContent","ModalH1","Logos","wave","Button","useLocales","useContext","Introduction","Introduction2","_ref","_context_options","context","locales","ctaUrl","options","walletOnboardingUrl","onboardingScreen_ctaUrl","children","Coinbase","background","MetaMask"],"sources":["../../../../../../src/connectkit/components/Pages/Onboarding/index.tsx"],"sourcesContent":[null],"mappings":"AACA,SAAAA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAAA,OACEC,KAAA;AAAA,SACAC,OAAA,EAAAC,SAAA,EAAAC,IAAA,EAAAC,YAAA,EAAAC,YAAA,EAAAC,SAAA,EAAAC,WAAA,EAAAC,iBAAA,EAAAC,aAAA;AAAA,SACAC,WAAA,EAAAC,SAAA,EAAAC,YAAA,EAAAC,OAAA;AAAA,OACAC,KAAA;AAAA,OACAC,IAAA;AAAA,OACAC,MAAA;AAAA,OACAC,UAAA;AAAA,SACAC,UAAA;AAAA,IACAC,YAAA,YAAAC,cAAA;EAAA,IAAAC,IACK;EAEP,IAAAC,gBAAA;EACE,IAAAC,OAAA,GAAAL,UAAA;EACA,IAAAM,OAAA,GAAAP,UAAA;EACA,IAAAQ,MAAA,IAAAJ,IAAA,IAAAC,gBAAA,GAAAC,OAAA,CAAAG,OAAA,cAAAJ,gBAAA,uBAAAA,gBAAA,CAAAK,mBAAA,cAAAN,IAAA,cAAAA,IAAA,GAAAG,OAAA,CAAAI,uBAAA;EACA,sBAAA7B,KAAA,CAAAW,WAAA;IAAAmB,QACK,GACP,eAAkB9B,KAAA,CAAAE,OAAA;MACX4B,QAAA,EAAU,CAEV,eAAY9B,KAAA,CAAAG,SAAA;QACZ2B,QAAA,GACE,eAAkBhC,IAAA,CAAAM,IAAA;UAWnB0B,QAAA,iBAAAhC,IAAA,CAAAQ,YAAA;YATFwB,QAAyB,EAAM,eAAAhC,IAAA,CAAAS,SAAA;cACnBuB,QAAA,EAAW,eAAAhC,IAAA,CAAAO,YAAA;gBACXyB,QAAY,EAAC,eAAAhC,IAAA,CAAAY,aAAA;kBAG3BoB,QAAQ,EAAS,eAAAhC,IAAA,CAAAU,WAA+B;oBAEhDsB,QAAC,iBACChC,IAAA,CAAAiB,KAAA,CAAAgB,QAAA;sBAACC,UACC;oBAAA,CAAC;kBACC;gBAaA;cAaA;YAaA;UAaA;QAaF,IACA,eAAClC,IAAA,CAAAM,IAAA;UACH0B,QAAA,iBAAAhC,IAAA,CAAAQ,YAAA;YACAwB,QAAC,iBAAahC,IAAO,CAAAS,SAAE;cACrBuB,QAAC,iBAAchC,IAAA,CAAEO,YAAA;gBACjByB,QAAC,iBAAWhC,IAAA,CAAAY,aAAQ;kBACtBoB,QAAA,iBAAAhC,IAAA,CAAAU,WAAA;oBACCsB,QAAO,iBAAchC,IAAK,CAAAiB,KACxB,CAAAkB,QAAA;sBAELD,UAAA;oBAEJ;kBAEO,CAAQ","ignoreList":[]}

package/dist/esm/connectkit/components/Pages/Onboarding/styles.mjs

@@ -0,0 +1,170 @@
+import { keyframes } from "styled-components";
+import styled from "./../../../styles/styled/index.mjs";
+import { motion } from "framer-motion";
+import defaultTheme from "../../../constants/defaultTheme.mjs";
+const Graphic = styled(motion.div)`
+  position: relative;
+  margin: 16px auto 20px;
+  height: 190px;
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+const LogoGroup = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const GraphicBackground = styled(motion.div)`
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none;
+  }
+`;
+const logoIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+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)`
+  position: absolute;
+`;
+const LogoGraphic = styled(motion.div)`
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const float = keyframes`
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+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`
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+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)`
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1){ z-index:2; animation-delay:0ms;  }
+  &:nth-child(2){ z-index:1; animation-delay:60ms; }
+  &:nth-child(3){ z-index:1; animation-delay:30ms; }
+  &:nth-child(4){ z-index:1; animation-delay:90ms; }
+  &:nth-child(5){ z-index:1; animation-delay:120ms;}
+
+  &:nth-child(1){ ${RotateWrapper}{ animation-delay:0ms; } }
+  &:nth-child(2){ ${RotateWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${RotateWrapper}{ animation-delay:-1200ms; } }
+  &:nth-child(4){ ${RotateWrapper}{ animation-delay:-1800ms; } }
+  &:nth-child(5){ ${RotateWrapper}{ animation-delay:-2400ms; } }
+
+  &:nth-child(1){ ${FloatWrapper}{ animation-delay:-200ms; } }
+  &:nth-child(2){ ${FloatWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${FloatWrapper}{ animation-delay:-800ms; } }
+  &:nth-child(4){ ${FloatWrapper}{ animation-delay:-300ms; } }
+  &:nth-child(5){ ${FloatWrapper}{ animation-delay:-3200ms; } }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none !important;
+    ${RotateWrapper},${FloatWrapper} {
+      animation: none !important;
+    }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+export { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper };
+//# sourceMappingURL=styles.mjs.map

package/dist/esm/connectkit/components/Pages/Onboarding/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["keyframes","styled","motion","defaultTheme","Graphic","div","mobileWidth","LogoGroup","graphicIn","GraphicBackground","logoIn","LogoPosition","LogoInner","LogoGraphic","float","FloatWrapper","rotate","RotateWrapper","Logo"],"sources":["../../../../../../src/connectkit/components/Pages/Onboarding/styles.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,QAAiB;AAC1B,OAAOC,MAAA,MAAY;AACnB,SAASC,MAAA,QAAc;AACvB,OAAOC,YAAA,MAAkB;AAElB,MAAMC,OAAA,GAAUH,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAODF,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAMC,SAAA,GAAYN,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAK1C,MAAMG,SAAA,GAAYR,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX,MAAMS,iBAAA,GAAoBR,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAuBnCG,SAAS;AAAA,uCACeL,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAK/D,MAAMI,MAAA,GAASV,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUR,MAAMW,YAAA,GAAeV,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC,MAAMO,SAAA,GAAYX,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAGnC,MAAMQ,WAAA,GAAcZ,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc5C,MAAMS,KAAA,GAAQd,SAAA;AAAA;AAAA;AAAA;AAIP,MAAMe,YAAA,GAAed,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA,oBAGzBS,KAAK;AAAA;AAAA;AAGzB,MAAME,MAAA,GAAShB,SAAA;AAAA;AAAA;AAAA;AAIR,MAAMiB,aAAA,GAAgBhB,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA,oBAG1BW,MAAM;AAAA;AAAA;AAGnB,MAAME,IAAA,GAAOjB,MAAA,CAAOC,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA,eAItBK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAODO,aAAa;AAAA,oBACbA,aAAa;AAAA,oBACbA,aAAa;AAAA,oBACbA,aAAa;AAAA,oBACbA,aAAa;AAAA;AAAA,oBAEbF,YAAY;AAAA,oBACZA,YAAY;AAAA,oBACZA,YAAY;AAAA,oBACZA,YAAY;AAAA,oBACZA,YAAY;AAAA;AAAA,uCAEOZ,YAAA,CAAaG,WAAW;AAAA;AAAA,MAEzDW,aAAa,IAAIF,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BH,SAAS;AAAA;AAAA;AAAA;AAAA,mBAIMD,YAAY;AAAA;AAAA,MAEzBE,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMEF,YAAY;AAAA;AAAA;AAAA,mBAGZA,YAAY;AAAA;AAAA;AAAA,mBAGZA,YAAY;AAAA;AAAA;AAAA,mBAGZA,YAAY;AAAA;AAAA;AAAA","ignoreList":[]}

package/dist/esm/connectkit/components/Pages/Onboarding/styles.native.js

@@ -0,0 +1,170 @@
+import { keyframes } from "styled-components";
+import styled from "./../../../styles/styled/index.native.js";
+import { motion } from "framer-motion";
+import defaultTheme from "../../../constants/defaultTheme.native.js";
+var Graphic = styled(motion.div)`
+  position: relative;
+  margin: 16px auto 20px;
+  height: 190px;
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+var LogoGroup = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+var graphicIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+var GraphicBackground = styled(motion.div)`
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none;
+  }
+`;
+var logoIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+var LogoPosition = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
+`;
+var LogoInner = styled(motion.div)`
+  position: absolute;
+`;
+var LogoGraphic = styled(motion.div)`
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+var float = keyframes`
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+var 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;
+`;
+var rotate = keyframes`
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+var 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;
+`;
+var Logo = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1){ z-index:2; animation-delay:0ms;  }
+  &:nth-child(2){ z-index:1; animation-delay:60ms; }
+  &:nth-child(3){ z-index:1; animation-delay:30ms; }
+  &:nth-child(4){ z-index:1; animation-delay:90ms; }
+  &:nth-child(5){ z-index:1; animation-delay:120ms;}
+
+  &:nth-child(1){ ${RotateWrapper}{ animation-delay:0ms; } }
+  &:nth-child(2){ ${RotateWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${RotateWrapper}{ animation-delay:-1200ms; } }
+  &:nth-child(4){ ${RotateWrapper}{ animation-delay:-1800ms; } }
+  &:nth-child(5){ ${RotateWrapper}{ animation-delay:-2400ms; } }
+
+  &:nth-child(1){ ${FloatWrapper}{ animation-delay:-200ms; } }
+  &:nth-child(2){ ${FloatWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${FloatWrapper}{ animation-delay:-800ms; } }
+  &:nth-child(4){ ${FloatWrapper}{ animation-delay:-300ms; } }
+  &:nth-child(5){ ${FloatWrapper}{ animation-delay:-3200ms; } }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none !important;
+    ${RotateWrapper},${FloatWrapper} {
+      animation: none !important;
+    }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+export { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper };
+//# sourceMappingURL=styles.native.js.map

package/dist/esm/connectkit/components/Pages/Onboarding/styles.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["keyframes","styled","motion","defaultTheme","Graphic","div","mobileWidth","LogoGroup","graphicIn","GraphicBackground","logoIn","LogoPosition","LogoInner","LogoGraphic","float","FloatWrapper","rotate","RotateWrapper","Logo"],"sources":["../../../../../../src/connectkit/components/Pages/Onboarding/styles.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,QAAiB;AAC1B,OAAOC,MAAA,MAAY;AACnB,SAASC,MAAA,QAAc;AACvB,OAAOC,YAAA,MAAkB;AAElB,IAAAC,OAAM,GAAAH,MAAU,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAODF,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxD,IAAAC,SAAM,GAAAN,MAAY,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA;AAAA;AAK1C,IAAAG,SAAM,GAAAR,SAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX,IAAAS,iBAAM,GAAAR,MAAoB,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAuBnCG,SAAS;AAAA,uCACeL,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAK/D,IAAAI,MAAM,GAAAV,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUR,IAAAW,YAAM,GAAAV,MAAe,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA;AAAA;AAAA;AAMtC,IAAAO,SAAM,GAAAX,MAAY,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAGnC,IAAAQ,WAAM,GAAAZ,MAAc,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc5C,IAAAS,KAAM,GAAAd,SAAQ;AAAA;AAAA;AAAA;AAIP,IAAAe,YAAM,GAAAd,MAAe,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA,oBAGzBS,KAAK;AAAA;AAAA;AAGzB,IAAAE,MAAM,GAAAhB,SAAS;AAAA;AAAA;AAAA;AAIR,IAAAiB,aAAM,GAAAhB,MAAgB,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA,oBAG1BW,MAAM;AAAA;AAAA;AAGnB,IAAAE,IAAM,GAAAjB,MAAO,CAAAC,MAAO,CAAAG,GAAO;AAAG;AAAA;AAAA;AAAA,eAItBK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAODO,aAAa;AAAA,oBACbA,aAAa;AAAA,oBACbA,aAAa;AAAA,oBACbA,aAAa;AAAA,oBACbA,aAAa;AAAA;AAAA,oBAEbF,YAAY;AAAA,oBACZA,YAAY;AAAA,oBACZA,YAAY;AAAA,oBACZA,YAAY;AAAA,oBACZA,YAAY;AAAA;AAAA,uCAEOZ,YAAA,CAAaG,WAAW;AAAA;AAAA,MAEzDW,aAAa,IAAIF,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BH,SAAS;AAAA;AAAA;AAAA;AAAA,mBAIMD,YAAY;AAAA;AAAA,MAEzBE,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMEF,YAAY;AAAA;AAAA;AAAA,mBAGZA,YAAY;AAAA;AAAA;AAAA,mBAGZA,YAAY;AAAA;AAAA;AAAA,mBAGZA,YAAY;AAAA;AAAA;AAAA","ignoreList":[]}

package/dist/esm/connectkit/components/Pages/Profile/index.mjs

@@ -0,0 +1,156 @@
+import { useEffect, useState } from "react";
+import { useContext } from "../../ConnectKit.mjs";
+import { isAaveAccountConnector, isSafeConnector, nFormatter, truncateEthAddress } from "../../../utils/index.mjs";
+import { useConnect, useDisconnect, useAccount, useEnsName, useBalance, useConnectorClient } from "wagmi";
+import { formatUnits } from "viem";
+import { AvatarContainer, AvatarInner, ChainSelectorContainer, BalanceContainer, LoadingBalance, Balance } from "./styles.mjs";
+import { PageContent, ModalBody, ModalContent, ModalH1 } from "../../Common/Modal/styles.mjs";
+import Button from "../../Common/Button/index.mjs";
+import Avatar from "../../Common/Avatar/index.mjs";
+import ChainSelector from "../../Common/ChainSelect/index.mjs";
+import { DisconnectIcon } from "../../../assets/icons.mjs";
+import CopyToClipboard from "../../Common/CopyToClipboard/index.mjs";
+import { AnimatePresence } from "framer-motion";
+import { useThemeContext } from "../../ConnectKitThemeProvider/ConnectKitThemeProvider.mjs";
+import useLocales from "../../../hooks/useLocales.mjs";
+import { useEnsFallbackConfig } from "../../../hooks/useEnsFallbackConfig.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const Profile = ({
+  closeModal
+}) => {
+  const context = useContext();
+  const themeContext = useThemeContext();
+  const locales = useLocales();
+  const {
+    reset
+  } = useConnect();
+  const {
+    disconnect
+  } = useDisconnect();
+  const {
+    address,
+    isConnected,
+    connector,
+    chain
+  } = useAccount();
+  const isAaveAccount = isAaveAccountConnector(connector?.id);
+  const {
+    data: connectorClient
+  } = useConnectorClient({
+    connector
+  });
+  const ensFallbackConfig = useEnsFallbackConfig();
+  const {
+    data: ensName
+  } = useEnsName({
+    chainId: 1,
+    address,
+    config: ensFallbackConfig
+  });
+  const {
+    data: rawBalance
+  } = useBalance({
+    address
+    //watch: true,
+  });
+  const balance = rawBalance ? {
+    ...rawBalance,
+    formatted: formatUnits(rawBalance.value, rawBalance.decimals)
+  } : void 0;
+  const [shouldDisconnect, setShouldDisconnect] = useState(false);
+  useEffect(() => {
+    if (!isConnected) context.setOpen(false);
+  }, [isConnected]);
+  useEffect(() => {
+    if (!shouldDisconnect) return;
+    if (closeModal) {
+      closeModal();
+    } else {
+      context.setOpen(false);
+    }
+    return () => {
+      disconnect();
+      reset();
+    };
+  }, [shouldDisconnect, disconnect, reset]);
+  const separator = ["web95", "rounded", "minimal"].includes(themeContext.theme ?? context.theme ?? "") ? "...." : void 0;
+  return /* @__PURE__ */jsxs(PageContent, {
+    children: [/* @__PURE__ */jsxs(ModalContent, {
+      style: {
+        paddingBottom: 22,
+        gap: 6
+      },
+      children: [/* @__PURE__ */jsx(AvatarContainer, {
+        children: /* @__PURE__ */jsxs(AvatarInner, {
+          children: [/* @__PURE__ */jsx(ChainSelectorContainer, {
+            children: /* @__PURE__ */jsx(ChainSelector, {})
+          }), /* @__PURE__ */jsx(Avatar, {
+            address
+          })]
+        })
+      }), /* @__PURE__ */jsx(ModalH1, {
+        children: /* @__PURE__ */jsx(CopyToClipboard, {
+          string: address,
+          children: ensName ?? truncateEthAddress(address, separator)
+        })
+      }), context?.options?.hideBalance ? null : /* @__PURE__ */jsx(ModalBody, {
+        children: /* @__PURE__ */jsx(BalanceContainer, {
+          children: /* @__PURE__ */jsxs(AnimatePresence, {
+            mode: "wait",
+            initial: false,
+            children: [balance && /* @__PURE__ */jsxs(Balance, {
+              initial: {
+                opacity: 0
+              },
+              animate: {
+                opacity: 1
+              },
+              exit: {
+                opacity: 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: [nFormatter(Number(balance?.formatted)), ` `, balance?.symbol]
+            }, `chain-${chain?.id}`), !balance && /* @__PURE__ */jsx(LoadingBalance, {
+              initial: {
+                opacity: 0
+              },
+              animate: {
+                opacity: 1
+              },
+              exit: {
+                opacity: 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: "\xA0"
+            })]
+          })
+        })
+      })]
+    }), isAaveAccount && /* @__PURE__ */jsx(Fragment, {
+      children: /* @__PURE__ */jsx(Button, {
+        onClick: async () => {
+          try {
+            await connectorClient?.request({
+              method: "aave_switchAccounts",
+              params: []
+            });
+          } catch (error) {
+            context.log("rpc method aave_switchAccounts is not implemented in this connector", error);
+          }
+        },
+        children: locales.switchWallets
+      })
+    }), !isSafeConnector(connector?.id) && /* @__PURE__ */jsx(Button, {
+      onClick: () => setShouldDisconnect(true),
+      icon: isAaveAccount ? void 0 : /* @__PURE__ */jsx(DisconnectIcon, {}),
+      children: locales.disconnect
+    })]
+  });
+};
+var Profile_default = Profile;
+export { Profile_default as default };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/connectkit/components/Pages/Profile/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useContext","isAaveAccountConnector","isSafeConnector","nFormatter","truncateEthAddress","useConnect","useDisconnect","useAccount","useEnsName","useBalance","useConnectorClient","formatUnits","AvatarContainer","AvatarInner","ChainSelectorContainer","BalanceContainer","LoadingBalance","Balance","PageContent","ModalBody","ModalContent","ModalH1","Button","Avatar","ChainSelector","DisconnectIcon","CopyToClipboard","AnimatePresence","useThemeContext","useLocales","useEnsFallbackConfig","Fragment","jsx","jsxs","Profile","closeModal","context","themeContext","locales","reset","disconnect","address","isConnected","connector","chain","isAaveAccount","id","data","connectorClient","ensFallbackConfig","ensName","chainId","config","rawBalance","balance","formatted","value","decimals","shouldDisconnect","setShouldDisconnect","setOpen","separator","includes","theme","children","style","paddingBottom","gap","string","options","hideBalance","mode","initial","opacity","animate","exit","transition","duration","Number","symbol","onClick","request","method","params","error","log","switchWallets","icon","Profile_default"],"sources":["../../../../../../src/connectkit/components/Pages/Profile/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}