@provablehq/aleo-wallet-adaptor-react-ui 0.1.1-alpha.0

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useWalletModal.tsx","../src/WalletConnectButton.tsx","../src/Button.tsx","../src/WalletIcon.tsx","../src/WalletModal.tsx","../src/Collapse.tsx","../src/WalletListItem.tsx","../src/AleoIcon.tsx","../src/ProvableLogo.tsx","../src/WalletModalButton.tsx","../src/WalletModalProvider.tsx","../src/WalletDisconnectButton.tsx","../src/WalletMultiButton.tsx","../src/icons.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface WalletModalContextState {\n  visible: boolean;\n  setVisible: (open: boolean) => void;\n}\n\nconst DEFAULT_CONTEXT = {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  setVisible(_open: boolean) {\n    console.error(constructMissingProviderErrorMessage('call', 'setVisible'));\n  },\n  visible: false,\n};\nObject.defineProperty(DEFAULT_CONTEXT, 'visible', {\n  get() {\n    console.error(constructMissingProviderErrorMessage('read', 'visible'));\n    return false;\n  },\n});\n\nfunction constructMissingProviderErrorMessage(action: string, valueName: string) {\n  return (\n    'You have tried to ' +\n    `${action} \"${valueName}\"` +\n    ' on a WalletModalContext without providing one.' +\n    ' Make sure to render a WalletModalProvider' +\n    ' as an ancestor of the component that uses ' +\n    'WalletModalContext'\n  );\n}\n\nexport const WalletModalContext = createContext<WalletModalContextState>(\n  DEFAULT_CONTEXT as WalletModalContextState,\n);\n\nexport function useWalletModal(): WalletModalContextState {\n  return useContext(WalletModalContext);\n}\n","import type { FC, MouseEventHandler } from 'react';\nimport { useCallback, useMemo } from 'react';\nimport type { ButtonProps } from './Button';\nimport { Button } from './Button';\nimport { WalletIcon } from './WalletIcon';\nimport { Network } from '@provablehq/aleo-types';\nimport { useWallet } from '@provablehq/aleo-wallet-adaptor-react';\n\nexport const WalletConnectButton: FC<ButtonProps> = ({\n  children,\n  disabled,\n  onClick,\n  network,\n  ...props\n}) => {\n  const { wallet, connect, connecting, connected } = useWallet();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    event => {\n      if (onClick) onClick(event);\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      if (!event.defaultPrevented) connect(network || Network.TESTNET3).catch(() => {});\n    },\n    [onClick, connect],\n  );\n\n  const content = useMemo(() => {\n    if (children) return children;\n    if (connecting) return 'Connecting ...';\n    if (connected) return 'Connected';\n    if (wallet) return 'Connect';\n    return 'Connect Wallet';\n  }, [children, connecting, connected, wallet]);\n\n  return (\n    <Button\n      className=\"wallet-adapter-button-trigger\"\n      disabled={disabled || !wallet || connecting || connected}\n      startIcon={wallet ? <WalletIcon wallet={wallet} /> : undefined}\n      onClick={handleClick}\n      {...props}\n    >\n      {content}\n    </Button>\n  );\n};\n","import type { CSSProperties, FC, MouseEvent, PropsWithChildren, ReactElement } from 'react';\nimport { Network } from '@provablehq/aleo-types';\n\nexport type ButtonProps = PropsWithChildren<{\n  className?: string;\n  disabled?: boolean;\n  network?: Network;\n  endIcon?: ReactElement;\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n  startIcon?: ReactElement;\n  style?: CSSProperties;\n  tabIndex?: number;\n}>;\n\nexport const Button: FC<ButtonProps> = props => {\n  return (\n    <button\n      className={`wallet-adapter-button ${props.className || ''}`}\n      disabled={props.disabled}\n      style={props.style}\n      onClick={props.onClick}\n      tabIndex={props.tabIndex || 0}\n      type=\"button\"\n    >\n      {props.startIcon && <i className=\"wallet-adapter-button-start-icon\">{props.startIcon}</i>}\n      {props.children}\n      {props.endIcon && <i className=\"wallet-adapter-button-end-icon\">{props.endIcon}</i>}\n    </button>\n  );\n};\n","import type { DetailedHTMLProps, FC, ImgHTMLAttributes } from 'react';\nimport { Wallet } from '@provablehq/aleo-wallet-adaptor-react';\n\nexport interface WalletIconProps\n  extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n  wallet: Wallet | null;\n}\n\nexport const WalletIcon: FC<WalletIconProps> = ({ wallet, ...props }) => {\n  return (\n    wallet && (\n      <img\n        style={{ borderRadius: '50%' }}\n        src={wallet.adapter.icon}\n        alt={`${wallet.adapter.name} icon`}\n        {...props}\n      />\n    )\n  );\n};\n","import type { FC, MouseEvent } from 'react';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Collapse } from './Collapse';\nimport { useWalletModal } from './useWalletModal';\nimport { WalletListItem } from './WalletListItem';\nimport { AleoIcon } from './AleoIcon';\nimport { useWallet, Wallet } from '@provablehq/aleo-wallet-adaptor-react';\nimport { WalletName, WalletReadyState } from '@provablehq/aleo-wallet-standard';\nimport { Network } from '@provablehq/aleo-types';\nimport { ProvableLogo } from './ProvableLogo';\n\nexport interface WalletModalProps {\n  className?: string;\n  container?: string;\n  network?: Network;\n}\n\nexport const WalletModal: FC<WalletModalProps> = ({\n  className = '',\n  container = 'body',\n  network,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { wallets, selectWallet, connect, wallet } = useWallet();\n  const { setVisible } = useWalletModal();\n  const [expanded, setExpanded] = useState(false);\n  const [fadeIn, setFadeIn] = useState(false);\n  const [portal, setPortal] = useState<Element | null>(null);\n\n  const [installedWallets, otherWallets] = useMemo(() => {\n    const installed: Wallet[] = [];\n    const notDetected: Wallet[] = [];\n    const loadable: Wallet[] = [];\n\n    for (const wallet of wallets) {\n      if (wallet.readyState === WalletReadyState.NOT_DETECTED) {\n        notDetected.push(wallet);\n      } else if (wallet.readyState === WalletReadyState.LOADABLE) {\n        loadable.push(wallet);\n      } else if (wallet.readyState === WalletReadyState.INSTALLED) {\n        installed.push(wallet);\n      }\n    }\n\n    return [installed, [...loadable, ...notDetected]];\n  }, [wallets]);\n\n  const getStartedWallet = useMemo(() => {\n    return installedWallets.length\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        installedWallets[0]!\n      : wallets.find(\n          (wallet: { adapter: { name: WalletName } }) => wallet.adapter.name === 'Puzzle Wallet', // TODO: Add Provable Wallet\n        ) ||\n          wallets.find(\n            (wallet: { readyState: WalletReadyState }) =>\n              wallet.readyState === WalletReadyState.LOADABLE,\n          ) ||\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          otherWallets[0]!;\n  }, [installedWallets, wallets, otherWallets]);\n\n  const hideModal = useCallback(() => {\n    setFadeIn(false);\n    setTimeout(() => setVisible(false), 150);\n  }, [setVisible]);\n\n  const handleClose = useCallback(\n    (event: MouseEvent) => {\n      event.preventDefault();\n      hideModal();\n    },\n    [hideModal],\n  );\n\n  const handleWalletClick = useCallback(\n    (event: MouseEvent, walletName: WalletName) => {\n      selectWallet(walletName);\n      handleClose(event);\n    },\n    [selectWallet, handleClose],\n  );\n\n  const handleCollapseClick = useCallback(() => setExpanded(!expanded), [expanded]);\n\n  const handleTabKey = useCallback(\n    (event: KeyboardEvent) => {\n      const node = ref.current;\n      if (!node) return;\n\n      // here we query all focusable elements\n      const focusableElements = node.querySelectorAll('button');\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const firstElement = focusableElements[0]!;\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const lastElement = focusableElements[focusableElements.length - 1]!;\n\n      if (event.shiftKey) {\n        // if going backward by pressing tab and firstElement is active, shift focus to last focusable element\n        if (document.activeElement === firstElement) {\n          lastElement.focus();\n          event.preventDefault();\n        }\n      } else {\n        // if going forward by pressing tab and lastElement is active, shift focus to first focusable element\n        if (document.activeElement === lastElement) {\n          firstElement.focus();\n          event.preventDefault();\n        }\n      }\n    },\n    [ref],\n  );\n\n  useLayoutEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        hideModal();\n      } else if (event.key === 'Tab') {\n        handleTabKey(event);\n      }\n    };\n\n    // Get original overflow\n    const { overflow } = window.getComputedStyle(document.body);\n    // Hack to enable fade in animation after mount\n    setTimeout(() => setFadeIn(true), 0);\n    // Prevent scrolling on mount\n    document.body.style.overflow = 'hidden';\n    // Listen for keydown events\n    window.addEventListener('keydown', handleKeyDown, false);\n\n    return () => {\n      // Re-enable scrolling when component unmounts\n      document.body.style.overflow = overflow;\n      window.removeEventListener('keydown', handleKeyDown, false);\n    };\n  }, [hideModal, handleTabKey]);\n\n  useLayoutEffect(() => setPortal(document.querySelector(container)), [container]);\n\n  useLayoutEffect(() => {\n    if (wallet) {\n      connect(network || Network.TESTNET3).catch(e => {\n        console.error({ e });\n      });\n    }\n  }, [wallet]);\n\n  return (\n    portal &&\n    createPortal(\n      <div\n        aria-labelledby=\"wallet-adapter-modal-title\"\n        aria-modal=\"true\"\n        className={`wallet-adapter-modal ${fadeIn && 'wallet-adapter-modal-fade-in'} ${className}`}\n        ref={ref}\n        role=\"dialog\"\n      >\n        <div className=\"wallet-adapter-modal-container\">\n          <div className=\"wallet-adapter-modal-wrapper\">\n            <button onClick={handleClose} className=\"wallet-adapter-modal-button-close\">\n              <svg width=\"14\" height=\"14\">\n                <path d=\"M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z\" />\n              </svg>\n            </button>\n            {installedWallets.length ? (\n              <>\n                <h1 className=\"wallet-adapter-modal-title\">Connect an Aleo wallet</h1>\n                <ul className=\"wallet-adapter-modal-list\">\n                  {installedWallets.map(wallet => (\n                    <WalletListItem\n                      key={wallet.adapter.name}\n                      handleClick={event =>\n                        handleWalletClick(event, wallet.adapter.name as WalletName)\n                      }\n                      wallet={wallet}\n                    />\n                  ))}\n                  {otherWallets.length ? (\n                    <Collapse expanded={expanded} id=\"wallet-adapter-modal-collapse\">\n                      {otherWallets.map(wallet => (\n                        <WalletListItem\n                          key={wallet.adapter.name}\n                          handleClick={event => handleWalletClick(event, wallet.adapter.name)}\n                          tabIndex={expanded ? 0 : -1}\n                          wallet={wallet}\n                        />\n                      ))}\n                    </Collapse>\n                  ) : null}\n                </ul>\n                {otherWallets.length ? (\n                  <button\n                    className=\"wallet-adapter-modal-list-more\"\n                    onClick={handleCollapseClick}\n                    tabIndex={0}\n                  >\n                    <span>{expanded ? 'Less ' : 'More '}options</span>\n                    <svg\n                      width=\"13\"\n                      height=\"7\"\n                      viewBox=\"0 0 13 7\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      className={`${expanded ? 'wallet-adapter-modal-list-more-icon-rotate' : ''}`}\n                    >\n                      <path d=\"M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z\" />\n                    </svg>\n                  </button>\n                ) : null}\n              </>\n            ) : (\n              <>\n                <h1 className=\"wallet-adapter-modal-title\">Get an Aleo wallet to continue</h1>\n                <div className=\"wallet-adapter-modal-middle\">\n                  <AleoIcon />\n                  <button\n                    type=\"button\"\n                    className=\"wallet-adapter-modal-middle-button\"\n                    onClick={event => handleWalletClick(event, getStartedWallet.adapter.name)}\n                  >\n                    Get started\n                  </button>\n                </div>\n                {otherWallets.length ? (\n                  <>\n                    <button\n                      className=\"wallet-adapter-modal-list-more\"\n                      onClick={handleCollapseClick}\n                      tabIndex={0}\n                    >\n                      <span>{expanded ? 'Hide ' : 'View other '}options</span>\n                      <svg\n                        width=\"13\"\n                        height=\"7\"\n                        viewBox=\"0 0 13 7\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        className={`${\n                          expanded ? 'wallet-adapter-modal-list-more-icon-rotate' : ''\n                        }`}\n                      >\n                        <path d=\"M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z\" />\n                      </svg>\n                    </button>\n                    <Collapse expanded={expanded} id=\"wallet-adapter-modal-collapse\">\n                      <ul className=\"wallet-adapter-modal-list\">\n                        {otherWallets.map(wallet => (\n                          <WalletListItem\n                            key={wallet.adapter.name}\n                            handleClick={event => handleWalletClick(event, wallet.adapter.name)}\n                            tabIndex={expanded ? 0 : -1}\n                            wallet={wallet}\n                          />\n                        ))}\n                      </ul>\n                    </Collapse>\n                  </>\n                ) : null}\n              </>\n            )}\n            <a\n              className=\"wallet-adapter-modal-footer\"\n              href=\"https://provable.com/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <ProvableLogo />\n            </a>\n          </div>\n        </div>\n        <div className=\"wallet-adapter-modal-overlay\" onMouseDown={handleClose} />\n      </div>,\n      portal,\n    )\n  );\n};\n","import type { FC, PropsWithChildren } from 'react';\nimport { useLayoutEffect, useRef } from 'react';\n\nexport type CollapseProps = PropsWithChildren<{\n  expanded: boolean;\n  id: string;\n}>;\n\nexport const Collapse: FC<CollapseProps> = ({ id, children, expanded = false }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const instant = useRef(true);\n  const transition = 'height 250ms ease-out';\n\n  const openCollapse = () => {\n    const node = ref.current;\n    if (!node) return;\n\n    requestAnimationFrame(() => {\n      node.style.height = node.scrollHeight + 'px';\n    });\n  };\n\n  const closeCollapse = () => {\n    const node = ref.current;\n    if (!node) return;\n\n    requestAnimationFrame(() => {\n      node.style.height = node.offsetHeight + 'px';\n      node.style.overflow = 'hidden';\n      requestAnimationFrame(() => {\n        node.style.height = '0';\n      });\n    });\n  };\n\n  useLayoutEffect(() => {\n    if (expanded) {\n      openCollapse();\n    } else {\n      closeCollapse();\n    }\n  }, [expanded]);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) return;\n\n    function handleComplete() {\n      if (!node) return;\n\n      node.style.overflow = expanded ? 'initial' : 'hidden';\n      if (expanded) {\n        node.style.height = 'auto';\n      }\n    }\n\n    function handleTransitionEnd(event: TransitionEvent) {\n      if (node && event.target === node && event.propertyName === 'height') {\n        handleComplete();\n      }\n    }\n\n    if (instant.current) {\n      handleComplete();\n      instant.current = false;\n    }\n\n    node.addEventListener('transitionend', handleTransitionEnd);\n    return () => node.removeEventListener('transitionend', handleTransitionEnd);\n  }, [expanded]);\n\n  return (\n    <div\n      className=\"wallet-adapter-collapse\"\n      id={id}\n      ref={ref}\n      role=\"region\"\n      style={{ height: 0, transition: instant.current ? undefined : transition }}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { FC, MouseEventHandler } from 'react';\nimport { WalletReadyState } from '@provablehq/aleo-wallet-standard';\nimport { Wallet } from '@provablehq/aleo-wallet-adaptor-react';\nimport { Button } from './Button';\nimport { WalletIcon } from './WalletIcon';\n\nexport interface WalletListItemProps {\n  handleClick: MouseEventHandler<HTMLButtonElement>;\n  tabIndex?: number;\n  wallet: Wallet;\n}\n\nexport const WalletListItem: FC<WalletListItemProps> = ({ handleClick, tabIndex, wallet }) => {\n  return (\n    <li>\n      <Button onClick={handleClick} startIcon={<WalletIcon wallet={wallet} />} tabIndex={tabIndex}>\n        {wallet.adapter.name}\n        {wallet.readyState === WalletReadyState.INSTALLED && <span>Installed</span>}\n      </Button>\n    </li>\n  );\n};\n","import type { FC } from 'react';\n\nexport const AleoIcon: FC = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"216\"\n      height=\"80\"\n      viewBox=\"0 0 216 80\"\n      fill=\"none\"\n    >\n      <path d=\"M73.426 0V8.93824H81.6842V78.8961H90.6045V0H73.426Z\" fill=\"#F5F5F5\" />\n      <path\n        d=\"M154.145 51.4216C154.145 32.5518 143.683 21.297 127.604 21.297C111.526 21.297 100.954 32.0007 100.954 50.8687C100.954 69.7367 111.415 80 127.604 80C140.378 80 149.96 72.6061 152.603 62.3447H142.692C140.488 67.0902 135.975 71.2829 127.604 71.2829C116.812 71.2829 111.307 64.4419 110.205 54.6209H154.145V51.4216ZM110.316 46.125C111.636 36.6357 117.364 29.9035 127.604 29.9035C137.845 29.9035 143.242 36.5251 144.564 46.125H110.316Z\"\n        fill=\"#F5F5F5\"\n      />\n      <path\n        d=\"M189.272 21.297C173.083 21.297 162.622 32.0007 162.622 50.8687C162.622 69.7367 173.083 80 189.272 80C205.461 80 215.812 70.0684 215.812 50.8687C215.812 31.669 205.351 21.297 189.272 21.297ZM189.272 71.5041C177.709 71.5041 171.432 62.4553 171.432 50.76C171.432 39.0647 177.709 29.6842 189.272 29.6842C200.836 29.6842 207.003 38.8436 207.003 50.76C207.003 62.6764 200.946 71.5041 189.272 71.5041Z\"\n        fill=\"#F5F5F5\"\n      />\n      <path\n        d=\"M46.5565 0H28.3849L12.6134 46.125H22.2179L34.9933 8.49593H39.6189L52.3925 46.125H22.2179L19.2457 54.6209H55.2561L63.5143 78.8961H73.426L46.5565 0Z\"\n        fill=\"#F5F5F5\"\n      />\n      <path\n        d=\"M1.40508 78.8961H10.9857L19.2457 54.6209L9.7074 54.6209L1.40508 78.8961Z\"\n        fill=\"#F5F5F5\"\n      />\n      <path d=\"M3.0935 46.125L0.1875 54.6209H9.7074L12.6134 46.125H3.0935Z\" fill=\"#F5F5F5\" />\n    </svg>\n  );\n};\n","export const ProvableLogo = () => {\n  return (\n    <svg\n      width=\"115\"\n      height=\"18\"\n      viewBox=\"0 0 115 18\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g opacity=\"0.88\">\n        <path\n          d=\"M0 3.89265C0 2.29508 1.29508 1 2.89265 1H13.1073C14.7048 1 15.9999 2.29508 15.9999 3.89265V14.1074C15.9999 15.7049 14.7049 17 13.1073 17H10.4926C10.0937 17 9.7702 16.6766 9.7702 16.2776V8.67463C9.7702 7.87665 9.12331 7.22976 8.32533 7.22976H0.722439C0.323447 7.22976 0 6.90631 0 6.50732L0 3.89265Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M6.22973 12.2151C6.22973 11.4171 5.58284 10.7702 4.78485 10.7702H0.722439C0.323447 10.7702 0 11.0937 0 11.4927L0 14.1074C0 15.7049 1.29508 17 2.89265 17H5.50729C5.90628 17 6.22973 16.6766 6.22973 16.2776V12.2151Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M108.725 17.272C105.098 17.272 102.695 14.7107 102.695 10.88C102.695 7.04935 105.098 4.48802 108.725 4.48802C112.85 4.48802 115.275 7.52535 114.686 11.968H106.118C106.39 13.6453 107.319 14.5973 108.793 14.5973C110.039 14.5973 110.901 14.0533 111.263 13.056H114.663C114.006 15.7533 111.898 17.272 108.725 17.272ZM106.118 9.70135H111.467C111.195 8.04668 110.266 7.16268 108.793 7.16268C107.342 7.16268 106.413 8.06935 106.118 9.70135Z\"\n          fill=\"#0B0605\"\n        />\n        <path d=\"M98.3672 17V0.317363L101.699 0.0453644V17H98.3672Z\" fill=\"#0B0605\" />\n        <path\n          d=\"M84.9072 17V0.317363L88.2392 0.0453644V6.50535H88.3752C89.1232 5.21336 90.3246 4.55602 92.0245 4.55602C95.2432 4.55602 97.3512 7.07202 97.3512 10.88C97.3512 14.688 95.2432 17.2267 92.0245 17.2267C90.3246 17.2267 89.1232 16.5693 88.3752 15.2547H88.2392V17H84.9072ZM91.0952 7.32135C89.3726 7.32135 88.2392 8.72668 88.2392 10.88C88.2392 13.056 89.3726 14.4613 91.0952 14.4613C92.8405 14.4613 93.9512 13.056 93.9512 10.88C93.9512 8.72668 92.8405 7.32135 91.0952 7.32135Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M76.3143 17.1813C73.9117 17.1813 72.3477 15.6853 72.3477 13.3733C72.3477 11.4013 73.685 10.1093 76.0423 9.83735L79.2836 9.47468C79.8956 9.38401 80.1903 9.11201 80.1903 8.61335C80.1903 7.68402 79.4876 7.11735 78.3543 7.11735C77.221 7.11735 76.4503 7.68402 76.3143 8.61335H72.8917C73.141 6.05202 75.249 4.48802 78.3996 4.48802C81.641 4.48802 83.5223 6.09735 83.5223 8.88535V17H80.1903V15.4133H80.0543C79.4423 16.456 77.9236 17.1813 76.3143 17.1813ZM77.4023 14.5973C78.8303 14.5973 80.1903 13.3507 80.1903 11.9V11.4693C80.0316 11.5827 79.8503 11.628 79.6236 11.6507L77.1983 11.9227C76.3143 12.0133 75.8157 12.4893 75.8157 13.2373C75.8157 14.076 76.4276 14.5973 77.4023 14.5973Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M64.509 17L60.1797 4.76003H63.5117L66.549 13.94H66.685L69.6997 4.76003H72.873L68.5437 17H64.509Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M54.3613 17.272C50.6666 17.272 48.1279 14.6653 48.1279 10.88C48.1279 7.09468 50.6666 4.48802 54.3613 4.48802C58.0559 4.48802 60.5946 7.09468 60.5946 10.88C60.5946 14.6653 58.0559 17.272 54.3613 17.272ZM54.3613 14.5067C56.1519 14.5067 57.2399 13.1467 57.2399 10.88C57.2399 8.61335 56.1519 7.25335 54.3613 7.25335C52.5706 7.25335 51.4826 8.61335 51.4826 10.88C51.4826 13.1467 52.5706 14.5067 54.3613 14.5067Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M40.0801 17V4.76002H43.4121V6.23335H43.5481C43.9561 5.10002 44.8401 4.48802 46.1094 4.48802H47.8094L48.0814 7.93335H45.6561C44.2054 7.93335 43.4121 8.56802 43.4121 9.74668V17H40.0801Z\"\n          fill=\"#0B0605\"\n        />\n        <path\n          d=\"M26.3848 17V0.99736H33.0261C36.6981 0.99736 39.0554 3.08269 39.0554 6.34668C39.0554 9.63334 36.6981 11.764 33.0261 11.764H29.8754V17H26.3848ZM33.0261 8.72668C34.5674 8.72668 35.5647 7.82002 35.5647 6.41468C35.5647 5.00935 34.5674 4.10269 33.0261 4.10269H29.8754V8.72668H33.0261Z\"\n          fill=\"#0B0605\"\n        />\n      </g>\n    </svg>\n  );\n};\n","import type { FC, MouseEvent } from 'react';\nimport { useCallback } from 'react';\nimport type { ButtonProps } from './Button';\nimport { Button } from './Button';\nimport { useWalletModal } from './useWalletModal';\n\nexport const WalletModalButton: FC<ButtonProps> = ({\n  children = 'Connect Wallet',\n  onClick,\n  ...props\n}) => {\n  const { visible, setVisible } = useWalletModal();\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) onClick(event);\n      if (!event.defaultPrevented) setVisible(!visible);\n    },\n    [onClick, setVisible, visible],\n  );\n\n  return (\n    <Button className=\"wallet-adapter-button-trigger\" onClick={handleClick} {...props}>\n      {children}\n    </Button>\n  );\n};\n","import type { FC, ReactNode } from 'react';\nimport { useState } from 'react';\nimport { WalletModalContext } from './useWalletModal';\nimport type { WalletModalProps } from './WalletModal';\nimport { WalletModal } from './WalletModal';\n\nexport interface WalletModalProviderProps extends WalletModalProps {\n  children: ReactNode;\n}\n\nexport const WalletModalProvider: FC<WalletModalProviderProps> = ({ children, ...props }) => {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <WalletModalContext.Provider\n      value={{\n        visible,\n        setVisible,\n      }}\n    >\n      {children}\n      {visible && <WalletModal {...props} />}\n    </WalletModalContext.Provider>\n  );\n};\n","import type { FC, MouseEventHandler } from 'react';\nimport { useCallback, useMemo } from 'react';\nimport type { ButtonProps } from './Button';\nimport { Button } from './Button';\nimport { WalletIcon } from './WalletIcon';\nimport { useWallet } from '@provablehq/aleo-wallet-adaptor-react';\n\nexport const WalletDisconnectButton: FC<ButtonProps> = ({\n  children,\n  disabled,\n  onClick,\n  ...props\n}) => {\n  const { wallet, disconnect, disconnecting } = useWallet();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    event => {\n      if (onClick) onClick(event);\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      if (!event.defaultPrevented) disconnect().catch(() => {});\n    },\n    [onClick, disconnect],\n  );\n\n  const content = useMemo(() => {\n    if (children) return children;\n    if (disconnecting) return 'Disconnecting ...';\n    if (wallet) return 'Disconnect';\n    return 'Disconnect Wallet';\n  }, [children, disconnecting, wallet]);\n\n  return (\n    <Button\n      className=\"wallet-adapter-button-trigger\"\n      disabled={disabled || !wallet}\n      startIcon={wallet ? <WalletIcon wallet={wallet} /> : undefined}\n      onClick={handleClick}\n      {...props}\n    >\n      {content}\n    </Button>\n  );\n};\n","import type { FC } from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ButtonProps } from './Button';\nimport { Button } from './Button';\nimport { useWalletModal } from './useWalletModal';\nimport { WalletConnectButton } from './WalletConnectButton';\nimport { WalletIcon } from './WalletIcon';\nimport { WalletModalButton } from './WalletModalButton';\nimport { useWallet } from '@provablehq/aleo-wallet-adaptor-react';\nimport { CheckIcon, CopyIcon, GenericWalletIcon } from './icons';\n\nexport const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {\n  const { address, wallet, disconnect } = useWallet();\n  const { setVisible } = useWalletModal();\n  const [copied, setCopied] = useState(false);\n  const [active, setActive] = useState(false);\n  const ref = useRef<HTMLUListElement>(null);\n\n  const base58 = useMemo(() => address?.toString(), [address]);\n  const content = useMemo(() => {\n    if (children) return children;\n    if (!wallet || !base58) return null;\n    return base58.slice(0, 4) + '..' + base58.slice(-4);\n  }, [children, wallet, base58]);\n\n  const copyAddress = useCallback(async () => {\n    if (base58) {\n      await navigator.clipboard.writeText(base58);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  }, [base58]);\n\n  const openDropdown = useCallback(() => {\n    setActive(true);\n  }, []);\n\n  const closeDropdown = useCallback(() => {\n    setActive(false);\n  }, []);\n\n  const openModal = useCallback(() => {\n    setVisible(true);\n    closeDropdown();\n  }, [setVisible, closeDropdown]);\n\n  const onDisconnect = useCallback(() => {\n    disconnect();\n    closeDropdown();\n  }, [disconnect, closeDropdown]);\n\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const node = ref.current;\n\n      // Do nothing if clicking dropdown or its descendants\n      if (!node || node.contains(event.target as Node)) return;\n\n      closeDropdown();\n    };\n\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, closeDropdown]);\n\n  if (!wallet) return <WalletModalButton {...props}>{children}</WalletModalButton>;\n  if (!base58) return <WalletConnectButton {...props}>{children}</WalletConnectButton>;\n\n  return (\n    <div className=\"wallet-adapter-dropdown\">\n      <Button\n        aria-expanded={active}\n        className=\"wallet-adapter-button-trigger\"\n        style={{ pointerEvents: active ? 'none' : 'auto', ...props.style }}\n        onClick={openDropdown}\n        startIcon={<WalletIcon wallet={wallet} />}\n        {...props}\n      >\n        {content}\n      </Button>\n      <ul\n        aria-label=\"dropdown-list\"\n        className={`wallet-adapter-dropdown-list ${active && 'wallet-adapter-dropdown-list-active'}`}\n        ref={ref}\n        role=\"menu\"\n      >\n        <li onClick={copyAddress} className=\"wallet-adapter-dropdown-list-item\" role=\"menuitem\">\n          {copied ? (\n            <>\n              Copied\n              <CheckIcon />\n            </>\n          ) : (\n            <>\n              Copy address <CopyIcon />\n            </>\n          )}\n        </li>\n        <li onClick={openModal} className=\"wallet-adapter-dropdown-list-item\" role=\"menuitem\">\n          Change wallet <GenericWalletIcon />\n        </li>\n        <li onClick={onDisconnect} className=\"wallet-adapter-dropdown-list-item\" role=\"menuitem\">\n          Disconnect\n        </li>\n      </ul>\n    </div>\n  );\n};\n","export const CopyIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n    <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n  </svg>\n);\n\nexport const CheckIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n);\n\nexport const GenericWalletIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1\" />\n    <path d=\"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4\" />\n  </svg>\n);\n"],"mappings":"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","names":["jsx","jsx","useCallback","useLayoutEffect","useMemo","useRef","jsx","jsx","jsxs","jsx","jsxs","useWallet","WalletReadyState","Network","jsx","jsxs","jsx","jsxs","useRef","useWallet","useMemo","wallet","WalletReadyState","useCallback","useLayoutEffect","Network","useCallback","jsx","useCallback","useState","jsx","jsxs","useState","useCallback","useMemo","useWallet","jsx","useCallback","useMemo","useCallback","useMemo","useRef","useState","useWallet","jsx","jsxs","Fragment","jsx","jsxs","useWallet","useState","useRef","useMemo","useCallback"]}

package/dist/styles.css

@@ -0,0 +1,421 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
+
+:root {
+  /* Primary Colors (65%) */
+  /* --wallet-adapter-primary: #db33ca; PINK  */
+  /* --wallet-adapter-primary-hover: #c42db8;   */
+  --wallet-adapter-primary: #9565fb; /* Main brand color for primary actions */
+  --wallet-adapter-primary-hover: #7952ca; /* Darker shade for hover states */
+  --wallet-adapter-background: #0a0606; /* Main background color */
+  --wallet-adapter-surface: #0a0606; /* Surface color for cards/modals */
+  --wallet-adapter-surface-hover: #1a1616; /* Slightly lighter for hover states */
+  --wallet-adapter-surface-light: #2a2626; /* Lighter surface for contrast */
+
+  /* Text and Border Colors */
+  --wallet-adapter-text: #f0e9e6; /* Main text color */
+  --wallet-adapter-text-secondary: #b3aea9; /* Secondary text color */
+  --wallet-adapter-border: #2a2626; /* Border color */
+  --wallet-adapter-border-light: #3a3636; /* Lighter border color */
+
+  /* Secondary Colors (20%) */
+  --wallet-adapter-secondary: #9565fb; /* Secondary action color */
+  --wallet-adapter-secondary-hover: #8555eb; /* Secondary hover state */
+  --wallet-adapter-accent-red: #fe514e; /* For important actions/alerts */
+
+  /* Accent Colors (15%) */
+  --wallet-adapter-accent-blue: #3f92ff; /* For links and info states */
+  --wallet-adapter-accent-yellow: #faad2b; /* For warnings and highlights */
+  --wallet-adapter-accent-green: #13bc80; /* For success states */
+
+  /* Shadows and Border Radius (unchanged) */
+  --wallet-adapter-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --wallet-adapter-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --wallet-adapter-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --wallet-adapter-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --wallet-adapter-radius-sm: 6px;
+  --wallet-adapter-radius: 8px;
+  --wallet-adapter-radius-lg: 12px;
+  --wallet-adapter-radius-xl: 32px;
+}
+
+.wallet-adapter-button {
+  background-color: var(--wallet-adapter-surface);
+  border: 1px solid var(--wallet-adapter-border);
+  color: var(--wallet-adapter-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-family: 'Inter Tight', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  height: 38px;
+  line-height: 38px;
+  padding: 0 16px;
+  border-radius: var(--wallet-adapter-radius-xl);
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  letter-spacing: 0.01em;
+  gap: 8px;
+}
+
+.wallet-adapter-button-trigger {
+  background-color: var(--wallet-adapter-primary);
+  border: none;
+  box-shadow: var(--wallet-adapter-shadow);
+  height: 42px;
+  padding: 0 20px;
+  font-size: 14px;
+}
+
+.wallet-adapter-button:not([disabled]):focus-visible {
+  outline: 2px solid var(--wallet-adapter-primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(219, 51, 202, 0.1);
+}
+
+.wallet-adapter-button:not([disabled]):hover {
+  background-color: var(--wallet-adapter-primary-hover);
+  /* transform: translateY(-1px); */
+  box-shadow: var(--wallet-adapter-shadow-lg);
+}
+
+.wallet-adapter-button[disabled] {
+  background: var(--wallet-adapter-surface);
+  color: var(--wallet-adapter-text-secondary);
+  cursor: not-allowed;
+  border: 1px solid var(--wallet-adapter-border);
+  opacity: 0.7;
+}
+
+.wallet-adapter-button-end-icon,
+.wallet-adapter-button-start-icon,
+.wallet-adapter-button-end-icon img,
+.wallet-adapter-button-start-icon img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.wallet-adapter-button-end-icon {
+  margin-left: 8px;
+}
+
+.wallet-adapter-button-start-icon {
+  margin-right: 8px;
+}
+
+.wallet-adapter-collapse {
+  width: 100%;
+}
+
+.wallet-adapter-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.wallet-adapter-dropdown-list {
+  position: absolute;
+  z-index: 99;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-row-gap: 6px;
+  padding: 8px;
+  top: calc(100% + 4px);
+  right: 0;
+  margin: 0;
+  list-style: none;
+  background: var(--wallet-adapter-surface);
+  border: 1px solid var(--wallet-adapter-border);
+  border-radius: var(--wallet-adapter-radius-lg);
+  box-shadow: var(--wallet-adapter-shadow-xl);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: 'Inter Tight', sans-serif;
+  min-width: 220px;
+  backdrop-filter: blur(8px);
+}
+
+.wallet-adapter-dropdown-list-active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.wallet-adapter-dropdown-list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 12px;
+  width: 100%;
+  border-radius: var(--wallet-adapter-radius);
+  font-size: 13px;
+  font-weight: 700;
+  height: 36px;
+  color: var(--wallet-adapter-text);
+  transition: all 0.15s ease;
+  gap: 8px;
+}
+
+.wallet-adapter-dropdown-list-item:not([disabled]):hover {
+  background-color: var(--wallet-adapter-surface-hover);
+}
+
+.wallet-adapter-modal-collapse-button svg {
+  align-self: center;
+  fill: #999;
+}
+
+.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg {
+  transform: rotate(180deg);
+  transition: transform ease-in 150ms;
+}
+
+.wallet-adapter-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity linear 150ms;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1040;
+  overflow-y: auto;
+}
+
+.wallet-adapter-modal.wallet-adapter-modal-fade-in {
+  opacity: 1;
+}
+
+.wallet-adapter-modal-button-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  padding: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+}
+
+.wallet-adapter-modal-button-close:hover {
+  border: none;
+  background-color: transparent !important;
+}
+
+.wallet-adapter-modal-button-close:focus-visible,
+.wallet-adapter-modal-button-close:focus {
+  outline: 2px solid var(--wallet-adapter-primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(219, 51, 202, 0.1);
+}
+
+.wallet-adapter-modal-button-close svg {
+  fill: #777;
+  transition: fill 200ms ease 0s;
+}
+
+.wallet-adapter-modal-button-close:hover svg {
+  fill: #fff;
+}
+
+.wallet-adapter-modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.wallet-adapter-modal-container {
+  display: flex;
+  margin: 3rem;
+  min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 480px) {
+  .wallet-adapter-modal-container {
+    margin: 1rem;
+    min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
+  }
+}
+
+.wallet-adapter-modal-wrapper {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  z-index: 1050;
+  max-width: 400px;
+  border-radius: var(--wallet-adapter-radius-xl);
+  background: var(--wallet-adapter-background);
+  border: 1px solid var(--wallet-adapter-border);
+  box-shadow: var(--wallet-adapter-shadow-xl);
+  font-family: 'Inter Tight', sans-serif;
+  flex: 1;
+  backdrop-filter: blur(12px);
+}
+
+.wallet-adapter-modal-wrapper .wallet-adapter-button {
+  width: 100%;
+}
+
+.wallet-adapter-modal-title {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 24px;
+  margin: 0;
+  padding: 24px;
+  text-align: center;
+  color: var(--wallet-adapter-text);
+  letter-spacing: -0.01em;
+}
+
+@media (max-width: 374px) {
+  .wallet-adapter-modal-title {
+    font-size: 18px;
+  }
+}
+
+.wallet-adapter-modal-list {
+  margin: 0 0 8px 0;
+  padding: 0 16px;
+  width: 100%;
+  list-style: none;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button {
+  font-weight: 600;
+  border-radius: var(--wallet-adapter-radius-lg);
+  font-size: 14px;
+  margin: 4px 0;
+  background: var(--wallet-adapter-surface);
+  border: 1px solid var(--wallet-adapter-border);
+  height: 54px;
+  padding: 0 16px;
+  transition:
+    background-color 0.2s ease 0.1s,
+    border-color 0.2s ease 0.1s;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button:hover {
+  background: var(--wallet-adapter-surface-hover);
+  border-color: var(--wallet-adapter-primary);
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button span {
+  margin-left: auto;
+  font-size: 14px;
+  opacity: 0.6;
+}
+
+.wallet-adapter-modal-list-more {
+  cursor: pointer;
+  border: none;
+  padding: 6px 12px;
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  color: #fff;
+  margin-bottom: 6px;
+  margin-right: 24px;
+}
+
+.wallet-adapter-modal-list-more svg {
+  transition: all 0.1s ease;
+  fill: rgba(255, 255, 255, 1);
+  margin-left: 0.5rem;
+}
+
+.wallet-adapter-modal-list-more-icon-rotate {
+  transform: rotate(180deg);
+}
+
+.wallet-adapter-modal-list-more:focus-visible,
+.wallet-adapter-modal-list-more:focus {
+  outline: none;
+}
+
+.wallet-adapter-modal-middle {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 24px 24px 24px;
+  box-sizing: border-box;
+}
+
+.wallet-adapter-modal-middle-button {
+  display: block;
+  cursor: pointer;
+  margin-top: 24px;
+  width: 100%;
+  background-color: var(--wallet-adapter-primary);
+  padding: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--wallet-adapter-radius-xl);
+  color: var(--wallet-adapter-text);
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  letter-spacing: 0.01em;
+}
+
+.wallet-adapter-modal-middle-button:hover {
+  background-color: var(--wallet-adapter-primary-hover);
+  /* transform: translateY(-1px); */
+  box-shadow: var(--wallet-adapter-shadow-lg);
+}
+
+.wallet-adapter-modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  margin-top: auto;
+  opacity: 0.88;
+  filter: invert(1);
+  opacity: 50%;
+  max-width: 120px;
+}
+
+.wallet-adapter-button:focus-visible,
+.wallet-adapter-button:focus,
+.wallet-adapter-modal-middle-button:focus-visible,
+.wallet-adapter-modal-middle-button:focus {
+  outline: 2px solid var(--wallet-adapter-primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(219, 51, 202, 0.1);
+}
+
+/* .wallet-adapter-button:hover {
+  border: none;
+} */

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@provablehq/aleo-wallet-adaptor-react-ui",
+  "version": "0.1.1-alpha.0",
+  "description": "UI components for wallet adapter integration",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "license": "GPL-3.0-or-later",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@provablehq/aleo-wallet-adaptor-react": "0.1.1-alpha.0",
+    "@provablehq/aleo-wallet-adaptor-core": "0.1.1-alpha.0",
+    "@provablehq/aleo-types": "0.1.1-alpha.0",
+    "@provablehq/aleo-wallet-standard": "0.1.1-alpha.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ProvableHQ/aleo-dev-toolkit.git",
+    "directory": "packages/aleo-wallet-adaptor/react-ui"
+  },
+  "homepage": "https://provable.com/",
+  "keywords": [
+    "aleo",
+    "wallet",
+    "adapter",
+    "react",
+    "ui"
+  ],
+  "author": "Provable Labs",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "copyfiles": "^2.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.2"
+  },
+  "scripts": {
+    "build": "tsup && pnpm copy-files",
+    "clean": "rimraf dist",
+    "dev": "tsup --watch",
+    "lint": "eslint src/**/*.ts*",
+    "copy-files": "copyfiles styles.css dist/",
+    "test": "jest"
+  }
+}