@relayprotocol/relay-kit-ui 2.17.2

package/_esm/src/components/common/TransactionModal/steps/WaitingForDepositStep.js

@@ -0,0 +1,84 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import {} from 'react';
+import { Button, ChainIcon, Flex, Pill, Skeleton, Text, Box, Anchor } from '../../../primitives/index.js';
+import { LoadingSpinner } from '../../LoadingSpinner.js';
+import { truncateAddress } from '../../../../utils/truncate.js';
+import {} from '../../../../types/index.js';
+import { getDeadAddress } from '@relayprotocol/relay-sdk';
+import { CopyToClipBoard } from '../../CopyToClipBoard.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQrcode } from '@fortawesome/free-solid-svg-icons';
+import { QRCodeCanvas } from 'qrcode.react';
+import { generateQrWalletDeeplink } from '../../../../utils/qrcode.js';
+import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from '@radix-ui/react-popover';
+export const WaitingForDepositStep = ({ fromToken, fromChain, fromAmountFormatted, isFetchingQuote, depositAddress }) => {
+    const qrcodeUrl = generateQrWalletDeeplink(fromChain?.vmType, fromAmountFormatted, fromToken &&
+        fromChain &&
+        fromToken.address !== getDeadAddress(fromChain?.vmType)
+        ? fromToken.address
+        : undefined, depositAddress, fromChain?.id);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: "column", css: {
+                    '--borderColor': 'colors.subtle-border-color',
+                    border: '1px solid var(--borderColor)',
+                    borderRadius: 8,
+                    px: '2',
+                    py: '3',
+                    mb: '3',
+                    gap: '2'
+                }, children: [_jsxs(Text, { style: "body2", children: ["Transfer funds manually from your ", fromChain?.displayName, " wallet to Relay\u2019s deposit address to complete the bridge."] }), _jsx(Anchor, { href: "https://support.relay.link/en/articles/10269920-how-do-deposit-addresses-work", target: "_blank", children: "Learn More" })] }), _jsxs(Flex, { css: { gap: '1' }, children: [_jsxs(Flex, { css: { gap: '1', width: '100%' }, direction: "column", children: [_jsx(Text, { style: "subtitle2", children: "Network" }), _jsxs(Pill, { color: "gray", css: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    py: '2'
+                                }, radius: "squared", children: [_jsx(ChainIcon, { chainId: fromChain?.id, height: 20, width: 20 }), _jsx(Text, { style: "h6", children: fromChain?.displayName })] })] }), _jsxs(Flex, { css: { gap: '1', width: '100%' }, direction: "column", children: [_jsx(Text, { style: "subtitle2", children: "Amount to transfer" }), _jsxs(Pill, { color: "gray", css: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    py: '2'
+                                }, radius: "squared", children: [fromAmountFormatted ? (_jsxs(_Fragment, { children: [' ', _jsx(Text, { style: "h6", css: { fontWeight: '500', mr: '1' }, children: fromAmountFormatted }), _jsx("img", { alt: fromToken?.name, src: fromToken?.logoURI, width: 20, height: 20, style: {
+                                                    borderRadius: 9999
+                                                } }), _jsx(Text, { style: "h6", children: fromToken?.symbol })] })) : (_jsx(Skeleton, { css: { height: 24, width: '100%' } })), ' '] })] })] }), _jsx(Text, { style: "subtitle2", children: "Relay's Deposit Address" }), _jsx(Pill, { radius: "rounded", color: "gray", css: { display: 'flex', alignItems: 'center', gap: '3', p: '3' }, children: isFetchingQuote ? (_jsx(Skeleton, { css: { height: 21, width: '100%' } })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: "subtitle2", css: { marginRight: 'auto' }, children: truncateAddress(depositAddress, '...', 28, 4) }), qrcodeUrl ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { style: { cursor: 'pointer' }, children: _jsx(Box, { css: { color: 'gray9' }, children: _jsx(FontAwesomeIcon, { icon: faQrcode, style: { width: 16, height: 16 } }) }) }), _jsx(PopoverPortal, { children: _jsx(PopoverContent, { style: { zIndex: 9999 }, sideOffset: 4, children: _jsx(Box, { css: {
+                                                boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
+                                                borderRadius: 8,
+                                                overflow: 'hidden',
+                                                transition: 'transform 0.3s ease',
+                                                '&:hover': {
+                                                    transform: 'scale(1.25)'
+                                                }
+                                            }, children: _jsx(Box, { css: {
+                                                    background: 'modal-background',
+                                                    p: '2'
+                                                }, children: _jsxs(Flex, { css: { margin: '0 auto', width: 105, height: 105 }, children: [_jsx(Flex, { css: {
+                                                                position: 'absolute',
+                                                                width: 105,
+                                                                height: 105,
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center'
+                                                            }, children: _jsxs(Flex, { css: {
+                                                                    position: 'relative',
+                                                                    zIndex: '999',
+                                                                    transform: 'translate3d(0,0,0)'
+                                                                }, children: [_jsx(ChainIcon, { chainId: fromChain?.id, height: 14, width: 14, css: {
+                                                                            borderRadius: 4,
+                                                                            border: '1.5px solid white',
+                                                                            position: 'absolute',
+                                                                            bottom: 0,
+                                                                            right: 0
+                                                                        } }), _jsx("img", { alt: fromToken?.name, src: fromToken?.logoURI, width: 33, height: 33, style: {
+                                                                            borderRadius: '100%',
+                                                                            border: '1.5px solid white',
+                                                                            background: 'white'
+                                                                        } })] }) }), _jsx(QRCodeCanvas, { value: qrcodeUrl, width: 105, height: 105, level: 'H', imageSettings: {
+                                                                src: 'data:image/png;base64,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Y29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk0PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6VXNlckNvbW1lbnQ+U2NyZWVuc2hvdDwvZXhpZjpVc2VyQ29tbWVudD4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE4NjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kmj5GzQAAACtJREFUWAnt0DEBAAAAwqD1T20ND4hAYcCAAQMGDBgwYMCAAQMGDBgwcDEwEakAAc3C1KAAAAAASUVORK5CYII=',
+                                                                height: 33,
+                                                                width: 33,
+                                                                excavate: true
+                                                            }, style: {
+                                                                margin: '0 auto',
+                                                                width: 105,
+                                                                height: 105
+                                                            } })] }) }) }) }) })] })) : null, _jsx(CopyToClipBoard, { text: depositAddress ?? '' })] })) }), _jsxs(Button, { disabled: true, css: {
+                    color: 'button-disabled-color !important',
+                    mt: 8,
+                    justifyContent: 'center'
+                }, children: [_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'button-disabled-color' } }), "Waiting for you to transfer funds"] })] }));
+};
+//# sourceMappingURL=WaitingForDepositStep.js.map

package/_esm/src/components/common/TransactionModal/steps/WaitingForDepositStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitingForDepositStep.js","sourceRoot":"","sources":["../../../../../../src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/common/UnverifiedTokenModal.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from './Modal.js';
+import { Anchor, Box, Button, Flex, Text } from '../primitives/index.js';
+import { CopyToClipBoard } from './CopyToClipBoard.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle, faExternalLink } from '@fortawesome/free-solid-svg-icons';
+import useRelayClient from '../../hooks/useRelayClient.js';
+import { alreadyAcceptedToken, getRelayUiKitData, setRelayUiKitData } from '../../utils/localStorage.js';
+import { EventNames } from '../../constants/events.js';
+export const UnverifiedTokenModal = ({ open, onOpenChange, data, onAcceptToken, onDecline, onAnalyticEvent }) => {
+    const client = useRelayClient();
+    const chain = client?.chains?.find((chain) => chain.id === data?.token?.chainId);
+    const isValidTokenLogo = data?.token?.logoURI && data?.token?.logoURI !== 'missing.png';
+    return (_jsx(Modal, { trigger: null, open: open, onOpenChange: onOpenChange, onPointerDownOutside: () => {
+            onDecline?.(data?.token, data?.context);
+        }, onCloseButtonClicked: () => {
+            onDecline?.(data?.token, data?.context);
+        }, css: {
+            overflow: 'hidden',
+            zIndex: 1000
+        }, overlayZIndex: 10001, children: _jsxs(Flex, { direction: "column", css: {
+                width: '100%',
+                height: '100%',
+                gap: '4',
+                sm: {
+                    width: 370
+                }
+            }, children: [_jsx(Text, { style: "h6", children: "Unverified Token" }), _jsxs(Flex, { align: "center", direction: "column", css: { gap: '4' }, children: [_jsxs(Flex, { align: "center", justify: "center", children: [isValidTokenLogo ? (_jsx("img", { src: data?.token.logoURI, alt: data?.token?.name, style: { width: '48px', height: '48px', borderRadius: 9999 } })) : null, _jsx(Flex, { align: "center", css: {
+                                        width: '48px',
+                                        height: '48px',
+                                        background: 'amber3',
+                                        borderRadius: 9999,
+                                        p: '3',
+                                        marginLeft: isValidTokenLogo ? '-20px' : '0'
+                                    }, children: _jsx(Box, { css: { color: 'amber9' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationTriangle, width: 24, height: 24, style: { width: 24, height: 24 } }) }) })] }), _jsx(Text, { style: "subtitle2", color: "subtle", css: { textAlign: 'center' }, children: "This token isn\u2019t traded on leading U.S. centralized exchanges or frequently swapped on major DEXes. Always conduct your own research before trading." }), _jsxs(Flex, { align: "center", css: {
+                                gap: '3',
+                                p: '3',
+                                bg: 'gray2',
+                                borderRadius: '12px',
+                                width: '100%'
+                            }, children: [_jsx(Text, { style: "subtitle2", ellipsify: true, children: data?.token?.address }), _jsx(CopyToClipBoard, { text: data?.token?.address ?? '' }), _jsx(Anchor, { href: `${chain?.explorerUrl}/token/${data?.token?.address}`, target: "_blank", css: { height: '14px' }, children: _jsx(Box, { css: { color: 'gray9', _hover: { color: 'gray11' } }, children: _jsx(FontAwesomeIcon, { icon: faExternalLink }) }) })] }), _jsxs(Flex, { css: { gap: '3', width: '100%' }, children: [_jsx(Button, { onClick: () => {
+                                        onDecline?.(data?.token, data?.context);
+                                        onOpenChange(false);
+                                    }, color: "ghost", css: {
+                                        flex: 1,
+                                        justifyContent: 'center',
+                                        bg: 'gray3',
+                                        _hover: { bg: 'gray4' }
+                                    }, children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                        if (data?.token) {
+                                            const tokenIdentifier = `${data?.token.chainId}:${data?.token.address}`;
+                                            const alreadyAccepted = alreadyAcceptedToken(data?.token);
+                                            const currentData = getRelayUiKitData();
+                                            if (!alreadyAccepted) {
+                                                setRelayUiKitData({
+                                                    acceptedUnverifiedTokens: [
+                                                        ...currentData.acceptedUnverifiedTokens,
+                                                        tokenIdentifier
+                                                    ]
+                                                });
+                                            }
+                                            onAnalyticEvent?.(EventNames.UNVERIFIED_TOKEN_ACCEPTED, {
+                                                token: data?.token,
+                                                context: data?.context
+                                            });
+                                        }
+                                        onAcceptToken(data?.token, data?.context);
+                                    }, color: "warning", css: { flex: 1, justifyContent: 'center' }, children: "I Understand" })] })] })] }) }));
+};
+//# sourceMappingURL=UnverifiedTokenModal.js.map

package/_esm/src/components/common/UnverifiedTokenModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnverifiedTokenModal.js","sourceRoot":"","sources":["../../../../src/components/common/UnverifiedTokenModal.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/primitives/AccessibleList.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+const AccessibleListContainerCss = cva({
+    base: {
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});
+const AccessibleListItemCss = cva({
+    base: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        userSelect: 'none',
+        cursor: 'pointer',
+        '&[data-state=on]': {}
+    }
+});
+export const AccessibleList = ({ children, onSelect, css }) => {
+    return (_jsx(ToggleGroup.Root, { type: "single", loop: false, onValueChange: onSelect, className: designCss(AccessibleListContainerCss.raw(), designCss.raw(css)), children: children }));
+};
+export const AccessibleListItem = forwardRef(({ children, value, css, asChild, ...props }, forwardedRef) => {
+    return (_jsx(ToggleGroup.Item, { value: value, className: designCss(AccessibleListItemCss.raw(), designCss.raw(css)), asChild: asChild, ...props, ref: forwardedRef, children: children }));
+});
+AccessibleListItem.displayName = 'AccessibleListItem';
+//# sourceMappingURL=AccessibleList.js.map

package/_esm/src/components/primitives/AccessibleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibleList.js","sourceRoot":"","sources":["../../../../src/components/primitives/AccessibleList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAW,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAE/C,MAAM,0BAA0B,GAAG,GAAG,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,SAAS;QACjB,kBAAkB,EAAE,EAAE;KACvB;CACF,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,QAAQ,EACR,QAAQ,EACR,GAAG,EACJ,EAAE,EAAE;IACH,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EACX,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,SAAS,CAClB,0BAA0B,CAAC,GAAG,EAAE,EAChC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,YAEA,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA;AASD,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9D,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACrE,OAAO,EAAE,OAAO,KACZ,KAAK,EACT,GAAG,EAAE,YAAY,YAEhB,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA"}

package/_esm/src/components/primitives/Anchor.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+const AnchorStyle = cva({
+    base: {
+        cursor: 'pointer',
+        width: 'max-content',
+        fontWeight: 500,
+        fontSize: 14,
+        color: 'anchor-color',
+        _hover: {
+            color: 'anchor-hover-color'
+        },
+        '--focusColor': 'colors.focus-color',
+        _focusVisible: {
+            boxShadow: '0 0 0 2px var(--focusColor)',
+            outline: 'none',
+            borderRadius: '4px'
+        }
+    },
+    variants: {
+        color: {
+            gray: {
+                color: 'gray11',
+                _hover: { color: 'gray12' }
+            },
+            base: {
+                color: 'anchor-color',
+                _hover: {
+                    color: 'anchor-hover-color'
+                }
+            },
+            black: {
+                color: 'gray12',
+                _hover: {
+                    color: 'gray12'
+                }
+            }
+        },
+        weight: {
+            heavy: { fontWeight: 900 },
+            bold: { fontWeight: 700 },
+            semi_bold: { fontWeight: 600 }
+        }
+    }
+});
+const Anchor = ({ css, weight, color, ...props }) => {
+    return (_jsx("a", { ...props, className: designCss(AnchorStyle.raw({ weight, color }), designCss.raw(css)) }));
+};
+export const AnchorButton = ({ css, weight, color, children, ...props }) => {
+    return (_jsx("button", { ...props, className: designCss(AnchorStyle.raw({ weight, color }), designCss.raw(css)), children: children }));
+};
+export default Anchor;
+//# sourceMappingURL=Anchor.js.map

package/_esm/src/components/primitives/Anchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../../../src/components/primitives/Anchor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAG/C,MAAM,WAAW,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,aAAa;QACpB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE;YACN,KAAK,EAAE,oBAAoB;SAC5B;QACD,cAAc,EAAE,oBAAoB;QACpC,aAAa,EAAE;YACb,SAAS,EAAE,6BAA6B;YACxC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;SACpB;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;aAC5B;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,cAAc;gBACrB,MAAM,EAAE;oBACN,KAAK,EAAE,oBAAoB;iBAC5B;aACF;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE;oBACN,KAAK,EAAE,QAAQ;iBAChB;aACF;SACF;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;YAC1B,IAAI,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;YACzB,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;SAC/B;KACF;CACF,CAAC,CAAA;AAIF,MAAM,MAAM,GAER,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvC,OAAO,CACL,eACM,KAAK,EACT,SAAS,EAAE,SAAS,CAClB,WAAW,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAClC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,GACE,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAErB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjD,OAAO,CACL,oBACM,KAAK,EACT,SAAS,EAAE,SAAS,CAClB,WAAW,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAClC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,YAEA,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/_esm/src/components/primitives/Box.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+const BoxCss = cva({});
+const Box = ({ css, children, id, ...props }) => {
+    return (_jsx("div", { className: designCss(BoxCss.raw(props), designCss.raw(css)), id: id, children: children }));
+};
+export default Box;
+//# sourceMappingURL=Box.js.map

package/_esm/src/components/primitives/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/primitives/Box.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAG/C,MAAM,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,CAAA;AAItB,MAAM,GAAG,GAEL,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,YACrE,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}

package/_esm/src/components/primitives/Button.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { forwardRef } from 'react';
+const ButtonCss = cva({
+    base: {
+        cursor: 'pointer',
+        outline: 'none',
+        fontFamily: 'body',
+        fontWeight: 700,
+        fontSize: 16,
+        transition: 'background-color 250ms linear',
+        gap: '2',
+        display: 'inline-flex',
+        alignItems: 'center',
+        lineHeight: '20px',
+        '--focusColor': 'colors.focus-color',
+        _focusVisible: {
+            boxShadow: '0 0 0 2px var(--focusColor)'
+        },
+        _disabled: {
+            cursor: 'not-allowed',
+            backgroundColor: 'button-disabled-background',
+            color: 'button-disabled-color',
+            _hover: {
+                backgroundColor: 'button-disabled-background',
+                color: 'button-disabled-color'
+            }
+        }
+    },
+    variants: {
+        color: {
+            primary: {
+                backgroundColor: 'primary-button-background',
+                color: 'primary-button-color',
+                '&:hover': {
+                    backgroundColor: 'primary-button-hover-background',
+                    color: 'primary-button-hover-color'
+                }
+            },
+            primaryOutline: {
+                backgroundColor: 'transparent',
+                color: 'gray12',
+                '--border-color': 'primary-outline-button-color',
+                border: '1px solid var(--border-color)',
+                '&:hover': {
+                    color: 'primary-outline-button-hover-color'
+                }
+            },
+            secondary: {
+                backgroundColor: 'secondary-button-background',
+                color: 'secondary-button-color',
+                '&:hover': {
+                    backgroundColor: 'secondary-button-hover-background',
+                    color: 'secondary-button-hover-color'
+                }
+            },
+            tertiary: {
+                backgroundColor: 'tertiary-button-background',
+                color: 'tertiary-button-color',
+                '&:hover': {
+                    backgroundColor: 'tertiary-button-hover-background',
+                    color: 'tertiary-button-hover-color'
+                }
+            },
+            ghost: {
+                color: 'text-default',
+                backgroundColor: 'transparent'
+            },
+            white: {
+                '--borderColor': 'colors.subtle-border-color',
+                backgroundColor: 'widget-background',
+                transition: 'filter 250ms linear',
+                '&:hover': {
+                    filter: 'brightness(97%)'
+                },
+                border: '1px solid var(--borderColor)'
+            },
+            error: {
+                backgroundColor: 'red9',
+                color: 'white',
+                '&:hover': {
+                    backgroundColor: 'red10'
+                }
+            },
+            warning: {
+                backgroundColor: 'amber3',
+                color: 'amber11',
+                '&:hover': {
+                    backgroundColor: 'amber4',
+                    color: 'amber11'
+                }
+            },
+            grey: {
+                backgroundColor: 'gray3',
+                color: 'gray11',
+                '&:hover': {
+                    backgroundColor: 'gray4'
+                }
+            }
+        },
+        corners: {
+            square: {
+                borderRadius: 0
+            },
+            rounded: {
+                borderRadius: 8
+            },
+            pill: {
+                borderRadius: 99999
+            },
+            circle: {
+                borderRadius: '99999px',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }
+        },
+        size: {
+            none: {},
+            xs: {
+                p: '3',
+                lineHeight: '16px',
+                minHeight: 40
+            },
+            small: {
+                px: '3',
+                py: '2',
+                lineHeight: '12px',
+                minHeight: 40
+            },
+            medium: {
+                px: '5',
+                py: '3',
+                minHeight: 44
+            },
+            large: {
+                px: '5',
+                py: '4',
+                minHeight: 52
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'primary',
+        corners: 'rounded',
+        size: 'medium'
+    }
+});
+const Button = forwardRef(({ css, children, ...props }, forwardedRef) => {
+    const { color, size, corners, ...buttonProps } = { ...props };
+    return (_jsx("button", { ...buttonProps, ref: forwardedRef, className: designCss(ButtonCss.raw({ color, size, corners }), designCss.raw(css)), children: children }));
+});
+export default Button;
+//# sourceMappingURL=Button.js.map

package/_esm/src/components/primitives/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/primitives/Button.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/primitives/ChainIcon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Flex } from './index.js';
+import useRelayClient from '../../hooks/useRelayClient.js';
+import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js';
+const ChainIcon = ({ chainId, css = {}, height = 14, width = 14, square = true }) => {
+    const providerOptions = useContext(ProviderOptionsContext);
+    const client = useRelayClient();
+    const chain = chainId
+        ? client?.chains?.find((chain) => chain.id === chainId)
+        : null;
+    const icon = chain
+        ? providerOptions.themeScheme === 'dark'
+            ? chain.icon?.dark || chain.icon?.light
+            : chain.icon?.light
+        : null;
+    const iconUrl = square && icon ? icon.replace('/icons/', '/icons/square/') : icon;
+    return iconUrl ? (_jsx(Flex, { css: {
+            display: 'flex',
+            flexShrink: 0,
+            ...css
+        }, style: {
+            height: height,
+            width: width
+        }, children: iconUrl ? (_jsx("img", { src: iconUrl, alt: `Chain #${chainId}`, style: {
+                borderRadius: square ? 4 : 0,
+                width: css && css.width ? Number(css.width) : '100%',
+                height: css && css.height ? Number(css.height) : '100%'
+            } })) : null })) : null;
+};
+export default ChainIcon;
+//# sourceMappingURL=ChainIcon.js.map

package/_esm/src/components/primitives/ChainIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,cAAc,MAAM,+BAA+B,CAAA;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAU5E,MAAM,SAAS,GAAc,CAAC,EAC5B,OAAO,EACP,GAAG,GAAG,EAAE,EACR,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,IAAI,EACd,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAC1D,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,KAAK,GAAG,OAAO;QACnB,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC;QACvD,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,IAAI,GAAG,KAAK;QAChB,CAAC,CAAC,eAAe,CAAC,WAAW,KAAK,MAAM;YACtC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK;YACvC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK;QACrB,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,OAAO,GACX,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAEnE,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IACH,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,CAAC;YACb,GAAG,GAAG;SACP,EACD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,KAAK;SACb,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,cACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,UAAU,OAAO,EAAE,EACxB,KAAK,EAAE;gBACL,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC5B,KAAK,EAAE,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM;gBACpD,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM;aACxD,GACD,CACH,CAAC,CAAC,CAAC,IAAI,GACH,CACR,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/_esm/src/components/primitives/ChainTokenIcon.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
+import Flex from './Flex.js';
+import ChainIcon from './ChainIcon.js';
+import Box from './Box.js';
+import Text from './Text.js';
+const SIZES = {
+    md: {
+        token: 32,
+        chain: 16
+    },
+    lg: {
+        token: 40,
+        chain: 18
+    }
+};
+export const ChainTokenIcon = ({ chainId, tokenlogoURI, tokenSymbol, css = {}, size = 'md' }) => {
+    const isValidTokenLogo = tokenlogoURI && tokenlogoURI !== 'missing.png';
+    const dimensions = SIZES[size];
+    return chainId ? (_jsxs(Flex, { css: {
+            position: 'relative',
+            flexShrink: 0,
+            width: dimensions.token,
+            height: dimensions.token,
+            overflow: 'hidden',
+            ...css
+        }, children: [isValidTokenLogo ? (_jsx("img", { alt: 'Token', src: tokenlogoURI, width: dimensions.token, height: dimensions.token, style: {
+                    borderRadius: 9999,
+                    overflow: 'hidden'
+                } })) : tokenSymbol ? (_jsx(Box, { css: {
+                    width: dimensions.token,
+                    height: dimensions.token,
+                    borderRadius: '50%',
+                    backgroundColor: 'primary4',
+                    color: 'primary8',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }, children: _jsx(Text, { style: "h6", children: tokenSymbol?.charAt(0).toUpperCase() }) })) : null, _jsx(ChainIcon, { chainId: chainId, width: dimensions.chain, height: dimensions.chain, css: {
+                    position: 'absolute',
+                    right: 0,
+                    bottom: 0,
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                    '--borderColor': 'colors.modal-background',
+                    border: '1px solid var(--borderColor)',
+                    backgroundColor: 'modal-background'
+                } })] })) : null;
+};
+//# sourceMappingURL=ChainTokenIcon.js.map

package/_esm/src/components/primitives/ChainTokenIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainTokenIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainTokenIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,GAAG,MAAM,UAAU,CAAA;AAC1B,OAAO,IAAI,MAAM,WAAW,CAAA;AAa5B,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,EAAE,EAAE;QACF,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,cAAc,GAAwB,CAAC,EAClD,OAAO,EACP,YAAY,EACZ,WAAW,EACX,GAAG,GAAG,EAAE,EACR,IAAI,GAAG,IAAI,EACZ,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,YAAY,IAAI,YAAY,KAAK,aAAa,CAAA;IACvE,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IAE9B,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,MAAC,IAAI,IACH,GAAG,EAAE;YACH,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,CAAC;YACb,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,KAAK;YACxB,QAAQ,EAAE,QAAQ;YAClB,GAAG,GAAG;SACP,aAEA,gBAAgB,CAAC,CAAC,CAAC,CAClB,cACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,KAAK,EACxB,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,QAAQ,EAAE,QAAQ;iBACnB,GACD,CACH,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,GAAG,IACF,GAAG,EAAE;oBACH,KAAK,EAAE,UAAU,CAAC,KAAK;oBACvB,MAAM,EAAE,UAAU,CAAC,KAAK;oBACxB,YAAY,EAAE,KAAK;oBACnB,eAAe,EAAE,UAAU;oBAC3B,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;iBACzB,YAED,KAAC,IAAI,IAAC,KAAK,EAAC,IAAI,YAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAQ,GAC1D,CACP,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,KAAK,EACxB,GAAG,EAAE;oBACH,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,YAAY,EAAE,CAAC;oBACf,QAAQ,EAAE,QAAQ;oBAClB,eAAe,EAAE,yBAAyB;oBAC1C,MAAM,EAAE,8BAA8B;oBACtC,eAAe,EAAE,kBAAkB;iBACpC,GACD,IACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/_esm/src/components/primitives/Collapsible.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { forwardRef } from 'react';
+const CollapsibleContentCss = cva({
+    base: {
+        overflow: 'hidden',
+        _data_state_open: {
+            animation: `collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)`
+        },
+        _data_state_closed: {
+            animation: `collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)`
+        }
+    }
+});
+const CollapsibleRootCss = cva({
+    base: {
+        width: '100%'
+    }
+});
+const CollapsibleTriggerCss = cva({
+    base: {
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer'
+    }
+});
+const CollapsibleContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(Collapsible.CollapsibleContent, { ref: forwardedRef, ...props, className: designCss(CollapsibleContentCss.raw(), designCss.raw(css)), children: children }));
+});
+const CollapsibleRoot = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(Collapsible.Root, { ref: forwardedRef, ...props, className: designCss(CollapsibleRootCss.raw(), designCss.raw(css)), children: children }));
+});
+const CollapsibleTrigger = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(Collapsible.Trigger, { ref: forwardedRef, ...props, className: designCss(CollapsibleTriggerCss.raw(), designCss.raw(css)), children: children }));
+});
+export { CollapsibleRoot, CollapsibleContent, CollapsibleTrigger };
+//# sourceMappingURL=Collapsible.js.map

package/_esm/src/components/primitives/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../../../src/components/primitives/Collapsible.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EACL,UAAU,EAIX,MAAM,OAAO,CAAA;AAEd,MAAM,qBAAqB,GAAG,GAAG,CAAC;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,gBAAgB,EAAE;YAChB,SAAS,EAAE,2DAA2D;SACvE;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,yDAAyD;SACrE;KACF;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,GAAG,CAAC;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAC;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,UAAU,CAInC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,WAAW,CAAC,kBAAkB,IAC7B,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEpE,QAAQ,GACsB,CAClC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,eAAe,GAAG,UAAU,CAIhC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEjE,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,UAAU,CAInC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,WAAW,CAAC,OAAO,IAClB,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEpE,QAAQ,GACW,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}