@openfort/react 0.3.2 → 1.0.0

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

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

package/build/components/Common/Avatar/index.d.ts

@@ -1,14 +1,22 @@
 import type React from 'react';
-type Hash = `0x${string}`;
+/** Props for custom avatar rendering (e.g. custom image component). */
 export type CustomAvatarProps = {
-    address?: Hash | undefined;
+    address?: string | undefined;
     ensName?: string | undefined;
     ensImage?: string;
     size: number;
     radius: number;
 };
+/**
+ * Displays wallet avatar. Resolves ENS on Ethereum mainnet; falls back to identicon or initials.
+ *
+ * @example
+ * ```tsx
+ * <Avatar address={address} name="Wallet" size={40} radius={20} />
+ * ```
+ */
 declare const Avatar: React.FC<{
-    address?: Hash | undefined;
+    address?: string | undefined;
     name?: string | undefined;
     size?: number;
     radius?: number;

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

@@ -0,0 +1,100 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { useConnectionStrategy } from '../../../core/ConnectionStrategyContext.js';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import useIsMounted from '../../../hooks/useIsMounted.js';
+import { ResetContainer } from '../../../styles/index.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { EnsAvatar, ImageContainer } from './styles.js';
+
+/**
+ * Displays wallet avatar. Resolves ENS on Ethereum mainnet; falls back to identicon or initials.
+ *
+ * @example
+ * ```tsx
+ * <Avatar address={address} name="Wallet" size={40} radius={20} />
+ * ```
+ */
+const Avatar = ({ address, name, size = 96, radius = 96 }) => {
+    var _a;
+    const isMounted = useIsMounted();
+    const context = useOpenfort();
+    const strategy = useConnectionStrategy();
+    const bridge = useEthereumBridge();
+    // Only resolve ENS on mainnet (1); testnets throw "network does not support ENS"
+    const useEns = (strategy === null || strategy === void 0 ? void 0 : strategy.kind) === 'bridge' && !!bridge && ((_a = bridge.chainId) !== null && _a !== void 0 ? _a : 0) === 1;
+    const imageRef = useRef(null);
+    const [loaded, setLoaded] = useState(true);
+    const [ens, setEns] = useState({});
+    useEffect(() => {
+        if (!useEns) {
+            setEns({ address, name });
+            return;
+        }
+        const resolve = async () => {
+            var _a, _b, _c, _d, _e, _f;
+            let resolvedAddress = address;
+            let resolvedName = name;
+            const hexAddress = (address === null || address === void 0 ? void 0 : address.startsWith('0x')) ? address : undefined;
+            try {
+                if (name && bridge.getEnsAddress) {
+                    resolvedAddress = (_a = (await bridge.getEnsAddress(name))) !== null && _a !== void 0 ? _a : address;
+                }
+                if (hexAddress && bridge.getEnsName) {
+                    resolvedName = (_b = (await bridge.getEnsName({ address: hexAddress }))) !== null && _b !== void 0 ? _b : name;
+                }
+                if (((_c = bridge.account) === null || _c === void 0 ? void 0 : _c.address) === address && ((_d = bridge.account) === null || _d === void 0 ? void 0 : _d.ensName)) {
+                    resolvedName = bridge.account.ensName;
+                }
+                if (((_e = bridge.account) === null || _e === void 0 ? void 0 : _e.address) === address && ((_f = bridge.account) === null || _f === void 0 ? void 0 : _f.ensAvatar)) {
+                    setEns({
+                        address: resolvedAddress !== null && resolvedAddress !== void 0 ? resolvedAddress : address,
+                        name: resolvedName !== null && resolvedName !== void 0 ? resolvedName : name,
+                        avatar: bridge.account.ensAvatar,
+                    });
+                    return;
+                }
+                let avatar;
+                if (resolvedName && bridge.getEnsAvatar) {
+                    avatar = await bridge.getEnsAvatar(resolvedName);
+                }
+                setEns({
+                    address: resolvedAddress !== null && resolvedAddress !== void 0 ? resolvedAddress : address,
+                    name: resolvedName !== null && resolvedName !== void 0 ? resolvedName : name,
+                    avatar,
+                });
+            }
+            catch {
+                setEns({ address: resolvedAddress !== null && resolvedAddress !== void 0 ? resolvedAddress : address, name: resolvedName !== null && resolvedName !== void 0 ? resolvedName : name });
+            }
+        };
+        resolve();
+    }, [useEns, bridge, address, name]);
+    useEffect(() => {
+        var _a;
+        if (!(((_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.complete) && imageRef.current.naturalHeight !== 0)) {
+            setLoaded(false);
+        }
+    }, [ens.avatar]);
+    if (!isMounted)
+        return jsx("div", { style: { width: size, height: size, borderRadius: radius } });
+    if (context.uiConfig.customAvatar)
+        return (jsx("div", { style: {
+                width: size,
+                height: size,
+                borderRadius: radius,
+                overflow: 'hidden',
+            }, children: context.uiConfig.customAvatar({
+                address: address !== null && address !== void 0 ? address : ens === null || ens === void 0 ? void 0 : ens.address,
+                ensName: name !== null && name !== void 0 ? name : ens === null || ens === void 0 ? void 0 : ens.name,
+                ensImage: ens === null || ens === void 0 ? void 0 : ens.avatar,
+                size,
+                radius,
+            }) }));
+    if (!ens.name || !ens.avatar)
+        return (jsx(ResetContainer, { style: { pointerEvents: 'none' }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius }) }));
+    return (jsx(ResetContainer, { style: { pointerEvents: 'none' }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius, children: jsx(ImageContainer, { ref: imageRef, src: ens.avatar, alt: ens.name, onLoad: () => setLoaded(true), "$loaded": loaded }) }) }));
+};
+
+export { Avatar as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,59 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+function addressToNumber(address) {
+    return ((address
+        .split('')
+        .map((l) => l.charCodeAt(0))
+        .reduce((a, b) => a + b) %
+        100) /
+        100);
+}
+const EnsAvatar = styled(motion.div) `
+  will-change: transform; // Needed for Safari
+  pointer-events: none;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border-radius: ${(props) => `${props.$radius}px`};
+  width: ${(props) => `${props.$size}px`};
+  height: ${(props) => `${props.$size}px`};
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  &:before {
+    content: '';
+    z-index: 1;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+  }
+  ${(props) => {
+    if (props.$seed) {
+        const id = Math.ceil(addressToNumber(props.$seed) * 8);
+        const ensColor = `0${id === 0 ? 1 : id}`; // No zero ID in ENS color list.. 🤷‍♀️
+        return css `
+        background: var(--ck-ens-${ensColor}-start);
+        background: linear-gradient(
+          180deg,
+          var(--ck-ens-${ensColor}-start) 0%,
+          var(--ck-ens-${ensColor}-stop) 100%
+        );
+      `;
+    }
+}}
+`;
+const ImageContainer = styled(motion.img) `
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: ${(props) => (props.$loaded ? 1 : 0)};
+  will-change: opacity; // Needed for Safari
+  transition: opacity 500ms ease;
+  transform: scale(1.01); // fixes background color bleeding
+`;
+
+export { EnsAvatar, ImageContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import browsers from '../../../assets/browsers.js';
+import { detectBrowser } from '../../../utils/index.js';
+import { BrowserIconContainer } from './styles.js';
+
+const BrowserIcon = React.forwardRef(({ browser }, _ref) => {
+    const currentBrowser = browser !== null && browser !== void 0 ? browser : detectBrowser();
+    let icon;
+    switch (currentBrowser) {
+        case 'chrome':
+            icon = browsers.Chrome;
+            break;
+        case 'firefox':
+            icon = browsers.FireFox;
+            break;
+        case 'edge':
+            icon = browsers.Edge;
+            break;
+    }
+    if (!icon)
+        return null;
+    return jsx(BrowserIconContainer, { children: icon });
+});
+BrowserIcon.displayName = 'BrowserIcon';
+
+export { BrowserIcon as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,20 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const BrowserIconContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 32px;
+  max-height: 32px;
+  width: 100%;
+  height: 100%;
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export { BrowserIconContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { flattenChildren } from '../../../utils/index.js';
+import FitText from '../FitText/index.js';
+import { Spinner } from '../Spinner/index.js';
+import { ButtonContainer, ButtonContainerInner, IconContainer, DownloadArrow, DownloadArrowInner, Arrow, ArrowLine, ArrowChevron, InnerContainer, SpinnerContainer } from './styles.js';
+
+const transition = {
+    duration: 0.4,
+    ease: [0.175, 0.885, 0.32, 0.98],
+};
+const Button = ({ className, children, variant = 'secondary', // unique aspect to how we're handling buttons
+disabled, type, icon, iconPosition = 'left', roundedIcon, waiting, arrow, download, href, style, onClick, textAlign, title, fitText = true, }) => {
+    const key = typeof children === 'string' ? children : flattenChildren(children).join(''); // Need to generate a string for the key so we can automatically animate between content
+    const hrefUrl = href && (typeof href === 'string' ? href : flattenChildren(href).join('')); // Need to have a flat string for the href
+    return (jsx(ButtonContainer, { className: className, as: href ? 'a' : type ? 'button' : undefined, type: type, onClick: (event) => {
+            if (!disabled && onClick)
+                onClick(event);
+        }, href: href && hrefUrl, target: href && '_blank', rel: href && 'noopener noreferrer', disabled: disabled, "$variant": variant, style: style, title: title, children: jsxs(AnimatePresence, { initial: false, children: [jsxs(ButtonContainerInner, { initial: { opacity: 0, y: -10 }, animate: {
+                        opacity: 1,
+                        y: -1,
+                    }, exit: {
+                        position: 'absolute',
+                        opacity: 0,
+                        y: 10,
+                        transition: {
+                            ...transition,
+                        },
+                    }, transition: {
+                        ...transition,
+                        delay: 0.2,
+                    }, children: [icon && iconPosition === 'left' && jsx(IconContainer, { "$rounded": roundedIcon, children: icon }), download && (jsx(DownloadArrow, { children: jsx(DownloadArrowInner, { children: jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: fitText ? jsx(FitText, { justifyContent: textAlign, children: children }) : children }), icon && iconPosition === 'right' && jsx(IconContainer, { "$rounded": roundedIcon, children: icon }), arrow && (jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (jsx(SpinnerContainer, { children: jsx(Spinner, {}) }))] }) }));
+};
+
+export { Button as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,302 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const SpinnerContainer = styled(motion.div) `
+  position: absolute;
+  right: 16px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Arrow = styled.svg `
+  --x: -3px;
+  --stroke-width: 2;
+  position: relative;
+  top: 1px;
+  left: -0.5px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 1px;
+  transition: all 100ms ease;
+  transform: translateX(var(--x, -3px));
+  color: currentColor;
+  opacity: 0.4;
+`;
+const ArrowChevron = styled.path ``;
+const ArrowLine = styled.line `
+  transition: inherit;
+  transition-property: transform;
+  transform-origin: 90% 50%;
+  transform: scaleX(0.1);
+`;
+const DownloadArrow = styled.div `
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin-right: 6px;
+  color: currentColor;
+`;
+const DownloadArrowInner = styled.div `
+  transform: rotate(90deg);
+  ${Arrow} {
+    margin: 0 auto;
+  }
+`;
+const ButtonContainerInner = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
+const ButtonContainer = styled.button `
+
+  ${({ disabled }) => disabled &&
+    css `
+      cursor: not-allowed;
+      pointer-events: none;
+      ${InnerContainer} {
+        opacity: 0.4;
+      }
+    `}
+
+  ${({ $variant }) => {
+    if ($variant === 'primary') {
+        return css `
+        --color: var(--ck-primary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-primary-button-background,
+          var(--ck-body-background-primary)
+        );
+        --box-shadow: var(--ck-primary-button-box-shadow);
+        --border-radius: var(--ck-primary-button-border-radius);
+        --font-weight: var(--ck-primary-button-font-weight, 500);
+
+        --hover-color: var(--ck-button-primary-hover-color, var(--color));
+        --hover-background: var(
+          --ck-primary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-primary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-primary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-primary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+    }
+    else if ($variant === 'secondary') {
+        return css `
+        --color: var(--ck-secondary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-secondary-button-background,
+          var(--ck-body-background-secondary)
+        );
+        --box-shadow: var(--ck-secondary-button-box-shadow);
+        --border-radius: var(--ck-secondary-button-border-radius);
+        --font-weight: var(--ck-secondary-button-font-weight, 500);
+
+        --hover-color: var(--ck-secondary-button-hover-color, var(--color));
+        --hover-background: var(
+          --ck-secondary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-secondary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-secondary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-secondary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+    }
+    else if ($variant === 'tertiary') {
+        return css `
+        --color: var(
+          --ck-tertiary-button-color,
+          var(--ck-secondary-button-color)
+        );
+        --background: var(
+          --ck-tertiary-button-background,
+          var(--ck-secondary-button-background)
+        );
+        --box-shadow: var(
+          --ck-tertiary-button-box-shadow,
+          var(--ck-secondary-button-box-shadow)
+        );
+        --border-radius: var(
+          --ck-tertiary-button-border-radius,
+          var(--ck-secondary-button-border-radius)
+        );
+        --font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+
+        --hover-color: var(
+          var(--ck-tertiary-button-color)
+        );
+        --hover-background: var(
+          --ck-tertiary-button-hover-background,
+          var(--ck-tertiary-button-background)
+        );
+        --hover-box-shadow: var(
+          --ck-tertiary-button-hover-box-shadow,
+          var(--ck-tertiary-button-box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-tertiary-button-hover-border-radius,
+          var(--ck-tertiary-button-border-radius, var(--border-radius))
+        );
+        --hover-font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+      `;
+    }
+}}
+
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  min-width: fit-content;
+  width: 100%;
+  display:block;
+  text-align: center;
+  height: 48px;
+  margin: 12px 0 0;
+  line-height: 48px;
+  padding: 0 4px;
+  font-size: 16px;
+  font-weight: var(--font-weight,500);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 100ms ease;
+  transition-property: box-shadow, background-color;
+  color: var(--color);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  will-change: transform, box-shadow, background-color, color;
+
+  ${DownloadArrow} {
+    ${Arrow} {
+      transform: translateX(0);
+      ${ArrowLine} {
+        transform: none;
+      }
+      ${ArrowChevron} {
+      }
+    }
+  }
+
+  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+    &:hover,
+    &:focus-visible {
+      color: var(--ck-accent-text-color, var(--hover-color));
+      background: var(--ck-accent-color, var(--hover-background));
+      border-radius: var(--hover-border-radius);
+      box-shadow: var(--hover-box-shadow);
+
+      ${Arrow} {
+        transform: translateX(0);
+        ${ArrowLine} {
+          transform: none;
+        }
+        ${ArrowChevron} {
+        }
+      }
+      ${DownloadArrow} {
+        ${Arrow} {
+          transform: translateX(var(--x));
+          ${ArrowLine} {
+            transform: scaleX(0.1);
+          }
+          ${ArrowChevron} {
+          }
+        }
+      }
+    }
+    &:active {
+      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));
+    }
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    transition: transform 100ms ease;
+    transform: scale(1);
+    font-size: 17px;
+    &:active {
+    }
+  }
+`;
+const InnerContainer = styled.div `
+  transform: translateZ(0); // Shifting fix
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 42px);
+  transition: opacity 300ms ease;
+  /*
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+`;
+const IconContainer = styled(motion.div) `
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20px;
+  max-height: 20px;
+  margin: 0 10px;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+  ${(props) => {
+    return (props.$rounded &&
+        css `
+        overflow: hidden;
+        border-radius: 5px;
+      `);
+}}
+  svg {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    height: auto;
+  }
+`;
+const TextLinkButton = styled.button `
+  background: none;
+  border: none;
+
+  cursor: pointer;
+  font-size: inherit;
+  color: var(--ck-body-color-muted, inherit);
+  text-decoration: none;
+  transition: color 200ms ease;
+  &:hover {
+    color: var(--ck-body-color-muted-hover, inherit);
+  }
+`;
+
+export { Arrow, ArrowChevron, ArrowLine, ButtonContainer, ButtonContainerInner, DownloadArrow, DownloadArrowInner, IconContainer, InnerContainer, SpinnerContainer, TextLinkButton };
+//# sourceMappingURL=styles.js.map

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

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

package/build/components/Common/Button/types.d.ts

@@ -4,6 +4,7 @@ export type ButtonProps = {
     children?: React.ReactNode;
     variant?: 'primary' | 'secondary' | 'tertiary';
     disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     roundedIcon?: boolean;

package/build/components/Common/Chain/index.d.ts

@@ -1,4 +1,12 @@
 import type React from 'react';
+/**
+ * Displays chain icon. Shows loading state or unsupported when chain is not configured.
+ *
+ * @example
+ * ```tsx
+ * <Chain id={chainId} />
+ * ```
+ */
 declare const Chain: React.FC<{
     id?: number;
     unsupported?: boolean;

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { useId } from 'react';
+import ChainIcons from '../../../assets/chains.js';
+import { chainConfigs } from '../../../constants/chainConfigs.js';
+import useIsMounted from '../../../hooks/useIsMounted.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { ChainContainer, Unsupported, LogoContainer, LoadingContainer } from './styles.js';
+
+const Spinner = () => {
+    const id = useId();
+    return (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Loading spinner" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z", fill: `url(#paint0_linear_${id})` }), jsx("defs", { children: jsxs("linearGradient", { id: `paint0_linear_${id}`, x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0.7" }), jsx("stop", { offset: "1", stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0" })] }) })] }));
+};
+/**
+ * Displays chain icon. Shows loading state or unsupported when chain is not configured.
+ *
+ * @example
+ * ```tsx
+ * <Chain id={chainId} />
+ * ```
+ */
+const Chain = ({ id, unsupported: controlledUnsupported, radius = '50%', size = 24 }) => {
+    var _a;
+    const { chains } = useOpenfort();
+    const chainIsSupported = id != null && chains.some((c) => c.id === id);
+    const unsupported = controlledUnsupported !== null && controlledUnsupported !== void 0 ? controlledUnsupported : !chainIsSupported;
+    const chain = chainConfigs.find((c) => c.id === id);
+    const isMounted = useIsMounted();
+    if (!isMounted)
+        return (jsx("div", { style: {
+                width: size,
+                height: size,
+            } }));
+    return (jsx(ChainContainer, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Unsupported network warning" }), jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: (_a = chain === null || chain === void 0 ? void 0 : chain.logo) !== null && _a !== void 0 ? _a : jsx(ChainIcons.UnknownChain, {}) }, `${chain === null || chain === void 0 ? void 0 : chain.id}-${chain === null || chain === void 0 ? void 0 : chain.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: jsx(Spinner, {}) }, "loading"))] }) }));
+};
+
+export { Chain as default };
+//# sourceMappingURL=index.js.map

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

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