Merge pull request #10 from tronprotocol/release/v1.1.2

Release/v1.1.2

Author: unicornonea

.npmrc

@@ -1 +1,3 @@
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+# not add workspace: to package.json
+save-workspace-protocol=false

demos/dev-demo/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "printWidth": 180,
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

demos/dev-demo/package.json

@@ -12,11 +12,11 @@
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
         "@mui/material": "^5.10.10",
-        "@tronweb3/tronwallet-abstract-adapter": "workspace:^1.1.0",
-        "@tronweb3/tronwallet-adapter-ledger": "workspace:^1.0.0",
-        "@tronweb3/tronwallet-adapter-react-hooks": "workspace:^1.0.0",
-        "@tronweb3/tronwallet-adapter-react-ui": "workspace:^1.1.0",
-        "@tronweb3/tronwallet-adapters": "workspace:^1.1.0",
+        "@tronweb3/tronwallet-abstract-adapter": "^1.1.0",
+        "@tronweb3/tronwallet-adapter-ledger": "^1.1.2",
+        "@tronweb3/tronwallet-adapter-react-hooks": "^1.0.0",
+        "@tronweb3/tronwallet-adapter-react-ui": "^1.1.0",
+        "@tronweb3/tronwallet-adapters": "^1.1.2",
         "events": "^3.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

demos/dev-demo/src/App.tsx

@@ -1,28 +1,57 @@
+import { Box, Tab, Tabs } from '@mui/material';
 import React from 'react';
-// import {
-//     WalletActionButton,
-//     WalletConnectButton,
-//     WalletDisconnectButton,
-//     WalletSelectButton,
-// } from '@tronweb3/tronwallet-adapter-react-ui';
 import { LedgerAdapterDemo } from './LedgerAdapterDemo.js';
+import { CustomConnectWithSelectAccount } from './LedgerDemo/CustomConnectWithSelectAccount.js';
+import { CustomConnectWithGetAccounts } from './LedgerDemo/CustomConnectWithGetAccounts.js';
 import { TronLinkAdapterDemo } from './TronLinkAdapterDemo.js';
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
 
+    return (
+        <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
+            {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+        </div>
+    );
+}
 function App() {
+    const [value, setValue] = React.useState(() => {
+        return Number(localStorage.getItem('tab')) || 0;
+    });
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        localStorage.setItem('tab', String(newValue));
+        setValue(newValue);
+    };
     return (
         <div className="App">
-            {/* <button onClick={() => setIsOpen((v) => !v)}>{isOpen ? 'fold' : 'expand'}</button>
-            <Collapse isOpen={isOpen}>Collapse Content</Collapse> */}
-            {/* <h2>WalletSelectButton</h2>
-            <WalletSelectButton></WalletSelectButton>
-            <h2>WalletConnectButton</h2>
-            <WalletConnectButton></WalletConnectButton>
-            <h2>WalletDisconnectButton</h2>
-            <WalletDisconnectButton></WalletDisconnectButton>
-            <h2>WalletActionButton</h2>
-            <WalletActionButton></WalletActionButton> */}
-            <LedgerAdapterDemo></LedgerAdapterDemo>
-            <TronLinkAdapterDemo></TronLinkAdapterDemo>
+            <Box sx={{ width: '100%' }}>
+                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                    <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                        <Tab label="TronLinkAdapter Demo" />
+                        <Tab label="LedgerAdapter Demo" />
+                        <Tab label="LedgerAdapter CustomConnectWithSelectAccount" />
+                        <Tab label="LedgerAdapter CustomConnectWithGetAccounts" />
+                    </Tabs>
+                </Box>
+                <TabPanel value={value} index={0}>
+                    <TronLinkAdapterDemo></TronLinkAdapterDemo>
+                </TabPanel>
+                <TabPanel value={value} index={1}>
+                    <LedgerAdapterDemo></LedgerAdapterDemo>
+                </TabPanel>
+                <TabPanel value={value} index={2}>
+                    <CustomConnectWithSelectAccount></CustomConnectWithSelectAccount>
+                </TabPanel>
+                <TabPanel value={value} index={3}>
+                    <CustomConnectWithGetAccounts></CustomConnectWithGetAccounts>
+                </TabPanel>
+            </Box>
         </div>
     );
 }

demos/dev-demo/src/LedgerAdapterDemo.tsx

@@ -1,40 +1,72 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
 import { LedgerAdapter } from '@tronweb3/tronwallet-adapters';
 import { AdapterState } from '@tronweb3/tronwallet-abstract-adapter';
-import { Box, Button, Typography, Alert, TextField } from '@mui/material';
+import { Box, Button, Typography, Alert, TextField, DialogContent, DialogContentText } from '@mui/material';
 import { tronWeb } from './tronweb';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import { selectAccount as openSelectAccountModal } from './LedgerDemo/selectAccount.js';
+import type { SelectAccount } from '@tronweb3/tronwallet-adapter-ledger/lib/types/LedgerWallet.js';
+export const receiver = 'TMDKznuDWaZwfZHcM61FVFstyYNmK6Njk1';
 
 export function LedgerAdapterDemo() {
     const [connectState, setConnectState] = useState(AdapterState.NotFound);
     const [account, setAccount] = useState('');
     const [signMessage, setSignMessage] = useState('Hello, Adapter');
-    const [signedMessage, setSignedMessage] = useState('')
-    const receiver = 'TMDKznuDWaZwfZHcM61FVFstyYNmK6Njk1';
-    
+    const [signedMessage, setSignedMessage] = useState('');
+
     const [open, setOpen] = useState(false);
-    const adapter = useMemo(() => new LedgerAdapter({ accountNumber: 2 }), []);
+    const [loadingVisible, setLoadingVisible] = useState(false);
+    const [verifyAddressVisible, setVerifyAddressVisible] = useState(false);
+
+    async function onConnect() {
+        try {
+            await adapter.connect();
+            // eslint-disable-next-line no-useless-catch
+        } catch (e: any) {
+            alert(e.message);
+            throw e;
+        } finally {
+            setLoadingVisible(false);
+            setVerifyAddressVisible(false);
+        }
+    }
+
+    const selectAccount = useCallback<SelectAccount>(async function ({ accounts, ledgerUtils }) {
+        const account = await openSelectAccountModal({ accounts, getAccounts: ledgerUtils.getAccounts });
+        return account;
+    }, []);
+    const adapter = useMemo(
+        () =>
+            new LedgerAdapter({
+                accountNumber: 1,
+                getDerivationPath(index: number) {
+                    return `44'/195'/0'/0/${index}`;
+                },
+            }),
+        []
+    );
 
     useEffect(() => {
-        console.log('--- new adapter ----');
         setConnectState(adapter.state);
         setAccount(adapter.address || '');
 
         adapter.on('connect', () => {
-            console.log('---connect', adapter.address);
+            console.log('[Adapter Event] connect', adapter.address);
             setAccount(adapter.address || '');
         });
         adapter.on('stateChanged', (state) => {
-            console.log('---state change', state);
+            console.log('[Adapter Event] state change', state);
             setConnectState(state);
         });
         adapter.on('accountsChanged', (data) => {
-            console.log('---account changed', data);
+            console.log('[Adapter Event] account changed', data);
             setAccount(data as string);
         });
 
         adapter.on('disconnect', () => {
-            console.log('---disconnect');
+            console.log('[Adapter Event] disconnect');
         });
 
         return () => {
@@ -45,20 +77,25 @@ export function LedgerAdapterDemo() {
     async function onSignTransaction() {
         const transaction = await tronWeb.transactionBuilder.sendTrx(receiver, tronWeb.toSun(0.1), adapter.address);
         const signedTransaction = await adapter.signTransaction(transaction);
-        // const signedTransaction = await tronWeb.trx.sign(transaction);
         const res = await tronWeb.trx.sendRawTransaction(signedTransaction);
         setOpen(true);
     }
 
-    const onSignMessage = useCallback(async function () {
-        const res = await adapter.signMessage(signMessage);
-        setSignedMessage(res);
-    }, [adapter, signMessage, setSignedMessage]);
+    const onSignMessage = useCallback(
+        async function () {
+            const res = await adapter.signMessage(signMessage);
+            setSignedMessage(res);
+        },
+        [adapter, signMessage, setSignedMessage]
+    );
 
-    const onVerifyMessage = useCallback(async function() {
-        const address = await tronWeb.trx.verifyMessageV2(signMessage, signedMessage);
-        alert(address === adapter.address ? '验证成功' : '验证失败')
-    }, [signMessage, signedMessage, adapter])
+    const onVerifyMessage = useCallback(
+        async function () {
+            const address = await tronWeb.trx.verifyMessageV2(signMessage, signedMessage);
+            alert(address === adapter.address ? 'success verify' : 'failed verify');
+        },
+        [signMessage, signedMessage, adapter]
+    );
 
     return (
         <Box sx={{ width: '100%', maxWidth: 500 }}>
@@ -68,35 +105,57 @@ export function LedgerAdapterDemo() {
             </Typography>
             <Detail>{account}</Detail>
 
-
             <Typography variant="h6" gutterBottom>
                 Current connection status:&nbsp;&nbsp;
                 <span style={{ color: adapter?.connected ? '#08f108' : 'orange' }}>{connectState}</span>
             </Typography>
             <Typography variant="h6" gutterBottom>
-                <TextField value={signMessage} onChange={e => setSignMessage(e.target.value)}></TextField>
+                <TextField label="Message to sign" size="small" value={signMessage} onChange={(e) => setSignMessage(e.target.value)}></TextField>
             </Typography>
             <Detail>
-                <Button variant="contained" disabled={adapter?.connected} onClick={() => adapter?.connect()}>
+                <Button variant="contained" disabled={adapter?.connected} onClick={onConnect}>
                     Connect
-                </Button>&nbsp;&nbsp;&nbsp;&nbsp;
+                </Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;
                 <Button variant="contained" disabled={!adapter?.connected} onClick={() => adapter?.disconnect()}>
                     Disconnect
-                </Button>&nbsp;&nbsp;&nbsp;&nbsp;
-                <Button variant="contained" disabled={!adapter?.connected} onClick={onSignTransaction}>Transfer</Button>
+                </Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <Button variant="contained" disabled={!adapter?.connected} onClick={onSignTransaction}>
+                    Transfer
+                </Button>
             </Detail>
             <Detail>
-                <Button variant="contained" onClick={onSignMessage}>Sign Message</Button>&nbsp;&nbsp;&nbsp;&nbsp;
-                <Button variant="contained" disabled={!signedMessage} onClick={onVerifyMessage}>Verify Signed Message</Button>
+                <Button variant="contained" onClick={onSignMessage}>
+                    Sign Message
+                </Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <Button variant="contained" disabled={!signedMessage} onClick={onVerifyMessage}>
+                    Verify Signed Message
+                </Button>
             </Detail>
             {open && (
                 <Alert onClose={() => setOpen(false)} severity="success" sx={{ width: '100%', marginTop: 1 }}>
-                    Success! You can confirm your transfer on{' '}
+                    Success! You can confirm your transfer on
                     <a target="_blank" rel="noreferrer" href={`https://nile.tronscan.org/#/address/${adapter.address}`}>
                         Tron Scan
                     </a>
                 </Alert>
             )}
+
+            <Dialog onClose={() => setLoadingVisible(false)} open={loadingVisible}>
+                <DialogTitle>Connecting to Ledger....</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>Please connect your ledger and enter TRON app...</DialogContentText>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog onClose={() => setVerifyAddressVisible(false)} open={verifyAddressVisible}>
+                <DialogTitle>Verify on Ledger....</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>Please approve on your ledger</DialogContentText>
+                </DialogContent>
+            </Dialog>
         </Box>
     );
 }
@@ -108,4 +167,3 @@ function Detail(props: { children: ReactNode }) {
         </Typography>
     );
 }
-

demos/dev-demo/src/LedgerDemo/ConnectTip.tsx

@@ -0,0 +1,18 @@
+export function ConnectTip() {
+    return (
+        <div>
+            <strong>Note</strong>
+            <ul>
+                <li>1. Ledger Firmware versions supported: Nano S: v1.5.5 and above; Nano X: v1.2.4-1 and above</li>
+                <li>
+                    2. Enable these features before you use them:
+                    <ul>
+                        <li>2.1 Transaction Data: Enable it to add notes to transfers.</li>
+                        <li>2.2 Custom Contracts: Enable it to support smart contract transaction, such as TRC20 transfer.</li>
+                        <li>2.3 Sign By Hash: Enable it to edit the account access, i.e. set up multi-signature for the account.</li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    );
+}

demos/dev-demo/src/LedgerDemo/ConnectedSection.tsx

@@ -0,0 +1,63 @@
+import { Alert, Button, TextField } from '@mui/material';
+import type { LedgerAdapter } from '@tronweb3/tronwallet-adapter-ledger';
+import { useCallback, useState } from 'react';
+import { receiver } from '../LedgerAdapterDemo.js';
+import { tronWeb } from '../tronweb.js';
+
+export function ConnectedSection(props: { adapter: LedgerAdapter }) {
+    const [signMessage, setSignMessage] = useState('Hello, Adapter');
+    const [signedMessage, setSignedMessage] = useState('');
+    const [open, setOpen] = useState(false);
+
+    const onSignMessage = useCallback(
+        async function () {
+            const res = await props.adapter.signMessage(signMessage);
+            setSignedMessage(res);
+        },
+        [props.adapter, signMessage, setSignedMessage]
+    );
+
+    const onVerifyMessage = useCallback(
+        async function () {
+            const address = await tronWeb.trx.verifyMessageV2(signMessage, signedMessage);
+            alert(address === props.adapter.address ? 'success verify' : 'failed verify');
+        },
+        [signMessage, signedMessage, props.adapter]
+    );
+    async function onSignTransaction() {
+        const transaction = await tronWeb.transactionBuilder.sendTrx(receiver, tronWeb.toSun(0.1), props.adapter.address);
+        const signedTransaction = await props.adapter.signTransaction(transaction);
+        const res = await tronWeb.trx.sendRawTransaction(signedTransaction);
+        setOpen(true);
+    }
+    return (
+        <div>
+            <div>
+                <p>Connect successfully! </p>
+                <p>Your address is {props.adapter.address}</p>
+            </div>
+            <TextField label="Message to sign" size="small" value={signMessage} onChange={(e) => setSignMessage(e.target.value)}></TextField>
+            <div style={{ marginTop: 10 }}>
+                <Button variant="contained" disabled={!props.adapter?.connected} onClick={onSignTransaction}>
+                    Transfer
+                </Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <Button variant="contained" onClick={onSignMessage}>
+                    Sign Message
+                </Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <Button variant="contained" disabled={!signedMessage} onClick={onVerifyMessage}>
+                    Verify Signed Message
+                </Button>
+            </div>
+            {open && (
+                <Alert onClose={() => setOpen(false)} severity="success" sx={{ width: '100%', marginTop: 1 }}>
+                    Success! You can confirm your transfer on
+                    <a target="_blank" rel="noreferrer" href={`https://nile.tronscan.org/#/address/${props.adapter.address}`}>
+                        Tron Scan
+                    </a>
+                </Alert>
+            )}
+        </div>
+    );
+}