Skip to content

Commit 1ff0bd4

Browse files
PatrickDinhPatrickDinh
committed
generate the examples
1 parent f35800a commit 1ff0bd4

File tree

32 files changed

+228
-236
lines changed

32 files changed

+228
-236
lines changed

‎examples/cloud_provider/production_react_netlify/.env.template‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
99
VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
1010
VITE_ALGOD_SERVER=http://localhost
1111
VITE_ALGOD_PORT=4001
12-
VITE_ALGOD_NETWORK=""
12+
VITE_ALGOD_NETWORK=localnet
1313

1414
# Indexer
1515
VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

‎examples/cloud_provider/production_react_netlify/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@
3535
"vite-plugin-node-polyfills": "^0.22.0"
3636
},
3737
"dependencies": {
38-
"@algorandfoundation/algokit-utils": "^7.0.0",
38+
"@algorandfoundation/algokit-utils": "^8.0.0",
3939
"@blockshake/defly-connect": "^1.1.6",
40-
"@daffiwallet/connect": "^1.0.3",
41-
"@perawallet/connect": "^1.3.4",
42-
"@txnlab/use-wallet": "^2.8.2",
43-
"algosdk": ">=2.9.0 <3.0",
40+
"@perawallet/connect": "^1.3.5",
41+
"@txnlab/use-wallet": "^4.0.0-beta.2",
42+
"@txnlab/use-wallet-react": "^4.0.0-beta.2",
43+
"algosdk": "^3.0.0",
4444
"daisyui": "^4.0.0",
4545
"notistack": "^3.0.1",
4646
"react": "^18.2.0",
@@ -76,6 +76,7 @@
7676
]
7777
},
7878
"overrides": {
79-
"ws@>7.0.0 <7.5.9": "7.5.10"
79+
"ws@>7.0.0 <7.5.9": "7.5.10",
80+
"algosdk@<3.0.0": "3.0.0"
8081
}
8182
}

‎examples/cloud_provider/production_react_netlify/src/App.tsx‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,26 @@
1-
import { DeflyWalletConnect } from '@blockshake/defly-connect'
2-
import { DaffiWalletConnect } from '@daffiwallet/connect'
3-
import { PeraWalletConnect } from '@perawallet/connect'
4-
import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
5-
import algosdk from 'algosdk'
1+
import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
62
import { SnackbarProvider } from 'notistack'
73
import Home from './Home'
84
import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
95

10-
let providersArray: ProvidersArray
11-
if (import.meta.env.VITE_ALGOD_NETWORK === '') {
6+
let supportedWallets: SupportedWallet[]
7+
if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
128
const kmdConfig = getKmdConfigFromViteEnvironment()
13-
providersArray = [
9+
supportedWallets = [
1410
{
15-
id: PROVIDER_ID.KMD,
16-
clientOptions: {
17-
wallet: kmdConfig.wallet,
18-
password: kmdConfig.password,
19-
host: kmdConfig.server,
11+
id: WalletId.KMD,
12+
options: {
13+
baseServer: kmdConfig.server,
2014
token: String(kmdConfig.token),
2115
port: String(kmdConfig.port),
2216
},
2317
},
2418
]
2519
} else {
26-
providersArray = [
27-
{ id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
28-
{ id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
29-
{ id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
30-
{ id: PROVIDER_ID.EXODUS },
20+
supportedWallets = [
21+
{ id: WalletId.DEFLY },
22+
{ id: WalletId.PERA },
23+
{ id: WalletId.EXODUS },
3124
// If you are interested in WalletConnect v2 provider
3225
// refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
3326
]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
3629
export default function App() {
3730
const algodConfig = getAlgodConfigFromViteEnvironment()
3831

39-
const walletProviders = useInitializeProviders({
40-
providers: providersArray,
41-
nodeConfig: {
42-
network: algodConfig.network,
43-
nodeServer: algodConfig.server,
44-
nodePort: String(algodConfig.port),
45-
nodeToken: String(algodConfig.token),
32+
const walletManager = new WalletManager({
33+
wallets: supportedWallets,
34+
defaultNetwork: algodConfig.network,
35+
networks: {
36+
[algodConfig.network]: {
37+
name: algodConfig.network,
38+
algod: {
39+
baseServer: algodConfig.server,
40+
port: algodConfig.port,
41+
token: String(algodConfig.token),
42+
},
43+
},
4644
},
47-
algosdkStatic: algosdk,
4845
})
4946

5047
return (
5148
<SnackbarProvider maxSnack={3}>
52-
<WalletProvider value={walletProviders}>
49+
<WalletProvider manager={walletManager}>
5350
<Home />
5451
</WalletProvider>
5552
</SnackbarProvider>

‎examples/cloud_provider/production_react_netlify/src/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// src/components/Home.tsx
2-
import { useWallet } from '@txnlab/use-wallet'
2+
import { useWallet } from '@txnlab/use-wallet-react'
33
import React, { useState } from 'react'
44
import ConnectWallet from './components/ConnectWallet'
55
import Transact from './components/Transact'

‎examples/cloud_provider/production_react_netlify/src/components/Account.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useWallet } from '@txnlab/use-wallet'
1+
import { useWallet } from '@txnlab/use-wallet-react'
22
import { useMemo } from 'react'
33
import { ellipseAddress } from '../utils/ellipseAddress'
44
import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'

‎examples/cloud_provider/production_react_netlify/src/components/ConnectWallet.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Provider, useWallet } from '@txnlab/use-wallet'
1+
import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
22
import Account from './Account'
33

44
interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
77
}
88

99
const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
10-
const { providers, activeAddress } = useWallet()
10+
const { wallets, activeAddress } = useWallet()
1111

12-
const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
12+
const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
1313

1414
return (
1515
<dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
2525
)}
2626

2727
{!activeAddress &&
28-
providers?.map((provider) => (
28+
wallets?.map((wallet) => (
2929
<button
30-
data-test-id={`${provider.metadata.id}-connect`}
30+
data-test-id={`${wallet.id}-connect`}
3131
className="btn border-teal-800 border-1 m-2"
32-
key={`provider-${provider.metadata.id}`}
32+
key={`provider-${wallet.id}`}
3333
onClick={() => {
34-
return provider.connect()
34+
return wallet.connect()
3535
}}
3636
>
37-
{!isKmd(provider) && (
37+
{!isKmd(wallet) && (
3838
<img
39-
alt={`wallet_icon_${provider.metadata.id}`}
40-
src={provider.metadata.icon}
39+
alt={`wallet_icon_${wallet.id}`}
40+
src={wallet.metadata.icon}
4141
style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
4242
/>
4343
)}
44-
<span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
44+
<span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
4545
</button>
4646
))}
4747
</div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
6060
<button
6161
className="btn btn-warning"
6262
data-test-id="logout"
63-
onClick={() => {
64-
if (providers) {
65-
const activeProvider = providers.find((p) => p.isActive)
66-
if (activeProvider) {
67-
activeProvider.disconnect()
63+
onClick={async () => {
64+
if (wallets) {
65+
const activeWallet = wallets.find((w) => w.isActive)
66+
if (activeWallet) {
67+
await activeWallet.disconnect()
6868
} else {
6969
// Required for logout/cleanup of inactive providers
7070
// For instance, when you login to localnet wallet and switch network
7171
// to testnet/mainnet or vice verse.
72-
localStorage.removeItem('txnlab-use-wallet')
72+
localStorage.removeItem('@txnlab/use-wallet:v3')
7373
window.location.reload()
7474
}
7575
}

‎examples/cloud_provider/production_react_netlify/src/components/Transact.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
2-
import { useWallet } from '@txnlab/use-wallet'
2+
import { useWallet } from '@txnlab/use-wallet-react'
33
import { useSnackbar } from 'notistack'
44
import { useState } from 'react'
55
import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,20 +18,20 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
1818

1919
const { enqueueSnackbar } = useSnackbar()
2020

21-
const { signer, activeAddress } = useWallet()
21+
const { transactionSigner, activeAddress } = useWallet()
2222

2323
const handleSubmitAlgo = async () => {
2424
setLoading(true)
2525

26-
if (!signer || !activeAddress) {
26+
if (!transactionSigner || !activeAddress) {
2727
enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
2828
return
2929
}
3030

3131
try {
3232
enqueueSnackbar('Sending transaction...', { variant: 'info' })
3333
const result = await algorand.send.payment({
34-
signer,
34+
signer: transactionSigner,
3535
sender: activeAddress,
3636
receiver: receiverAddress,
3737
amount: algo(1),

‎examples/cloud_provider/production_react_netlify/src/utils/ellipseAddress.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export function ellipseAddress(address = ``, width = 6): string {
2-
return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
1+
export function ellipseAddress(address: string | null, width = 6): string {
2+
return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
33
}

‎examples/cloud_provider/production_react_vercel/.env.template‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
99
VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
1010
VITE_ALGOD_SERVER=http://localhost
1111
VITE_ALGOD_PORT=4001
12-
VITE_ALGOD_NETWORK=""
12+
VITE_ALGOD_NETWORK=localnet
1313

1414
# Indexer
1515
VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

‎examples/cloud_provider/production_react_vercel/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@
3535
"vite-plugin-node-polyfills": "^0.22.0"
3636
},
3737
"dependencies": {
38-
"@algorandfoundation/algokit-utils": "^7.0.0",
38+
"@algorandfoundation/algokit-utils": "^8.0.0",
3939
"@blockshake/defly-connect": "^1.1.6",
40-
"@daffiwallet/connect": "^1.0.3",
41-
"@perawallet/connect": "^1.3.4",
42-
"@txnlab/use-wallet": "^2.8.2",
43-
"algosdk": ">=2.9.0 <3.0",
40+
"@perawallet/connect": "^1.3.5",
41+
"@txnlab/use-wallet": "^4.0.0-beta.2",
42+
"@txnlab/use-wallet-react": "^4.0.0-beta.2",
43+
"algosdk": "^3.0.0",
4444
"daisyui": "^4.0.0",
4545
"notistack": "^3.0.1",
4646
"react": "^18.2.0",
@@ -79,6 +79,7 @@
7979
]
8080
},
8181
"overrides": {
82-
"ws@>7.0.0 <7.5.9": "7.5.10"
82+
"ws@>7.0.0 <7.5.9": "7.5.10",
83+
"algosdk@<3.0.0": "3.0.0"
8384
}
8485
}

0 commit comments

Comments
 (0)