@tronweb3/tronwallet-adapter-react-ui 1.0.1

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2022-Present, tronprotocol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,142 @@
+# @tronweb3/tronwallet-adapter-react-ui
+
+`@tronweb3/tronwallet-adapter-react-ui` provides a set of out-of-the-box components to make it easy to select, change, connect and disconnect wallet.
+
+`@tronweb3/tronwallet-adapter-react-ui` depends `@tronweb3/tronwallet-adapter-react-hooks` to work. So developers must wrap `App` content within the `WalletProvider`.
+
+## Installation
+
+```bash
+npm install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
+
+# or pnpm install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
+
+# or yarn install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
+```
+
+## Usage
+
+`@tronweb3/tronwallet-adapter-react-ui` provide a `Select Wallet Modal` by `Context.Provider`. So developers must wrap `App` content within the `WalletProvider` and `WalletModalProvider`.
+
+```jsx
+import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
+import { WalletModalProvider, WalletActionButton } from '@tronweb3/tronwallet-adapter-react-ui';
+import { WalletDisconnectedError, WalletError, WalletNotFoundError } from '@tronweb3/tronwallet-abstract-adapter';
+import toast, { Toaster } from 'react-hot-toast';
+
+function App() {
+    // here use `react-hot-toast` npm package to notify user what happened
+    function onError(e: WalletError) {
+        if (e instanceof WalletNotFoundError) {
+            toast.error(e.message);
+        } else if (e instanceof WalletDisconnectedError) {
+            toast.error(e.message);
+        } else toast.error(e.message);
+    }
+    return (
+        <WalletProvider onError={onError}>
+            <WalletModalProvider>
+                <ConnectComponent></ConnectComponent>
+                <Profile></Profile>
+            </WalletModalProvider>
+        </WalletProvider>
+    );
+}
+function ConnectComponent() {
+    const { connect, disconnect, select, connected } = useWallet();
+    return <WalletActionButton></WalletActionButton>;
+}
+function Profile() {
+    const { address, connected, wallet } = useWallet();
+    return (
+        <div>
+            <p>
+                <span>Connection Status:</span> {connected ? 'Connected' : 'Disconnected'}
+            </p>
+            <p>
+                <span>Your selected Wallet:</span> {wallet?.adapter.name}
+            </p>
+            <p>
+                <span>Your Address:</span> {address}
+            </p>
+        </div>
+    );
+}
+```
+
+## `WalletModalProvider` and `useWalletModal`
+
+`WalletModalProvider` provide a `Select Wallet Modal` by `Context.Provider`. The modal can be controled by `useWalletModal`.
+
+```jsx
+function App() {
+    const { visible, setVisible } = useWalletModal();
+    function toggle() {
+        setVisible((visible) => !visible);
+    }
+    return (
+        <div>
+            <button onClick={toggle}>{visible ? 'Close Modal' : 'Open Modal'}</button>
+        </div>
+    );
+}
+```
+
+## `WalletConnectButton`
+
+Button to connect to the selected wallet. The button is disabled when:
+
+-   no wallet is selected
+-   is connecting to wallet
+-   is connected
+-   disabled by props
+
+### Props
+
+```jsx
+type ButtonProps = PropsWithChildren<{
+    className?: string,
+    disabled?: boolean,
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void,
+    style?: CSSProperties,
+    tabIndex?: number,
+    icon?: string,
+}>;
+```
+
+## `WalletDisconnectButton`
+
+Button to connect to the selected wallet. The button is disabled when:
+
+-   no wallet is selected
+-   is connecting to wallet
+-   disabled by props
+
+### Props
+
+Same as `WalletConnectButton`.
+
+## `WalletSelectButton`
+
+Button to open `Select Wallet Modal`.
+
+### Props
+
+Same as `WalletConnectButton`.
+
+## `WalletActionButton`
+
+Button with multiple functions including:
+
+-   Select wallet
+-   Connect to wallet
+-   Disconnect from wallet
+-   Show current selected wallet and address
+-   Copy address
+
+It's recommended to use this component to connect wallet easily.
+![example](https://raw.githubusercontent.com/tronprotocol/tronwallet-adapter/main/docs/action-button.gif)
+
+### Props
+
+Same as `WalletConnectButton`.

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@tronweb3/tronwallet-adapter-react-ui",
+    "version": "1.0.1",
+    "author": "tronprotocol",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/tronprotocol/tronwallet-adapter"
+    },
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": false,
+    "engines": {
+        "node": ">=16",
+        "pnpm": ">=7"
+    },
+    "main": "./lib/cjs/index.js",
+    "module": "./lib/esm/index.js",
+    "types": "./lib/types/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./lib/esm/index.js",
+            "require": "./lib/cjs/index.js",
+            "types": "./lib/types/index.d.ts"
+        },
+        "./style.css": "./style.css"
+    },
+    "files": [
+        "lib",
+        "src",
+        "LICENSE",
+        "style.css"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "shx mkdir -p lib && shx rm -rf lib",
+        "package": "shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json",
+        "test": "jest"
+    },
+    "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+    },
+    "dependencies": {
+        "@tronweb3/tronwallet-abstract-adapter": "^1.0.0",
+        "@tronweb3/tronwallet-adapter-react-hooks": "^1.0.0"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "@tronweb3/tronwallet-adapter-tronlink": "^1.0.0",
+        "@types/jest": "^27.5.2",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.0",
+        "@types/testing-library__jest-dom": "^5.14.5",
+        "jest": "^29.3.1",
+        "jest-environment-jsdom": "^29.3.1",
+        "jest-localstorage-mock": "^2.4.22",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "shx": "^0.3.4"
+    }
+}

package/src/Button.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import type { CSSProperties, FC, MouseEvent, PropsWithChildren } from 'react';
+
+export type ButtonProps = PropsWithChildren<{
+    className?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+    tabIndex?: number;
+    icon?: string;
+}>;
+
+export const Button: FC<ButtonProps> = ({ children, onClick, className = '', tabIndex = 0, icon, ...rest }) => {
+    const ref = useRef<HTMLButtonElement>(null);
+    function handleClick(event: MouseEvent<HTMLButtonElement>) {
+        onClick?.(event);
+        setTimeout(() => {
+            ref.current?.blur();
+        }, 300);
+    }
+    return (
+        <button
+            ref={ref}
+            onClick={handleClick}
+            className={`adapter-react-button ${className}`}
+            tabIndex={tabIndex}
+            {...rest}
+        >
+            {icon && (
+                <i className="button-icon">
+                    <img src={icon} />
+                </i>
+            )}
+            {children}
+        </button>
+    );
+};

package/src/Collapse.tsx

@@ -0,0 +1,68 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { useLayoutEffect, useRef, useEffect, useState } from 'react';
+
+export type CollapseProps = PropsWithChildren<{
+    isOpen: boolean;
+    id?: string;
+    className?: string;
+    transition?: string;
+}>;
+
+export const Collapse: FC<CollapseProps> = function ({
+    children,
+    className,
+    transition = 'height 250ms ease-out',
+    isOpen,
+}) {
+    const initialState = { height: '0px', transition };
+    const wrapRef = useRef<HTMLDivElement>(null);
+    const [style, setStyle] = useState(initialState);
+
+    useEffect(
+        function () {
+            setStyle((style) => ({ ...style, transition }));
+        },
+        [transition]
+    );
+
+    function open() {
+        if (!wrapRef.current) {
+            return;
+        }
+        setStyle((style) => ({
+            ...style,
+            height: wrapRef.current?.scrollHeight + 'px',
+        }));
+    }
+
+    function close() {
+        if (!wrapRef.current) {
+            return;
+        }
+        setStyle((style) => ({
+            ...style,
+            height: '0px',
+        }));
+    }
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            open();
+        } else {
+            close();
+        }
+    }, [isOpen]);
+
+    return (
+        <div
+            ref={wrapRef}
+            className={'react-collapse ' + className}
+            style={{
+                overflow: 'hidden',
+                ...style,
+            }}
+        >
+            {children}
+        </div>
+    );
+};

package/src/Modal/ReactPortal.tsx

@@ -0,0 +1,42 @@
+import { useState, useLayoutEffect } from 'react';
+import type { PropsWithChildren, FC } from 'react';
+import { createPortal } from 'react-dom';
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+    const wrapperElement = document.createElement('div');
+    wrapperElement.setAttribute('id', wrapperId);
+    wrapperElement.style.position = 'relative';
+    document.body.appendChild(wrapperElement);
+    return wrapperElement;
+}
+
+type ReactPortalProps = PropsWithChildren<{
+    wrapperId: string;
+}>;
+export const ReactPortal: FC<ReactPortalProps> = function ({ children, wrapperId = 'react-portal-wrapper' }) {
+    const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);
+
+    useLayoutEffect(() => {
+        let element: HTMLElement | null = document.getElementById(wrapperId);
+        let systemCreated = false;
+        // if element is not found with wrapperId or wrapperId is not provided,
+        // create and append to body
+        if (!element) {
+            systemCreated = true;
+            element = createWrapperAndAppendToBody(wrapperId);
+        }
+        setWrapperElement(element);
+
+        return () => {
+            // delete the programatically created element
+            if (systemCreated && element?.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+        };
+    }, [wrapperId]);
+
+    // wrapperElement state will be null on very first render.
+    if (wrapperElement === null) return null;
+
+    return createPortal(children, wrapperElement);
+};

package/src/Modal/WalletSelectModal.tsx

@@ -0,0 +1,92 @@
+import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import type { Wallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { AdapterState } from '@tronweb3/tronwallet-abstract-adapter';
+import { ReactPortal } from './ReactPortal.js';
+import { WalletItem } from '../WalletItem.js';
+
+type ModalProps = PropsWithChildren<{
+    visible: boolean;
+    onClose: () => void;
+}>;
+export const WalletSelectModal: FC<ModalProps> = function ({ visible, onClose }) {
+    const nodeRef = useRef(null);
+    const { wallets, select } = useWallet();
+    const [fadeIn, setFadeIn] = useState(false);
+    const [render, setRender] = useState(false);
+
+    const walletsList = useMemo(
+        () => [
+            ...wallets.filter((a: any) => a.state !== AdapterState.NotFound),
+            ...wallets.filter((a: any) => a.state === AdapterState.NotFound),
+        ],
+        [wallets]
+    );
+
+    const onWalletClick = useCallback(
+        (wallet: Wallet) => {
+            select(wallet.adapter.name);
+            onClose();
+        },
+        [select, onClose]
+    );
+    function show() {
+        setRender(true);
+        setFadeIn(true);
+    }
+    function close() {
+        setFadeIn(false);
+        // setRender(false)
+        setTimeout(() => setRender(false), 200);
+    }
+
+    useEffect(
+        function () {
+            if (visible) {
+                show();
+            } else {
+                close();
+            }
+        },
+        [visible]
+    );
+    useEffect(() => {
+        const closeOnEscapeKey = (e: any) => (e.key === 'Escape' ? onClose() : null);
+        document.body.addEventListener('keydown', closeOnEscapeKey);
+        return () => {
+            document.body.removeEventListener('keydown', closeOnEscapeKey);
+        };
+    }, [onClose]);
+
+    return render ? (
+        <ReactPortal wrapperId="react-portal-modal-container">
+            <div
+                data-testid="wallet-select-modal"
+                ref={nodeRef}
+                className={`adapter-modal ${fadeIn && 'adapter-modal-fade-in'}`}
+            >
+                <div className="adapter-modal-wrapper">
+                    <div className="adapter-modal-header">
+                        <button onClick={onClose} className="close-button" tabIndex={0}></button>
+                        <div className="adapter-modal-title">
+                            Connect a wallet on
+                            <br />
+                            Tron to continue
+                        </div>
+                    </div>
+
+                    <div className="adapter-list">
+                        {walletsList.map((wallet) => (
+                            <WalletItem
+                                key={wallet.adapter.name}
+                                wallet={wallet}
+                                onClick={() => onWalletClick(wallet)}
+                            ></WalletItem>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </ReactPortal>
+    ) : null;
+};

package/src/WalletActionButton.tsx

@@ -0,0 +1,99 @@
+import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import { useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import type { ButtonProps } from './Button.js';
+import { Button } from './Button.js';
+import { WalletSelectButton } from './WalletSelectButton.js';
+import { WalletConnectButton } from './WalletConnectButton.js';
+import { Collapse } from './Collapse.js';
+import { useWalletModal } from './useWalletModal.js';
+import { copyData } from './utils.js';
+export const WalletActionButton: FC<ButtonProps> = ({ children, ...props }) => {
+    const { address, wallet, disconnect } = useWallet();
+    const { setVisible } = useWalletModal();
+    const [dropdownVisible, setDropdownVisible] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const ref = useRef<HTMLUListElement>(null);
+
+    const content = useMemo(() => {
+        if (children) return children;
+        if (!wallet || !address) return null;
+        return address.slice(0, 4) + '...' + address.slice(-4);
+    }, [children, wallet, address]);
+
+    const copyAddress = () => {
+        if (address) {
+            copyData(address);
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+                hideDropdown();
+            }, 400);
+        }
+    };
+    function changeWallet() {
+        setVisible(true);
+        hideDropdown();
+    }
+
+    const openDropdown = useCallback(function () {
+        setDropdownVisible(true);
+    }, []);
+
+    const hideDropdown = useCallback(function () {
+        setDropdownVisible(false);
+    }, []);
+    const handleDisconnect = useCallback(
+        async function () {
+            await disconnect();
+            hideDropdown();
+        },
+        [disconnect, hideDropdown]
+    );
+
+    useEffect(() => {
+        const listener = (event: Event) => {
+            const node = ref.current;
+            if (!node || node.contains(event.target as Node)) return;
+            hideDropdown();
+        };
+
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, hideDropdown]);
+
+    if (!wallet) return <WalletSelectButton {...props}>{children}</WalletSelectButton>;
+    if (!address) return <WalletConnectButton {...props}>{children}</WalletConnectButton>;
+
+    return (
+        <div data-testid="wallet-action-button" className="adapter-dropdown">
+            <Button
+                onClick={openDropdown}
+                style={{ pointerEvents: dropdownVisible ? 'none' : 'auto', ...props.style }}
+                icon={wallet ? wallet.adapter.icon : ''}
+                {...props}
+            >
+                {content}
+            </Button>
+            <Collapse className="adapter-dropdown-collapse" isOpen={dropdownVisible}>
+                <ul ref={ref} className="adapter-dropdown-list" role="menu">
+                    <li onClick={copyAddress} className="adapter-dropdown-list-item" role="menuitem">
+                        {copied ? 'Copied' : 'Copy address'}
+                    </li>
+                    <li onClick={changeWallet} className="adapter-dropdown-list-item" role="menuitem">
+                        Change wallet
+                    </li>
+                    <li onClick={handleDisconnect} className="adapter-dropdown-list-item" role="menuitem">
+                        Disconnect
+                    </li>
+                </ul>
+            </Collapse>
+        </div>
+    );
+};

package/src/WalletConnectButton.tsx

@@ -0,0 +1,41 @@
+import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import type { FC, MouseEvent } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import type { ButtonProps } from './Button.js';
+import { Button } from './Button.js';
+
+export const WalletConnectButton: FC<ButtonProps> = ({ children, disabled, onClick, ...props }) => {
+    const { wallet, connect, connecting, connected } = useWallet();
+
+    const handleClick = useCallback(
+        async (event: MouseEvent<HTMLButtonElement>) => {
+            if (onClick) onClick(event);
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            if (!event.defaultPrevented) {
+                await connect();
+            }
+        },
+        [onClick, connect]
+    );
+
+    const content = useMemo(() => {
+        if (children) return children;
+        if (connecting) return 'Connecting ...';
+        if (connected) return 'Connected';
+        if (wallet) return 'Connect';
+        return 'Connect Wallet';
+    }, [children, connecting, connected, wallet]);
+
+    return (
+        <Button
+            data-testid="wallet-connect-button"
+            className="wallet-button"
+            disabled={disabled || !wallet || connecting || connected}
+            onClick={handleClick}
+            icon={wallet ? wallet.adapter.icon : ''}
+            {...props}
+        >
+            {content}
+        </Button>
+    );
+};

package/src/WalletDisconnectButton.tsx

@@ -0,0 +1,37 @@
+import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import type { FC, MouseEventHandler } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import type { ButtonProps } from './Button.js';
+import { Button } from './Button.js';
+
+export const WalletDisconnectButton: FC<ButtonProps> = ({ children, disabled, onClick, ...props }) => {
+    const { wallet, disconnect, disconnecting, connected } = useWallet();
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+        (event) => {
+            if (onClick) onClick(event);
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            if (!event.defaultPrevented) disconnect().catch(() => {});
+        },
+        [onClick, disconnect]
+    );
+
+    const content = useMemo(() => {
+        if (children) return children;
+        if (disconnecting) return 'Disconnecting ...';
+        if (wallet) return 'Disconnect';
+        return 'Disconnect Wallet';
+    }, [children, disconnecting, wallet]);
+
+    return (
+        <Button
+            data-testid="wallet-disconnect-button"
+            disabled={disabled || !wallet || !connected}
+            icon={wallet ? wallet.adapter.icon : ''}
+            onClick={handleClick}
+            {...props}
+        >
+            {content}
+        </Button>
+    );
+};

package/src/WalletItem.tsx

@@ -0,0 +1,21 @@
+import { AdapterState } from '@tronweb3/tronwallet-abstract-adapter';
+import type { Wallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import type { FC } from 'react';
+import React from 'react';
+import { Button } from './Button.js';
+
+export interface WalletItemProps {
+    onClick: () => void;
+    wallet: Wallet;
+}
+
+export const WalletItem: FC<WalletItemProps> = ({ onClick, wallet }) => {
+    return (
+        <div className="adapter-wallet-item">
+            <Button onClick={onClick} icon={wallet.adapter.icon} tabIndex={0}>
+                {wallet.adapter.name}
+                <span className="status-text">{wallet.state !== AdapterState.NotFound ? 'Detected' : 'NotFound'}</span>
+            </Button>
+        </div>
+    );
+};

package/src/WalletModalProvider.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { WalletSelectModal } from './Modal/WalletSelectModal.js';
+import { WalletModalContext } from './useWalletModal.js';
+
+export function WalletModalProvider({ children, ...props }: any) {
+    const [visible, setVisible] = useState(false);
+    return (
+        <WalletModalContext.Provider
+            value={{
+                visible,
+                setVisible,
+            }}
+        >
+            {children}
+            {<WalletSelectModal visible={visible} onClose={() => setVisible(false)} {...props} />}
+        </WalletModalContext.Provider>
+    );
+}

package/src/WalletSelectButton.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import type { MouseEvent, FC } from 'react';
+import { Button } from './Button.js';
+import type { ButtonProps } from './Button.js';
+import { useWalletModal } from './useWalletModal.js';
+
+export const WalletSelectButton: FC<ButtonProps> = function ({ children = 'Select Wallet', onClick, ...props }) {
+    const { visible, setVisible } = useWalletModal();
+
+    const handleClick = useCallback(
+        (event: MouseEvent<HTMLButtonElement>) => {
+            if (onClick) onClick(event);
+            if (!event.defaultPrevented) setVisible(!visible);
+        },
+        [onClick, setVisible, visible]
+    );
+
+    return (
+        <Button data-testid="wallet-select-button" onClick={handleClick} {...props}>
+            {children}
+        </Button>
+    );
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './Collapse.js';
+export * from './Button.js';
+export * from './Modal/WalletSelectModal.js';
+export * from './WalletConnectButton.js';
+export * from './WalletDisconnectButton.js';
+export * from './WalletItem.js';
+export * from './WalletActionButton.js';
+export * from './WalletSelectButton.js';
+export * from './useWalletModal.js';
+export * from './WalletModalProvider.js';

package/src/useWalletModal.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+export interface WalletModalContextProps {
+    visible: boolean;
+    setVisible: (open: boolean) => void;
+}
+
+const DEFAULT_VALUE = {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setVisible(_open: boolean) {
+        printError();
+    },
+    visible: false,
+};
+Object.defineProperty(DEFAULT_VALUE, 'visible', {
+    get() {
+        printError();
+        return false;
+    },
+});
+
+function printError() {
+    console.error('WalletModalProvider is not provided.' + 'Please wrap your components with WalletModalProvider.');
+}
+
+export const WalletModalContext = createContext<WalletModalContextProps>(DEFAULT_VALUE as any);
+
+export function useWalletModal(): WalletModalContextProps {
+    return useContext(WalletModalContext);
+}

package/src/utils.tsx

@@ -0,0 +1,11 @@
+export function copyData(copyText: string) {
+    const textArea = document.createElement('textarea');
+    textArea.value = copyText;
+    document.body.appendChild(textArea);
+    textArea.select();
+    textArea.style.position = 'fixed';
+    textArea.style.top = '-9999px';
+    textArea.style.left = '-9999px';
+    document.execCommand('copy');
+    textArea.blur();
+}

package/style.css

@@ -0,0 +1,214 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+
+/** button **/
+.adapter-react-button {
+    display: inline-flex;
+    color: #fff;
+    cursor: pointer;
+    height: 48px;
+    background-color: #0f111a;
+    border: none;
+    border-radius: 4px;
+    align-items: center;
+    padding: 0 24px;
+    font-family: DM Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 48px;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+.adapter-react-button:focus {
+    outline: none;
+}
+.adapter-react-button:focus-visible {
+    outline: 2px solid white;
+}
+.adapter-react-button:not([disabled]):hover {
+    background-color: #373c47;
+}
+.adapter-react-button[disabled] {
+    background: #404144;
+    color: #999;
+    cursor: not-allowed;
+}
+.adapter-react-button .button-icon {
+    margin-right: 12px;
+}
+.adapter-react-button .button-icon,
+.adapter-react-button .button-icon img {
+    display: block;
+    width: 28px;
+    height: 28px;
+}
+
+/* modal */
+.adapter-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    width: 100vw;
+    height: 100vh;
+    inset: 0; /* inset sets all 4 values (top right bottom left) much like how we set padding, margin etc., */
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease-in-out;
+    overflow: hidden;
+    z-index: 999;
+    padding: 40px 20px 20px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.adapter-modal-fade-in {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+}
+
+.adapter-modal-wrapper {
+    width: 100%;
+    max-width: 400px;
+    max-width: 400px;
+    background-color: #282c34;
+    border-radius: 10px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    font-size: 2rem;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.adapter-modal-wrapper .adapter-list {
+    padding-bottom: 48px;
+}
+.adapter-modal-header {
+    position: relative;
+    padding: 64px 48px 48px;
+}
+.adapter-modal-header .adapter-modal-title {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 34px;
+    text-align: center;
+}
+@media (max-width: 374px) {
+    .adapter-modal-header .adapter-modal-title {
+        font-size: 18px;
+    }
+}
+.adapter-modal-header .close-button {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    cursor: pointer;
+    background: #1a1f2e;
+    border: none;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+    display: flex;
+    top: 18px;
+    right: 18px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.adapter-modal-header .close-button:focus {
+    outline: none;
+}
+.adapter-modal-header .close-button:focus-visible {
+    outline: 2px solid white;
+}
+.adapter-modal-header .close-button::before,
+.adapter-modal-header .close-button::after {
+    content: '';
+    display: block;
+    width: 19px;
+    height: 2px;
+    background-color: #777;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+.adapter-modal-header .close-button::before {
+    transform: rotate(45deg);
+}
+.adapter-modal-header .close-button::after {
+    transform: rotate(-45deg);
+}
+.adapter-modal-header .close-button:hover::before,
+.adapter-modal-header .close-button:hover::after {
+    background-color: antiquewhite;
+}
+
+/** WalletItem */
+.adapter-wallet-item .adapter-react-button {
+    width: 100%;
+    background-color: transparent;
+}
+
+.adapter-wallet-item .status-text {
+    opacity: 0.6;
+    margin-left: auto;
+    font-size: 14px;
+    font-weight: 400;
+}
+
+/** dropdown */
+.adapter-dropdown {
+    position: relative;
+    z-index: 99;
+    display: inline-block;
+}
+.adapter-dropdown-collapse {
+    position: absolute;
+    top: 0;
+    margin: auto;
+    top: calc(100% + 5px);
+    right: 0;
+    left: 0;
+    display: inline-flex;
+}
+.adapter-dropdown-list {
+    margin: 0 auto;
+    width: 150px;
+    list-style-type: none;
+    border-radius: 10px;
+    font-family: DM Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+    box-shadow: 0 2px 3px #0009;
+    flex-direction: column;
+    padding: 5px;
+    background: #2c2d30;
+}
+.adapter-dropdown-list li {
+    display: block;
+    margin: auto;
+    color: white;
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+    width: 100%;
+    height: 37px;
+    border: none;
+    border-radius: 6px;
+    outline: none;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0 20px;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+}
+
+.adapter-dropdown-list li:not([disabled]):hover {
+    background-color: #373c47;
+}