Skip to content

Commit

Permalink
Merge pull request #18 from tronprotocol/release/v1.1.6
Browse files Browse the repository at this point in the history
Release/v1.1.6
  • Loading branch information
unicornonea authored May 5, 2023
2 parents 81aa622 + 68e847b commit 5054b83
Show file tree
Hide file tree
Showing 74 changed files with 6,024 additions and 958 deletions.
21 changes: 17 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@ This repository contains wallet adapters and components for Tron DApps. With out

- [TronLink App](https://www.tronlink.org/): All versions
- [TronLink Extension](https://www.tronlink.org/): All versions
- [BitKeep App](https://bitkeep.com/): All versions
- [BitKeep Extension](https://bitkeep.com/): All versions
- [OkxWallet App](https://okx.com/): Android all versions
- [OkxWallet Extension](https://okx.com/): All versions
- [TokenPocket App](https://www.tokenpocket.pro/): All versions
- [Ledger](https://www.ledger.com/): All versions
- [WalletConnect](https://walletconnect.org): `v2.0`

### Coming Soon

- [TokenPocket](https://www.tokenpocket.pro/)
- [imToken](https://token.im/)

## Introduction
Expand Down Expand Up @@ -122,6 +126,9 @@ tronwallet-adapter
| | ├─tronlink # adapter for tronlink
| | ├─ledger # adapter for ledger
| | ├─walletconnect # adapter for walletconnect
| | ├─tokenpocket # adapter for TokenPocket
| | ├─bitkeep # adapter for BitKeep
| | ├─okxwallet # adapter for Okx Wallet
| ├─react
| | ├─react-hooks # react hooks to manage wallet state
| | ├─react-ui # react ui components to select/connect wallets
Expand All @@ -141,9 +148,12 @@ You can use the `@tronweb3/tronwallet-adapters` package, or add the individual w
| package | description | npm |
| ------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| adapters | Includes all the wallets (with tree shaking) | [`@tronweb3/tronwallet-adapters`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapters) |
| [tronlink](https://www.tronlink.org/) | Adapter for tronlink extention and tronlink app(IOS and Android) | [`@tronweb3/tronwallet-adapter-tronlink`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-tronlink) |
| [ledger](https://www.ledger.com/) | Adapter for ledger | [`@tronweb3/tronwallet-adapter-ledger`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-ledger) |
| [walletconnect](https://walletconnect.com/) | Adapter for walletconnect | [`@tronweb3/tronwallet-adapter-walletconnect`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-walletconnect) |
| [tronlink](https://www.tronlink.org/) | Adapter for TronLink extention and TronLink app(IOS and Android) | [`@tronweb3/tronwallet-adapter-tronlink`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-tronlink) |
| [ledger](https://www.ledger.com/) | Adapter for Ledger | [`@tronweb3/tronwallet-adapter-ledger`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-ledger) |
| [walletconnect](https://walletconnect.com/) | Adapter for Walletconnect | [`@tronweb3/tronwallet-adapter-walletconnect`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-walletconnect) |
| [tokenpocket](https://tokenpocket.pro/) | Adapter for TokenPocket App(IOS and Android) | [`@tronweb3/tronwallet-adapter-tokenpocket`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-tokenpocket) |
| [bitkeep](https://bitkeep.com/) | Adapter for BitKeep extension and BitKeep App(IOS and Android) | [`@tronweb3/tronwallet-adapter-bitkeep`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-bitkeep) |
| [okxwallet](https://www.okx.com/) | Adapter for Okx Wallet extension and App(Android) | [`@tronweb3/tronwallet-adapter-okxwallet`](https://www.npmjs.com/package/@tronweb3/tronwallet-adapter-okxwallet) |

### React Components

Expand All @@ -163,6 +173,9 @@ This package contains all wallet adapters for Tron including:
- [TronLink](https://www.tronlink.org/).
- [Ledger](https://www.ledger.com/).
- [WalletConnect](https://walletconnect.org).
- [TokenPocket](https://tokenpocket.pro/).
- [BitKeep](https://bitkeep.com).
- [Okx Wallet](https://okx.com).

Code example:

Expand Down
5 changes: 4 additions & 1 deletion demos/dev-demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,17 @@
"@emotion/styled": "^11.10.4",
"@mui/material": "^5.10.10",
"@tronweb3/tronwallet-abstract-adapter": "^1.1.0",
"@tronweb3/tronwallet-adapter-bitkeep": "^1.0.0",
"@tronweb3/tronwallet-adapter-ledger": "^1.1.2",
"@tronweb3/tronwallet-adapter-okxwallet": "^1.0.0",
"@tronweb3/tronwallet-adapter-react-hooks": "^1.0.0",
"@tronweb3/tronwallet-adapter-react-ui": "^1.1.0",
"@tronweb3/tronwallet-adapter-tokenpocket": "^1.0.0",
"@tronweb3/tronwallet-adapters": "^1.1.2",
"events": "^3.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tronweb": "^4.4.0",
"tronweb": "5.1",
"vconsole": "^3.15.0"
},
"devDependencies": {
Expand Down
15 changes: 15 additions & 0 deletions demos/dev-demo/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { CustomConnectWithSelectAccount } from './LedgerDemo/CustomConnectWithSe
import { CustomConnectWithGetAccounts } from './LedgerDemo/CustomConnectWithGetAccounts.js';
import { TronLinkAdapterDemo } from './TronLinkAdapterDemo.js';
import { ReactHooksDemo } from './ReactHooksDemo.js';
import { TokenPocketAdapterDemo } from './TokenPocketAdapterDemo.js';
import { BitKeepAdapterDemo } from './BitKeepAdapterDemo.js';
import { OkxWalletAdapterDemo } from './OkxWalletAdapterDemo.js';
interface TabPanelProps {
children?: React.ReactNode;
index: number;
Expand Down Expand Up @@ -39,6 +42,9 @@ function App() {
<Tab label="LedgerAdapter CustomConnectWithSelectAccount" />
<Tab label="LedgerAdapter CustomConnectWithGetAccounts" />
<Tab label="ReactHooks Demo" />
<Tab label="TokenPocketAdapter Demo" />
<Tab label="BitKeepAdapter Demo" />
<Tab label="OkxWalletAdapter Demo" />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
Expand All @@ -56,6 +62,15 @@ function App() {
<TabPanel value={value} index={4}>
<ReactHooksDemo></ReactHooksDemo>
</TabPanel>
<TabPanel value={value} index={5}>
<TokenPocketAdapterDemo></TokenPocketAdapterDemo>
</TabPanel>
<TabPanel value={value} index={6}>
<BitKeepAdapterDemo></BitKeepAdapterDemo>
</TabPanel>
<TabPanel value={value} index={7}>
<OkxWalletAdapterDemo></OkxWalletAdapterDemo>
</TabPanel>
</Box>
</div>
);
Expand Down
246 changes: 246 additions & 0 deletions demos/dev-demo/src/BitKeepAdapterDemo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
import type { ReactNode } from 'react';
import { useEffect, useMemo, useState, useCallback } from 'react';
// import './App.css';
import type { Adapter } from '@tronweb3/tronwallet-abstract-adapter';
import { AdapterState } from '@tronweb3/tronwallet-abstract-adapter';
import { BitKeepAdapter } from '@tronweb3/tronwallet-adapter-bitkeep';
import { Box, Button, Typography, Tooltip, Select, MenuItem, Alert, FormControl, TextField } from '@mui/material';
import { tronWeb } from './tronweb.js';
const receiver = 'TMDKznuDWaZwfZHcM61FVFstyYNmK6Njk1';

export function BitKeepAdapterDemo() {
const [connectState, setConnectState] = useState(AdapterState.NotFound);
const [account, setAccount] = useState('');
const [readyState, setReadyState] = useState('');
const [chainId, setChainId] = useState<string>('');
const [selectedChainId, setSelectedChainId] = useState('0xcd8690dc');
const [open, setOpen] = useState(false);
const [signMessage, setSignMessage] = useState('Hello, Adapter');
const [signedMessage, setSignedMessage] = useState('');
const adapter = useMemo(() => new BitKeepAdapter({
openUrlWhenWalletNotFound: false,
checkTimeout: 3000
}), []);

useEffect(() => {
setConnectState(adapter.state);
setAccount(adapter.address || '');
setReadyState(adapter.readyState);
adapter.network().then(async (res) => {
console.log(res);
setChainId(res.chainId);
const balance = await tronWeb.trx.getBalance(adapter.address)
}).catch(e => {
console.log(e)
})

adapter.on('readyStateChanged', async () => {
console.log('readyState: ', adapter.readyState)
setReadyState(adapter.readyState)
setConnectState(adapter.state)
})
adapter.on('connect', () => {
console.log('connect: ', adapter.address);
setAccount(adapter.address || '');
setConnectState(AdapterState.Connected)
adapter.network().then((res) => {
console.log(res);
setChainId(res.chainId)
}).catch(e => {
console.log(e)
})
});
adapter.on('accountsChanged', (data, preaddr) => {
console.log('accountsChanged: current', data,' pre: ', preaddr);
setAccount(data as string);
});

adapter.on('chainChanged', (data) => {
console.log('chainChanged: ', data);
setChainId((data as any).chainId);
});

adapter.on('disconnect', () => {
console.log('disconnect');
setConnectState(AdapterState.Disconnect)
setAccount(adapter.address || '');
});

return () => {
adapter.removeAllListeners();
};
}, [adapter]);

// function onSwitchChain() {
// adapter.switchChain(selectedChainId);
// }

async function onSignTransaction() {
const tronWeb = (window as any).tronWeb as any;
console.log(adapter.address)
const transaction = await tronWeb.transactionBuilder.sendTrx(receiver, tronWeb.toSun(0.001), adapter.address);
console.log('before signtransaction')
const signedTransaction = await adapter.signTransaction(transaction);
// const signedTransaction = await tronWeb.trx.sign(transaction);
console.log('after signtransaction')
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 onVerifyMessage = useCallback(
async function () {
const address = await tronWeb.trx.verifyMessage(tronWeb.toHex(signMessage), signedMessage);
alert(address === adapter.address ? 'success verify' : 'failed verify');
},
[signMessage, signedMessage, adapter]
);

async function handleConnect() {
try {
await adapter?.connect()
} catch(e: any) {
console.log(e.error?.message || e.message);
}
}
return (
<Box sx={{ width: '100%', maxWidth: 900 }}>
<h1>BitKeep Demo</h1>
<Typography variant="h6" gutterBottom>
Your account address:
</Typography>
<Detail>{account}</Detail>

<Typography variant="h6" gutterBottom>
Current network you choose: {chainId}
</Typography>

<Typography variant="h6" gutterBottom>
ReadyState: {readyState}
</Typography>
<Typography variant="h6" gutterBottom>
Current connection status:&nbsp;&nbsp;
<span style={{ color: adapter?.connected ? '#08f108' : 'orange' }}>{connectState}</span>
</Typography>
<Typography variant="h6" gutterBottom>
<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={handleConnect}>
Connect
</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>
</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>
</Detail>
{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/${adapter.address}`}>
Tron Scan
</a>
</Alert>
)}
{/* <Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={selectedChainId}
label="Chain"
size="small"
onChange={(e) => setSelectedChainId(e.target.value)}
>
<MenuItem value={'0x2b6653dc'}>Mainnet</MenuItem>
<MenuItem value={'0x94a9059e'}>Shasta</MenuItem>
<MenuItem value={'0xcd8690dc'}>Nile</MenuItem>
</Select>
<Button style={{ margin: '0 20px' }} onClick={onSwitchChain} variant="contained">
Switch Chain to {selectedChainId}
</Button> */}
{/* <MultiSignDemo address={account} adapter={adapter}></MultiSignDemo> */}
</Box>
);
}

export function Detail(props: { children: ReactNode }) {
return <div style={{ margin: 15 }}>{props.children}</div>;
}

function MultiSignDemo(props: { address: string; adapter: Adapter }) {
const [address1, setAddress1] = useState('');
const [open, setOpen] = useState(false);

const [transferTransaction, setTransferTransaction] = useState(null);
const [canSend, setCanSend] = useState(false);

const multiSignWithAddress1 = useCallback(
async function () {
const tronWeb = (window as any).tronWeb1 as any;
const transaction = await tronWeb.transactionBuilder.sendTrx(receiver, tronWeb.toSun(0.1), props.address, { permissionId: 2 });
// debugger;
console.log('before multiSign', transaction)
const signedTransaction = await props.adapter.multiSign(transaction, null, 2);
console.log('after multiSign', signedTransaction)
setTransferTransaction(signedTransaction);
},
[props.adapter, setTransferTransaction, props.address]
);
async function broadcast() {
const res = await tronWeb.trx.broadcast(transferTransaction);
setOpen(true);
}
return (
<>
<h3>MultiSign Demo</h3>
{/* <p>You can input two address and click approve button to give them permission.</p>
<div>
<TextField size="small" label="address to approve" value={address1} onChange={(e) => setAddress1(e.target.value)}></TextField>
<Button style={{ marginLeft: 10 }} disabled={!address1} variant="contained" onClick={onApprove}>
Approve
</Button>
</div> */}

<p>You can click following buttons to multiSign and send the Transaction</p>
<div>
<Button disabled={!props.address} variant="contained" onClick={multiSignWithAddress1}>
Sign with 1st Address
</Button>
{/* <Button disabled={!transferTransaction} style={{ marginLeft: 10 }} variant="contained" onClick={multiSignWithAddress2}>
Sign with 2nd Address
</Button> */}
<Button style={{ marginLeft: 10 }} variant="contained" onClick={broadcast}>
Send the transaction
</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.address}`}>
Tron Scan
</a>
</Alert>
)}
</>
);
}
Loading

0 comments on commit 5054b83

Please sign in to comment.