@tronweb3/tronwallet-adapter-react-ui 1.0.1 → 1.1.1

package/lib/types/Modal/WalletSelectModal.d.ts

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from 'react';
+type ModalProps = PropsWithChildren<{
+    visible: boolean;
+    onClose: () => void;
+}>;
+export declare const WalletSelectModal: FC<ModalProps>;
+export {};
+//# sourceMappingURL=WalletSelectModal.d.ts.map

package/lib/types/Modal/WalletSelectModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletSelectModal.d.ts","sourceRoot":"","sources":["../../../src/Modal/WalletSelectModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnD,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC,CAAC;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,UAAU,CA+E5C,CAAC"}

package/lib/types/WalletActionButton.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ButtonProps } from './Button.js';
+export declare const WalletActionButton: FC<ButtonProps>;
+//# sourceMappingURL=WalletActionButton.d.ts.map

package/lib/types/WalletActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletActionButton.d.ts","sourceRoot":"","sources":["../../src/WalletActionButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO/C,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,WAAW,CAyG9C,CAAC"}

package/lib/types/WalletConnectButton.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ButtonProps } from './Button.js';
+export declare const WalletConnectButton: FC<ButtonProps>;
+//# sourceMappingURL=WalletConnectButton.d.ts.map

package/lib/types/WalletConnectButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletConnectButton.d.ts","sourceRoot":"","sources":["../../src/WalletConnectButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,WAAW,CAkC/C,CAAC"}

package/lib/types/WalletDisconnectButton.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ButtonProps } from './Button.js';
+export declare const WalletDisconnectButton: FC<ButtonProps>;
+//# sourceMappingURL=WalletDisconnectButton.d.ts.map

package/lib/types/WalletDisconnectButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletDisconnectButton.d.ts","sourceRoot":"","sources":["../../src/WalletDisconnectButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,WAAW,CA8BlD,CAAC"}

package/lib/types/WalletItem.d.ts

@@ -0,0 +1,8 @@
+import type { Wallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import type { FC } from 'react';
+export interface WalletItemProps {
+    onClick: () => void;
+    wallet: Wallet;
+}
+export declare const WalletItem: FC<WalletItemProps>;
+//# sourceMappingURL=WalletItem.d.ts.map

package/lib/types/WalletItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletItem.d.ts","sourceRoot":"","sources":["../../src/WalletItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,MAAM,WAAW,eAAe;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAS1C,CAAC"}

package/lib/types/WalletModalProvider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function WalletModalProvider({ children, ...props }: any): JSX.Element;
+//# sourceMappingURL=WalletModalProvider.d.ts.map

package/lib/types/WalletModalProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletModalProvider.d.ts","sourceRoot":"","sources":["../../src/WalletModalProvider.tsx"],"names":[],"mappings":";AAIA,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,eAa9D"}

package/lib/types/WalletSelectButton.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ButtonProps } from './Button.js';
+export declare const WalletSelectButton: FC<ButtonProps>;
+//# sourceMappingURL=WalletSelectButton.d.ts.map

package/lib/types/WalletSelectButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletSelectButton.d.ts","sourceRoot":"","sources":["../../src/WalletSelectButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,EAAE,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,WAAW,CAgB9C,CAAC"}

package/lib/types/index.d.ts

@@ -0,0 +1,11 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC"}

package/lib/types/useWalletModal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface WalletModalContextProps {
+    visible: boolean;
+    setVisible: (open: boolean) => void;
+}
+export declare const WalletModalContext: import("react").Context<WalletModalContextProps>;
+export declare function useWalletModal(): WalletModalContextProps;
+//# sourceMappingURL=useWalletModal.d.ts.map

package/lib/types/useWalletModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWalletModal.d.ts","sourceRoot":"","sources":["../../src/useWalletModal.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,uBAAuB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAoBD,eAAO,MAAM,kBAAkB,kDAA+D,CAAC;AAE/F,wBAAgB,cAAc,IAAI,uBAAuB,CAExD"}

package/lib/types/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function copyData(copyText: string): void;
+//# sourceMappingURL=utils.d.ts.map

package/lib/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,QAUxC"}

package/package.json

@@ -1,65 +1,70 @@
 {
-    "name": "@tronweb3/tronwallet-adapter-react-ui",
-    "version": "1.0.1",
-    "author": "tronprotocol",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/tronprotocol/tronwallet-adapter"
+  "name": "@tronweb3/tronwallet-adapter-react-ui",
+  "version": "1.1.1",
+  "keywords": [
+    "TRON",
+    "TronWeb",
+    "adapter"
+  ],
+  "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"
     },
-    "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"
-    }
-}
+    "./style.css": "./style.css"
+  },
+  "files": [
+    "lib",
+    "src",
+    "LICENSE",
+    "style.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@tronweb3/tronwallet-abstract-adapter": "^1.1.0",
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1.1.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.1.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"
+  },
+  "scripts": {
+    "clean": "shx mkdir -p lib && shx rm -rf lib",
+    "package": "shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json",
+    "test": "jest"
+  }
+}

package/src/Collapse.tsx

@@ -6,6 +6,8 @@ export type CollapseProps = PropsWithChildren<{
     id?: string;
     className?: string;
     transition?: string;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }>;
 
 export const Collapse: FC<CollapseProps> = function ({
@@ -13,6 +15,8 @@ export const Collapse: FC<CollapseProps> = function ({
     className,
     transition = 'height 250ms ease-out',
     isOpen,
+    onMouseEnter,
+    onMouseLeave,
 }) {
     const initialState = { height: '0px', transition };
     const wrapRef = useRef<HTMLDivElement>(null);
@@ -61,6 +65,8 @@ export const Collapse: FC<CollapseProps> = function ({
                 overflow: 'hidden',
                 ...style,
             }}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
         >
             {children}
         </div>

package/src/WalletActionButton.tsx

@@ -68,30 +68,48 @@ export const WalletActionButton: FC<ButtonProps> = ({ children, ...props }) => {
         };
     }, [ref, hideDropdown]);
 
-    if (!wallet) return <WalletSelectButton {...props}>{children}</WalletSelectButton>;
-    if (!address) return <WalletConnectButton {...props}>{children}</WalletConnectButton>;
+    if (!wallet)
+        return (
+            <WalletSelectButton onClick={hideDropdown} {...props}>
+                {children}
+            </WalletSelectButton>
+        );
 
     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}
+            {!address ? (
+                <div onMouseEnter={openDropdown} onMouseLeave={hideDropdown}>
+                    <WalletConnectButton {...props}>{children}</WalletConnectButton>
+                </div>
+            ) : (
+                <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}
+                {...(!address ? { onMouseEnter: openDropdown, onMouseLeave: hideDropdown } : {})}
             >
-                {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>
+                    {address && (
+                        <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>
+                    {address && (
+                        <li onClick={handleDisconnect} className="adapter-dropdown-list-item" role="menuitem">
+                            Disconnect
+                        </li>
+                    )}
                 </ul>
             </Collapse>
         </div>

package/style.css

@@ -170,9 +170,8 @@
 }
 .adapter-dropdown-collapse {
     position: absolute;
-    top: 0;
     margin: auto;
-    top: calc(100% + 5px);
+    top: 100%;
     right: 0;
     left: 0;
     display: inline-flex;
@@ -183,9 +182,12 @@
     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;
+    position: relative;
+    top: 5px;
     padding: 5px;
+    overflow: hidden;
+    height: min-content;
     background: #2c2d30;
 }
 .adapter-dropdown-list li {