@coin-voyage/paykit 0.1.21 → 0.1.22

package/dist/components/Pages/MobileConnectors/styles.js

@@ -1,62 +1,62 @@
 import { css, keyframes } from "styled-components";
 import styled from "../../../styles/styled";
-export const WalletItem = styled.div `
-  text-align: center;
-  transition: opacity 100ms ease;
-  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+export const WalletItem = styled.div `
+  text-align: center;
+  transition: opacity 100ms ease;
+  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
 `;
-export const WalletIcon = styled.div `
-  z-index: 9;
-  position: relative;
-  margin: 0 auto 10px;
-  border-radius: 16px;
-  width: 60px;
-  height: 60px;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.04);
+export const WalletIcon = styled.div `
+  z-index: 9;
+  position: relative;
+  margin: 0 auto 10px;
+  border-radius: 16px;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.04);
   ${(props) => props.$outline &&
-    `
-  &:before {
-    content: '';
-    z-index: 2;
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
-  }`}
-  svg {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: auto;
-  }
+    `
+  &:before {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+  }`}
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
 `;
-export const WalletLabel = styled.div `
-  color: var(--ck-body-color);
-  font-size: 13px;
-  line-height: 15px;
-  font-weight: 500;
-  opacity: 0.75;
+export const WalletLabel = styled.div `
+  color: var(--ck-body-color);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 500;
+  opacity: 0.75;
 `;
-const PulseKeyframes = keyframes `
-  0%,100% { opacity:1; }
-  50% { opacity:0.5; }
+const PulseKeyframes = keyframes `
+  0%,100% { opacity:1; }
+  50% { opacity:0.5; }
 `;
-export 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;
+export 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 `
-      pointer-events: none;
-      opacity: 0.4;
-      ${WalletItem} {
-        animation: ${PulseKeyframes} 1s infinite ease-in-out;
-      }
-    `}
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+      ${WalletItem} {
+        animation: ${PulseKeyframes} 1s infinite ease-in-out;
+      }
+    `}
 `;
 export const Container = styled.div ``;
 //# sourceMappingURL=styles.js.map

package/dist/components/Pages/Onboarding/index.js

@@ -8,6 +8,6 @@ import Button from "../../ui/Button";
 export default function Introduction() {
     const locales = useLocales({});
     const ctaUrl = 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.Coinbase, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Trust, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Argent, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), _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 })] }));
+    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.Coinbase, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Trust, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Ready, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), _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 })] }));
 }
 //# sourceMappingURL=index.js.map

package/dist/components/Pages/Onboarding/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/Onboarding/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,YAAY,EACZ,OAAO,EACP,iBAAiB,EACjB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,GACd,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,MAAM,uBAAuB,CAAA;AACzC,OAAO,IAAI,MAAM,sBAAsB,CAAA;AACvC,OAAO,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,OAAO,UAAU,YAAY;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,CAAA;IAE9B,MAAM,MAAM,GAAG,OAAO,CAAC,uBAAuB,CAAA;IAC9C,OAAO,CACL,MAAC,WAAW,eACV,MAAC,OAAO,eACN,MAAC,SAAS,eACR,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,QAAQ,IAAC,UAAU,SAAG,GACjB,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,QAAQ,IAAC,UAAU,SAAG,GACjB,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,KAAK,KAAG,GACH,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,MAAM,KAAG,GACJ,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,OAAO,KAAG,GACL,GACA,GACH,GACL,GACC,GACV,IACG,EACZ,KAAC,iBAAiB,cAAE,IAAI,GAAqB,IACrC,EACV,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,aACxC,KAAC,OAAO,8BAAS,OAAO,CAAC,mBAAmB,GAAW,EACvD,KAAC,SAAS,cAAE,OAAO,CAAC,kBAAkB,GAAa,IACtC,EACf,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,KAAK,kBACxB,OAAO,CAAC,wBAAwB,GAC1B,IACG,CACf,CAAA;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/Onboarding/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,YAAY,EACZ,OAAO,EACP,iBAAiB,EACjB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,GACd,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,MAAM,uBAAuB,CAAA;AACzC,OAAO,IAAI,MAAM,sBAAsB,CAAA;AACvC,OAAO,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,OAAO,UAAU,YAAY;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,CAAA;IAE9B,MAAM,MAAM,GAAG,OAAO,CAAC,uBAAuB,CAAA;IAC9C,OAAO,CACL,MAAC,WAAW,eACV,MAAC,OAAO,eACN,MAAC,SAAS,eACR,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,QAAQ,IAAC,UAAU,SAAG,GACjB,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,QAAQ,IAAC,UAAU,SAAG,GACjB,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,KAAK,KAAG,GACH,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,KAAK,KAAG,GACH,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,OAAO,KAAG,GACL,GACA,GACH,GACL,GACC,GACV,IACG,EACZ,KAAC,iBAAiB,cAAE,IAAI,GAAqB,IACrC,EACV,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,aACxC,KAAC,OAAO,8BAAS,OAAO,CAAC,mBAAmB,GAAW,EACvD,KAAC,SAAS,cAAE,OAAO,CAAC,kBAAkB,GAAa,IACtC,EACf,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,KAAK,kBACxB,OAAO,CAAC,wBAAwB,GAC1B,IACG,CACf,CAAA;AACH,CAAC"}

package/dist/components/Pages/Onboarding/styles.js

@@ -2,225 +2,225 @@ import { motion } from "framer-motion";
 import { keyframes } from "styled-components";
 import defaultTheme from "../../../lib/config/default-theme";
 import styled from "../../../styles/styled";
-export 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;
-  }
+export 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;
+  }
 `;
-export const LogoGroup = styled(motion.div) `
-  position: absolute;
-  inset: 0;
-  z-index: 2;
+export 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 graphicIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
 `;
-export 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;
-  // }
+export 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 logoIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
 `;
-export 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;
+export 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;
 `;
-export const LogoInner = styled(motion.div) `
-  position: absolute;
+export const LogoInner = styled(motion.div) `
+  position: absolute;
 `;
-export 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%;
-  }
+export 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 float = keyframes `
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
 `;
-export 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;
+export 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 rotate = keyframes `
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
 `;
-export 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;
+export 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;
 `;
-export 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 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%);
+  }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/components/Pages/PayWithToken/index.js

@@ -127,45 +127,45 @@ export default function PayWithToken() {
                         _jsxs(_Fragment, { children: [_jsxs(ModalH1, { "$error": true, children: [_jsx(AlertIcon, {}), locales.injectionScreen_rejected_h1] }), _jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }), payState === PayState.SwitchingChain &&
                         _jsx(ModalH1, { children: locales.switchNetworkScreen_heading }), payState === PayState.RequestingPayment && (_jsxs(_Fragment, { children: [_jsx(ModalH1, { children: locales.requesting_payment_h1 }), _jsx(ModalBody, { children: locales.requesting_payment_p })] })), payState === PayState.RequestSuccessful && (_jsx(ModalH1, { children: locales.injectionScreen_connected_h1 }))] }) : _jsxs(ModalContent, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] })] }));
 }
-const LoadingContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px auto 16px;
-  height: 120px;
+const LoadingContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
 `;
-const ChainLogoContainer = styled(motion.div) `
-  z-index: 10;
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  overflow: hidden;
-
-  color: var(--ck-body-background);
-  transition: color 200ms ease;
-
-  &:before {
-    z-index: 5;
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    transition: opacity 200ms ease;
-    background: var(--ck-body-color);
-  }
-
-  svg {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
+const ChainLogoContainer = styled(motion.div) `
+  z-index: 10;
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  overflow: hidden;
+
+  color: var(--ck-body-background);
+  transition: color 200ms ease;
+
+  &:before {
+    z-index: 5;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    background: var(--ck-body-color);
+  }
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
 `;
 //# sourceMappingURL=index.js.map