@openfort/react 0.3.2 → 1.0.0

package/build/components/Common/CustomQRCode/QRCode.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import QRCodeUtil from 'qrcode';
+import { useMemo } from 'react';
+
+const generateMatrix = (value, errorCorrectionLevel) => {
+    const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
+    const sqrt = Math.sqrt(arr.length);
+    return arr.reduce((rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows, []);
+};
+function QRCode({ ecl = 'M', size: sizeProp = 200, uri, clearArea = false, image, imageBackground = 'transparent', }) {
+    const logoSize = clearArea ? 76 : 0;
+    const size = sizeProp - 10 * 2;
+    const dots = useMemo(() => {
+        const dots = [];
+        const matrix = generateMatrix(uri, ecl);
+        const cellSize = size / matrix.length;
+        const qrList = [
+            { x: 0, y: 0 },
+            { x: 1, y: 0 },
+            { x: 0, y: 1 },
+        ];
+        qrList.forEach(({ x, y }) => {
+            const x1 = (matrix.length - 7) * cellSize * x;
+            const y1 = (matrix.length - 7) * cellSize * y;
+            for (let i = 0; i < 3; i++) {
+                dots.push(jsx("rect", { fill: i % 2 !== 0 ? 'var(--ck-qr-background, var(--ck-body-background))' : 'var(--ck-qr-dot-color)', rx: (i - 2) * -5 + (i === 0 ? 2 : 3), ry: (i - 2) * -5 + (i === 0 ? 2 : 3), width: cellSize * (7 - i * 2), height: cellSize * (7 - i * 2), x: x1 + cellSize * i, y: y1 + cellSize * i }, `${i}-${x}-${y}`));
+            }
+        });
+        if (image) {
+            const x1 = (matrix.length - 7) * cellSize * 1;
+            const y1 = (matrix.length - 7) * cellSize * 1;
+            dots.push(jsxs(Fragment, { children: [jsx("rect", { fill: imageBackground, rx: (0 - 2) * -5 + 2, ry: (0 - 2) * -5 + 2, width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0 }), jsx("foreignObject", { width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0, children: jsx("div", { style: { borderRadius: (0 - 2) * -5 + 2, overflow: 'hidden' }, children: image }) })] }));
+        }
+        const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+        const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+        const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+        matrix.forEach((row, i) => {
+            row.forEach((_, j) => {
+                if (matrix[i][j]) {
+                    // Do not render dots under position squares
+                    if (!((i < 7 && j < 7) || (i > matrix.length - 8 && j < 7) || (i < 7 && j > matrix.length - 8))) {
+                        //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
+                        if (image ||
+                            !(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
+                            dots.push(jsx("circle", { cx: i * cellSize + cellSize / 2, cy: j * cellSize + cellSize / 2, fill: "var(--ck-qr-dot-color)", r: cellSize / 3 }, `qr-dot-${i}-${j}`));
+                        }
+                    }
+                }
+            });
+        });
+        return dots;
+    }, [ecl, size, uri]);
+    return (jsxs("svg", { height: size, width: size, viewBox: `0 0 ${size} ${size}`, style: {
+            width: size,
+            height: size,
+        }, children: [jsx("title", { children: "QR Code" }), jsx("rect", { fill: "transparent", height: size, width: size }), dots] }));
+}
+
+export { QRCode };
+//# sourceMappingURL=QRCode.js.map

package/build/components/Common/CustomQRCode/QRCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/CustomQRCode/index.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'framer-motion';
+import useWindowSize from '../../../hooks/useWindowSize.js';
+import Tooltip from '../Tooltip/index.js';
+import { QRCode } from './QRCode.js';
+import { QRCodeContainer, QRCodeContent, LogoContainer, LogoIcon, QRPlaceholder } from './styles.js';
+
+function CustomQRCode({ value, image, imageBackground, imagePosition = 'center', tooltipMessage }) {
+    const windowSize = useWindowSize();
+    const Logo = windowSize.width > 920 && tooltipMessage ? (jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
+    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', style: {
+                            background: imagePosition === 'center' ? imageBackground : undefined,
+                        }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
+                            duration: 0.2,
+                        }, children: jsx(QRCode, { uri: value, size: 288, ecl: "M", clearArea: !!(imagePosition === 'center' && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
+                            duration: 0.2,
+                        }, children: [jsx("span", {}), jsx("span", {}), jsx("span", {}), jsx("div", {})] })) })] }) }));
+}
+CustomQRCode.displayName = 'CustomQRCode';
+
+export { CustomQRCode as default };
+//# sourceMappingURL=index.js.map

package/build/components/Common/CustomQRCode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/CustomQRCode/styles.js

@@ -0,0 +1,155 @@
+import { motion } from 'framer-motion';
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const QRCodeContainer = styled(motion.div) `
+  z-index: 3;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 2px;
+  border-radius: var(--ck-qr-border-radius, 24px);
+  background: var(--ck-qr-background, transparent);
+  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
+  backface-visibility: hidden;
+  svg {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+`;
+const QRCodeContent = styled(motion.div) `
+  position: absolute;
+  inset: 13px;
+  svg {
+    width: 100% !important;
+    height: auto !important;
+  }
+`;
+const PlaceholderKeyframes = keyframes `
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+const QRPlaceholder = styled(motion.div) `
+  --color: var(--ck-qr-dot-color);
+  --bg: var(--ck-qr-background, var(--ck-body-background));
+
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > div {
+    z-index: 4;
+    position: relative;
+    width: 28%;
+    height: 28%;
+    border-radius: 20px;
+    background: var(--bg);
+    box-shadow: 0 0 0 7px var(--bg);
+  }
+  > span {
+    z-index: 4;
+    position: absolute;
+    background: var(--color);
+    border-radius: 12px;
+    width: 13.25%;
+    height: 13.25%;
+    box-shadow: 0 0 0 4px var(--bg);
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 9px;
+      border-radius: 3px;
+      box-shadow: 0 0 0 4px var(--bg);
+    }
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+  }
+  &:before {
+    z-index: 3;
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeat;
+    background-size: 1.888% 1.888%;
+    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+  }
+  &:after {
+    z-index: 5;
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: scale(1.5) rotate(45deg);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+  }
+`;
+const LogoContainer = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateY(50%) scale(0.9999); // Shifting fix
+`;
+const LogoIcon = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  left: 50%;
+  overflow: hidden;
+
+  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  ${(props) => props.$wcLogo
+    ? css `
+          width: 29%;
+          height: 20.5%;
+        `
+    : css `
+          width: 28%;
+          height: 28%;
+          border-radius: 17px;
+          &:before {
+            pointer-events: none;
+            z-index: 2;
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+          }
+        `}
+`;
+
+export { LogoContainer, LogoIcon, QRCodeContainer, QRCodeContent, QRPlaceholder };
+//# sourceMappingURL=styles.js.map

package/build/components/Common/CustomQRCode/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/FitText/index.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import useFitText from '../../../hooks/useFitText.js';
+
+const FitText = ({ children, maxFontSize = 100, minFontSize = 70, justifyContent = 'center', }) => {
+    const [ready, setReady] = React.useState(false);
+    const handleReady = useCallback(() => setReady(true), []);
+    const { fontSize, ref: textRef } = useFitText({
+        logLevel: 'none',
+        maxFontSize,
+        minFontSize,
+        onStart: handleReady,
+        onFinish: handleReady,
+    });
+    return (jsx("div", { ref: textRef, style: {
+            visibility: ready ? 'visible' : 'hidden',
+            fontSize: `${fontSize}%`,
+            maxHeight: '100%',
+            maxWidth: '100%',
+            display: 'flex',
+            justifyContent,
+            alignItems: 'center',
+        }, children: children }));
+};
+FitText.displayName = 'FitText';
+
+export { FitText as default };
+//# sourceMappingURL=index.js.map

package/build/components/Common/FitText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/Input/index.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { EyeIcon, EyeOffIcon } from '../../../assets/icons.js';
+import { InputContainer, Input as Input$1, IconButton } from './styles.js';
+
+const PasswordInput = ({ ...props }) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    return (jsxs(InputContainer, { children: [jsx(Input$1, { ...props, style: { paddingRight: '48px', ...props.style }, type: showPassword ? 'text' : 'password' }), jsx(IconButton, { type: "button", onClick: () => setShowPassword(!showPassword), children: showPassword ? jsx(EyeIcon, {}) : jsx(EyeOffIcon, {}) })] }));
+};
+const Input = ({ ...props }) => {
+    if (props.type === 'password')
+        return jsx(PasswordInput, { ...props });
+    return (jsx(InputContainer, { children: jsx(Input$1, { ...props }) }));
+};
+
+export { Input as default };
+//# sourceMappingURL=index.js.map

package/build/components/Common/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/components/Common/Input/styles.js

@@ -0,0 +1,53 @@
+import styled from '../../../styles/styled/index.js';
+
+const InputContainer = styled.div `
+  position: relative;
+  width: 100%;
+  height: 48px;
+  margin: 12px 0 0;
+`;
+const Input = styled.input `
+  padding: 10px 15px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  box-shadow: var(--ck-secondary-button-box-shadow);
+  background: var(--ck-input-background);
+  font-size: 1rem;
+  color: var(--ck-body-color);
+  transition: all 0.2s;
+  width: 100%;
+  height: 100%;
+
+  ::placeholder {
+    color: var(--ck-body-color-muted);
+  }
+
+  &:focus {
+    background: var(--ck-input-hover-background);
+    box-shadow: var(--ck-secondary-button-hover-box-shadow);
+  }
+`;
+const IconButton = styled.button `
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 14px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ck-body-color-muted);
+  transition: all 0.2s;
+
+  > svg {
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover {
+    color: var(--ck-body-color);
+  }
+`;
+
+export { IconButton, Input, InputContainer };
+//# sourceMappingURL=styles.js.map

package/build/components/Common/Input/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/LargeButton/index.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Button from '../Button/index.js';
+import { LargeButtonStyle, LargeButtonLabel, LargeButtonIcon } from './styles.js';
+
+const LargeButton = ({ children, icon, onClick, disabled }) => {
+    return (jsx(LargeButtonStyle, { children: jsxs(Button, { onClick: onClick, disabled: disabled, children: [jsx(LargeButtonLabel, { children: children }), jsx(LargeButtonIcon, { children: icon })] }) }));
+};
+
+export { LargeButton };
+//# sourceMappingURL=index.js.map

package/build/components/Common/LargeButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/build/components/Common/LargeButton/styles.js

@@ -0,0 +1,69 @@
+import styled from '../../../styles/styled/index.js';
+import { ButtonContainer, ButtonContainerInner, InnerContainer } from '../Button/styles.js';
+import { ProviderInputInner } from '../../Pages/Providers/styles.js';
+
+const LargeButtonStyle = styled.div `
+  ${ButtonContainer} {
+    height: 64px;
+    font-size: 17px;
+    font-weight: var(--ck-primary-button-font-weight, 500);
+    line-height: 20px;
+  }
+
+  ${ProviderInputInner} {
+    height: 64px;
+  }
+
+  &:first-of-type {
+    ${ButtonContainer}, ${ProviderInputInner} {
+      margin-top: 0;
+    }
+  }
+
+  ${ButtonContainerInner} {
+    padding: 0 20px;
+    justify-content: space-between;
+  }
+
+  ${InnerContainer} {
+    justify-content: space-between;
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+const LargeButtonLabel = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+`;
+const LargeButtonIcon = styled.div `
+  width: 32px;
+  height: 32px;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-shape='squircle'] {
+    border-radius: 22.5%;
+  }
+  &[data-shape='circle'] {
+    border-radius: 100%;
+  }
+  &[data-shape='square'] {
+    border-radius: 0;
+  }
+`;
+
+export { LargeButtonIcon, LargeButtonLabel, LargeButtonStyle };
+//# sourceMappingURL=styles.js.map

package/build/components/Common/LargeButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/Loading/index.js

@@ -0,0 +1,96 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useEffect } from 'react';
+import { keyframes, css } from 'styled-components';
+import { RetryIconCircle, TickIcon } from '../../../assets/icons.js';
+import Logos from '../../../assets/logos.js';
+import useLocales from '../../../hooks/useLocales.js';
+import styled from '../../../styles/styled/index.js';
+import { RetryButton, RetryIconContainer } from '../../ConnectModal/ConnectWithInjector/styles.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { ModalH1, ModalBody } from '../Modal/styles.js';
+import SquircleSpinner from '../SquircleSpinner/index.js';
+import Tooltip from '../Tooltip/index.js';
+
+const LoadingTextWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 8px 16px;
+  text-align: center;
+`;
+const ConnectingContainer = styled(motion.div) `
+display: flex;
+align-items: center;
+justify-content: center;
+margin: 10px auto 16px;
+height: 120px;
+`;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const outlineKeyframes = keyframes `
+  0%{ opacity:0; }
+  100%{ opacity:1; }
+`;
+const ConnectingAnimation = styled(motion.div) `
+  position: relative;
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: ${(props) => props.$color};
+  }
+  ${(props) => !!props.$color &&
+    css `
+    &:before {
+      opacity: 1;
+    }
+  `}
+  ${(props) => props.$shake &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes} 220ms ease-out both;
+      }
+    `}
+`;
+const Loader = ({ header, description, icon, isError = false, isSuccess = false, isLoading = !isError && !isSuccess, onRetry, }) => {
+    const { uiConfig: options } = useOpenfort();
+    const { triggerResize } = useOpenfort();
+    const locales = useLocales();
+    useEffect(() => {
+        return () => triggerResize();
+    }, []);
+    const renderLogo = () => {
+        if (icon) {
+            return icon;
+        }
+        if (options === null || options === void 0 ? void 0 : options.logo) {
+            if (typeof options.logo === 'string') {
+                return jsx("img", { src: options.logo, alt: "Logo", style: { width: '100%' } });
+            }
+            return options.logo;
+        }
+        return jsx(Logos.Openfort, {});
+    };
+    return (jsxs(Fragment, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$color": isSuccess ? 'var(--ck-body-color-valid)' : isError ? 'var(--ck-body-color-danger)' : undefined, "$shake": isError, children: [jsx(AnimatePresence, { children: isError && onRetry && (jsx(RetryButton, { "aria-label": "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: onRetry, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: isError, message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), jsx(SquircleSpinner, { logo: jsx("div", { style: {
+                                    padding: '12px',
+                                    position: 'relative',
+                                    width: '100%',
+                                }, children: renderLogo() }), connecting: isLoading })] }) }), jsxs(LoadingTextWrapper, { children: [isLoading && (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Loading, please wait" }), jsx(ModalBody, { children: description !== null && description !== void 0 ? description : header })] })), isSuccess && (jsxs(Fragment, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", header] }), jsx(ModalBody, { children: description })] })), isError && (jsxs(Fragment, { children: [jsx(ModalH1, { "$error": true, children: header }), jsx(ModalBody, { children: description })] }))] })] }));
+};
+
+export { Loader as default };
+//# sourceMappingURL=index.js.map

package/build/components/Common/Loading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}