Skip to content

Commit

Permalink
docs: update README.md
Browse files Browse the repository at this point in the history
Adds recommended approach for node configuration settings, ensuring the consuming app's algod config matches use-wallet

closes #109
  • Loading branch information
drichar committed Sep 12, 2023
1 parent b3d6855 commit b50c564
Showing 1 changed file with 31 additions and 17 deletions.
48 changes: 31 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,19 +138,19 @@ import React from 'react'
import { WalletProvider, useInitializeProviders, PROVIDER_ID } from '@txnlab/use-wallet'

const getDynamicDeflyWalletConnect = async () => {
const DeflyWalletConnect = (await import("@blockshake/defly-connect")).DeflyWalletConnect;
return DeflyWalletConnect;
};
const DeflyWalletConnect = (await import('@blockshake/defly-connect')).DeflyWalletConnect
return DeflyWalletConnect
}

const getDynamicPeraWalletConnect = async () => {
const PeraWalletConnect = (await import("@perawallet/connect")).PeraWalletConnect;
return PeraWalletConnect;
};
const PeraWalletConnect = (await import('@perawallet/connect')).PeraWalletConnect
return PeraWalletConnect
}

const getDynamicDaffiWalletConnect = async () => {
const DaffiWalletConnect = (await import("@daffiwallet/connect")).DaffiWalletConnect;
return DaffiWalletConnect;
};
const DaffiWalletConnect = (await import('@daffiwallet/connect')).DaffiWalletConnect
return DaffiWalletConnect
}

export default function App() {
const providers = useInitializeProviders({
Expand All @@ -170,7 +170,6 @@ export default function App() {
}
```


## The `useWallet` Hook

The `useWallet` hook is used to access wallet provider and account state, send unsigned transactions to be signed, and send signed transactions to the node from anywhere in your app. It returns an object with the following properties:
Expand Down Expand Up @@ -335,14 +334,10 @@ Here is an example of a signing and sending simple pay transaction using `signTr
```jsx
import React from 'react'
import algosdk from 'algosdk'
import {
useWallet,
DEFAULT_NODE_BASEURL,
DEFAULT_NODE_TOKEN,
DEFAULT_NODE_PORT
} from '@txnlab/use-wallet'
import { useWallet } from '@txnlab/use-wallet'
import { NODE_BASEURL, NODE_TOKEN, NODE_PORT } from '@/constants'

const algodClient = new algosdk.Algodv2(DEFAULT_NODE_TOKEN, DEFAULT_NODE_BASEURL, DEFAULT_NODE_PORT)
const algodClient = new algosdk.Algodv2(NODE_TOKEN, NODE_BASEURL, NODE_PORT)

export default function Transact() {
const { activeAddress, signTransactions, sendTransactions } = useWallet()
Expand Down Expand Up @@ -558,6 +553,25 @@ const providers = useInitializeProviders({
})
```
The node configuration must match the network your app's algod client is connected to. The recommended approach is to define the node configuration variables as constants and pass them to both the `useInitializeProviders` hook and the `algosdk.Algodv2` constructor.
```jsx
import algosdk from 'algosdk'
import { NODE_BASEURL, NODE_TOKEN, NODE_PORT } from '@/constants'

const algodClient = new algosdk.Algodv2(NODE_TOKEN, NODE_BASEURL, NODE_PORT)

const providers = useInitializeProviders({
providers: [...],
nodeConfig: {
network: 'testnet',
nodeServer: NODE_BASEURL,
nodeToken: NODE_TOKEN,
nodePort: NODE_PORT
}
})
```
### Algosdk Static Import
By default, the providers dynamically import the `algosdk` peer dependency installed in your app, to reduce bundle size.
Expand Down

0 comments on commit b50c564

Please sign in to comment.