Skip to content

Commit

Permalink
chore: change base info
Browse files Browse the repository at this point in the history
  • Loading branch information
zorro11639 committed Jul 12, 2024
1 parent 9260485 commit ef69440
Show file tree
Hide file tree
Showing 5 changed files with 373 additions and 374 deletions.
Binary file added .DS_Store
Binary file not shown.
192 changes: 96 additions & 96 deletions wallet-adapter-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,103 +62,103 @@ function Profile() {
```jsx
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
function App() {
return <WalletProvider>/* here is application components */</WalletProvider>;
return <WalletProvider>/* here is application components */</WalletProvider>;
}
```
### Props
#### adapters:
- Required: `false`
- Type: `Adapter[]`
- Default: `[ new TronLinkAdapter() ]`
- Required: `false`
- Type: `Adapter[]`
- Default: `[ new TronLinkAdapter() ]`
Used to specify what wallet adapters are supported. All wallet adapters can be imported from `@tronweb3/tronwallet-adapters` package or their standalone package.
- Example
```jsx
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
function App() {
const adapters = useMemo(() => [new TronLinkAdapter()]);
return <WalletProvider adapters={adapters}>/* here is application components */</WalletProvider>;
}
```
- Example
```jsx
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
function App() {
const adapters = useMemo(() => [new TronLinkAdapter()]);
return <WalletProvider adapters={adapters}>/* here is application components */</WalletProvider>;
}
```
#### onError
- Required: `false`
- Type: `(error: WalletError): void`
- Default: `function(error) { console.error(error); }`
- Required: `false`
- Type: `(error: WalletError): void`
- Default: `function(error) { console.error(error); }`
Used to handle errors occured when use wallet. Developers can use the callback to tell users what happened according to the `error` type. All error types can be found [here](https://github.com/tronsolution/tronwallet-adapter/blob/main/packages/adapters/abstract-adapter/src/errors.ts).
Used to handle errors occured when use wallet. Developers can use the callback to tell users what happened according to the `error` type. All error types can be found [here](https://github.com/web3-geek/tronwallet-adapter/blob/main/packages/adapters/abstract-adapter/src/errors.ts).
- Example
```jsx
functon onError(e) {
if (e instanceof WalletNotFoundError) {
console.error(e.message);
} else if (e instanceof WalletDisconnectedError) {
console.error(e.message);
} else console.error(e.message);
}
```
- Example
```jsx
functon onError(e) {
if (e instanceof WalletNotFoundError) {
console.error(e.message);
} else if (e instanceof WalletDisconnectedError) {
console.error(e.message);
} else console.error(e.message);
}
```
#### autoConnect
- Required: `false`
- Type: `boolean`
- Default: `true`
- Required: `false`
- Type: `boolean`
- Default: `true`
Whether connect to the specified wallet automatically when loading the page and selecting a wallet.
#### disableAutoConnectOnLoad
- Required: `false`
- Type: `boolean`
- Default: `false`
- Required: `false`
- Type: `boolean`
- Default: `false`
When `autoConnect` enabled, whether automatically connect to current selected wallet when loading the page.
If you don't want to connect the wallet when page is first loaded, set `disableAutoConnectOnLoad: true`.
#### localStorageKey
- Required: `false`
- Type: `string`
- Default: `tronAdapterName`
- Required: `false`
- Type: `string`
- Default: `tronAdapterName`
Specified the key used to cache wallet name in `localStorage`. When user select a wallet, applications will cache the wallet name to localStorage.
#### Event handlers
You can provide event handlers for listen adapter events, such as `connect`,`disconnect`,`accountsChanged`. Available event handlers and their types are as follows:
- `readyStateChanged: (readyState: 'Found' | 'NotFound') => void`: Called when current adapter emits `readyStateChanged` event.
- `onConnect: (address: string) => void`: Called when current adapter emits `connect` event.
- `onDisconnect: () => void`: Called when current adapter emits `disconnect` event.
- `onAccountsChanged: (newAddress: string; preAddress?: string) => void`: Called when current adapter emits `accountsChanged` event.
- `onChainChanged: (chainData: unknow) => void`: Called when current adapter emits `chainChanged` event.
- `readyStateChanged: (readyState: 'Found' | 'NotFound') => void`: Called when current adapter emits `readyStateChanged` event.
- `onConnect: (address: string) => void`: Called when current adapter emits `connect` event.
- `onDisconnect: () => void`: Called when current adapter emits `disconnect` event.
- `onAccountsChanged: (newAddress: string; preAddress?: string) => void`: Called when current adapter emits `accountsChanged` event.
- `onChainChanged: (chainData: unknow) => void`: Called when current adapter emits `chainChanged` event.
An event handler named `onAdapterChanged` is also avaliable to get noticed when selected adapter is changed.
- `onAdapterChanged: (adapter: Adapter | null) => void`: Called when current adapter is changed.
- `onAdapterChanged: (adapter: Adapter | null) => void`: Called when current adapter is changed.
Here is an example:
```jsx
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
function App() {
const adapters = useMemo(() => [new TronLinkAdapter()]);
const onAccountsChanged = useCallback((curAddr, preAddr) => {
console.log('new address is: ', curAddr, ' previous address is: ', preAddr);
}, []);
return (
<WalletProvider adapters={adapters} onAccountsChanged={onAccountsChanged}>
/* here is application components */
</WalletProvider>
);
const adapters = useMemo(() => [new TronLinkAdapter()]);
const onAccountsChanged = useCallback((curAddr, preAddr) => {
console.log('new address is: ', curAddr, ' previous address is: ', preAddr);
}, []);
return (
<WalletProvider adapters={adapters} onAccountsChanged={onAccountsChanged}>
/* here is application components */
</WalletProvider>
);
}
```
Expand All @@ -172,84 +172,84 @@ function App() {
#### `autoConnect`
- Type: `boolean`
Synchronous with `autoConnect` property passed to `WalletProvider`.
- Type: `boolean`
Synchronous with `autoConnect` property passed to `WalletProvider`.
#### `disableAutoConnectOnLoad`
- Type: `boolean`
Synchronous with `disableAutoConnectOnLoad` property passed to `WalletProvider`.
- Type: `boolean`
Synchronous with `disableAutoConnectOnLoad` property passed to `WalletProvider`.
#### `wallet`
- Type: `Wallet | null`
The wallet current selected. If no wallet is selected, the value is `null`.
- Type: `Wallet | null`
The wallet current selected. If no wallet is selected, the value is `null`.
`Wallet` is defined as follow:
```typescript
interface Wallet {
adapter: Adapter; // wallet adapter
state: AdapterState;
adapter: Adapter; // wallet adapter
state: AdapterState;
}
enum AdapterState {
NotFound = 'NotFound',
Disconnect = 'Disconnected',
Connected = 'Connected',
NotFound = 'NotFound',
Disconnect = 'Disconnected',
Connected = 'Connected'
}
```
#### `address`
- Type: `string | null`
Address of current selected wallet. If no wallet is selected, the value is `null`.
- Type: `string | null`
Address of current selected wallet. If no wallet is selected, the value is `null`.
#### `wallets`
- Type: `Wallet[]`
Wallet list based on current used adapters when initial `WalletProvider`.
- Type: `Wallet[]`
Wallet list based on current used adapters when initial `WalletProvider`.
#### `connecting`
- Type: `boolean`
Indicate if is connecting to the wallet.
- Type: `boolean`
Indicate if is connecting to the wallet.
#### `connected`
- Type: `boolean`
Indicate if is connected with the wallet.
- Type: `boolean`
Indicate if is connected with the wallet.
#### `disconnecting`
- Type: `boolean`
Indicate if is connecting to the wallet.
- Type: `boolean`
Indicate if is connecting to the wallet.
### Methods
#### select
- Type: `(walletAdapterName: AdapterName) => void`
Select a wallet by walletAdapterName. Valid adapters can be found [here](https://github.com/tronsolution/tronwallet-adapter/tree/main/packages/adapters/adapters)
- Type: `(walletAdapterName: AdapterName) => void`
Select a wallet by walletAdapterName. Valid adapters can be found [here](https://github.com/web3-geek/tronwallet-adapter/tree/main/packages/adapters/adapters)
#### connect
- Type: `() => Promise<void>`
Connect to current selected wallet.
- Type: `() => Promise<void>`
Connect to current selected wallet.
#### disconnect
- Type: `() => Promise<void>`
Disconnect from current selected wallet.
- Type: `() => Promise<void>`
Disconnect from current selected wallet.
#### signTransaction
- Type: `(transaction: Transaction) => Promise<SignedTransaction>`
Sign a unsigned transaction. This method is the same as TronWeb API.
- Type: `(transaction: Transaction) => Promise<SignedTransaction>`
Sign a unsigned transaction. This method is the same as TronWeb API.
#### signMessage
- Type: `(message: string) => Promise<string>`
Sign a message.
- Type: `(message: string) => Promise<string>`
Sign a message.
### Example
Expand All @@ -258,19 +258,19 @@ import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
import { AdapterName } from '@tronweb3/tronwallet-abstract-adapter';

function Content() {
const { connect, disconnect, select, connected } = useWallet();
return (
<div>
<button type="button" onClick={() => select('TronLink Adapter')}>
Select TronLink
</button>
<button type="button" disabled={connected} onClick={connect}>
Connect
</button>
<button type="button" disabled={!connected} onClick={disconnect}>
Disconnect
</button>
</div>
);
const { connect, disconnect, select, connected } = useWallet();
return (
<div>
<button type="button" onClick={() => select('TronLink Adapter')}>
Select TronLink
</button>
<button type="button" disabled={connected} onClick={connect}>
Connect
</button>
<button type="button" disabled={!connected} onClick={disconnect}>
Disconnect
</button>
</div>
);
}
```
2 changes: 1 addition & 1 deletion wallet-adapter-vue-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ npm install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue

> Note: A stylesheet must be imported to make components work fine.
Here is a [Demo project](https://github.com/tronsolution/tronwallet-adapter/tree/main/demos/vue-ui/vite-app);
Here is a [Demo project](https://github.com/web3-geek/tronwallet-adapter/tree/main/demos/vue-ui/vite-app);

```html
<template>
Expand Down
Loading

0 comments on commit ef69440

Please sign in to comment.