Skip to content

Commit 492465f

Browse files
yashovardhanyashovardhan
authored
Update v11 code examples (#2946)
* Update v11 code examples * useIdentityToken -> useAuthTokenInfo * Update examples for v11 * Update switch-chain.mdx * Update web.mdx * fix vale * Update _aa-address.mdx * Fix style guide related issues --------- Co-authored-by: Yashovardhan Agrawal <21066442+yashovardhan@users.noreply.github.com>
1 parent 3008772 commit 492465f

89 files changed

Lines changed: 953 additions & 795 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎embedded-wallets/authentication/id-token.mdx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -67,20 +67,20 @@ If the **Return user data in identity token** setting is disabled on the dashboa
6767

6868
## Getting the ID Token
6969

70-
To retrieve the ID token on the client-side, use the `getIdentityToken()` method. This is typically called after the user logs in.
70+
To retrieve the ID token on the client-side, use the `getAuthTokenInfo()` method. This is typically called after the user logs in.
7171

7272
<Tabs>
7373
<TabItem value="React SDK">
7474

7575
```tsx
76-
import { useIdentityToken } from '@web3auth/modal/react'
76+
import { useAuthTokenInfo } from '@web3auth/modal/react'
7777

78-
function IdentityTokenButton() {
79-
const { getIdentityToken, loading, error, token } = useIdentityToken()
78+
function AuthTokenInfoButton() {
79+
const { getAuthTokenInfo, loading, error, token } = useAuthTokenInfo()
8080

8181
return (
8282
<div>
83-
<button onClick={() => getIdentityToken()} disabled={loading}>
83+
<button onClick={() => getAuthTokenInfo()} disabled={loading}>
8484
{loading ? 'Authenticating...' : 'Get Identity Token'}
8585
</button>
8686
{token && <div>Token: {token}</div>}
@@ -95,14 +95,14 @@ function IdentityTokenButton() {
9595

9696
```html
9797
<script setup lang="ts">
98-
import { useIdentityToken } from '@web3auth/modal/vue'
98+
import { useAuthTokenInfo } from '@web3auth/modal/vue'
9999
100-
const { getIdentityToken, loading, error, token } = useIdentityToken()
100+
const { getAuthTokenInfo, loading, error, token } = useAuthTokenInfo()
101101
</script>
102102

103103
<template>
104104
<div>
105-
<button @click="getIdentityToken" :disabled="loading">
105+
<button @click="getAuthTokenInfo" :disabled="loading">
106106
{{ loading ? "Authenticating..." : "Get Identity Token" }}
107107
</button>
108108
<div v-if="token">Token: {{ token }}</div>
@@ -116,7 +116,7 @@ function IdentityTokenButton() {
116116

117117
```tsx
118118
try {
119-
const idToken = await web3auth.getIdentityToken()
119+
const { idToken } = await web3auth.getAuthTokenInfo()
120120
console.log(idToken)
121121
} catch (error) {
122122
console.error('Error authenticating user:', error)
@@ -295,16 +295,17 @@ export async function POST(req: NextRequest) {
295295
<TabItem value="Frontend Call">
296296

297297
```ts title="App.tsx"
298-
import { useAccount } from '@web3auth/modal/react/wagmi'
299-
import { useIdentityToken, useWeb3Auth } from '@web3auth/modal/react'
298+
import { useConnection } from 'wagmi'
299+
import { useAuthTokenInfo, useWeb3Auth, useWeb3AuthConnect } from '@web3auth/modal/react'
300300

301-
const { token, getIdentityToken, loading: idTokenLoading, error: idTokenError } = useIdentityToken()
301+
const { token, getAuthTokenInfo, loading: idTokenLoading, error: idTokenError } = useAuthTokenInfo()
302302
const { connection } = useWeb3Auth()
303-
const { address } = useAccount()
303+
const { connectorName } = useWeb3AuthConnect()
304+
const { address } = useConnection()
304305

305306
const validateIdToken = async () => {
306307
//focus-next-line
307-
const idToken = await getIdentityToken()
308+
const idToken = await getAuthTokenInfo()
308309

309310
let res
310311
if (connectorName === 'auth') {

‎embedded-wallets/connect-blockchain/_initialize-web3auth-other-pnp.mdx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
Post v10 release, Web3Auth Web SDK does not need any additional setup on the code side for other
2-
chains: everything is handled on the dashboard.
1+
After v10, you don't need chain-specific setup in code for non-EVM chains.
2+
Configure standard EVM chains on the [Embedded Wallets dashboard](/embedded-wallets/dashboard/chains-and-networks/).
33

44
```tsx
55
import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal'
66

7-
const web3AuthOptions: Web3AuthOptions = {
7+
const web3auth = new Web3Auth({
88
clientId,
99
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
10-
}
10+
})
11+
12+
await web3auth.init()
13+
await web3auth.connect()
14+
15+
const web3authProvider = web3auth.connection?.ethereumProvider ?? null
1116
```
17+
18+
Non-EVM chains derive keys from `web3authProvider` using the `private_key` JSON-RPC method, as shown
19+
in the examples below.

‎embedded-wallets/connect-blockchain/evm/tron/web.mdx‎

Lines changed: 60 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -12,163 +12,95 @@ import TabItem from '@theme/TabItem'
1212

1313
## Overview
1414

15-
While using the Web3Auth Web SDK, you get an EIP1193-compatible provider, similar to the MetaMask provider. This provider can be used with libraries like TronWeb to make blockchain calls such as getting the user's account, fetching balances, signing transactions, sending transactions, etc. We have highlighted a few examples to get you started quickly.
16-
17-
---
15+
Tron uses a secp256k1 private key derived from the Embedded Wallets EVM provider. After sign-in,
16+
request the raw key with `connection.ethereumProvider.request({ method: 'private_key' })`, then pass
17+
it to [TronWeb](https://github.com/tronprotocol/tronweb) for account, balance, signing, and
18+
transaction calls.
1819

1920
## Installation
2021

21-
To interact with the Tron blockchain, you can use the Web3Auth provider and TronWeb.
22-
23-
### Install with npm
24-
25-
```bash
26-
npm install @web3auth/no-modal @web3auth/ethereum-provider @web3auth/auth-adapter @web3auth/wallet-services-plugin tronweb
22+
```bash npm2yarn
23+
npm install @web3auth/modal tronweb
2724
```
2825

29-
---
26+
## Initialize Embedded Wallets
3027

31-
## Getting the ChainConfig
32-
33-
For different Tron networks, you can use the appropriate chain configuration.
34-
35-
<Tabs defaultValue="testnet" groupId="chainConfig">
36-
<TabItem value="mainnet" label="Mainnet">
37-
```typescript
38-
const TRON_MAINNET = {
39-
chainNamespace: "eip155",
40-
chainId: "0x2b6653dc", // Tron Mainnet Chain ID
41-
rpcTarget: "https://api.trongrid.io",
42-
displayName: "TRON Mainnet",
43-
blockExplorerUrl: "https://tronscan.org",
44-
ticker: "TRX",
45-
tickerName: "TRON",
46-
logo: "https://cryptologos.cc/logos/tron-trx-logo.png",
47-
};
48-
```
49-
</TabItem>
50-
<TabItem value="testnet" label="Testnet (Shasta)">
51-
```typescript
52-
const TRON_SHASTA_TESTNET = {
53-
chainNamespace: "eip155",
54-
chainId: "0x94a9059e", // Tron Shasta Testnet Chain ID
55-
rpcTarget: "https://api.shasta.trongrid.io/jsonrpc",
56-
displayName: "TRON Shasta Testnet",
57-
blockExplorerUrl: "https://shasta.tronscan.org",
58-
ticker: "TRX",
59-
tickerName: "TRON",
60-
logo: "https://cryptologos.cc/logos/tron-trx-logo.png",
61-
};
62-
```
63-
</TabItem>
64-
</Tabs>
65-
66-
---
67-
68-
## Initializing and Instantiating the Web3Auth SDK
69-
70-
We will now initialize Web3Auth with the TRON configuration.
28+
Configure chains on the [Embedded Wallets dashboard](/embedded-wallets/dashboard/chains-and-networks/).
29+
For Tron Shasta testnet, use a dashboard chain with RPC `https://api.shasta.trongrid.io`.
7130

7231
```typescript
73-
import { Web3AuthNoModal } from '@web3auth/no-modal'
74-
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
75-
import { AuthAdapter } from '@web3auth/auth-adapter'
76-
import { TRON_SHASTA_TESTNET } from './chainConfig'
77-
import TronRpc from './tronRPC'
32+
import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal'
7833

79-
const clientId = 'YOUR_CLIENT_ID' // Replace with your Web3Auth client ID
80-
81-
const privateKeyProvider = new EthereumPrivateKeyProvider({
82-
config: { chainConfig: TRON_SHASTA_TESTNET },
34+
const web3auth = new Web3Auth({
35+
clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID,
36+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
8337
})
8438

85-
const web3auth = new Web3AuthNoModal({
86-
clientId, // Your Web3Auth Client ID
87-
chainConfig: TRON_SHASTA_TESTNET, // Using Tron Shasta Testnet
88-
privateKeyProvider,
89-
})
90-
91-
const authAdapter = new AuthAdapter({
92-
adapterSettings: {
93-
uxMode: 'redirect',
94-
},
95-
})
96-
web3auth.configureAdapter(authAdapter)
9739
await web3auth.init()
98-
```
99-
100-
---
101-
102-
## Getting the Web3Auth Provider
103-
104-
After initializing Web3Auth, the next step is to authenticate and retrieve the provider to interact with the Tron blockchain.
105-
106-
```typescript
10740
await web3auth.connect()
10841

109-
// Get the provider
11042
const provider = web3auth.connection?.ethereumProvider ?? null
111-
```
43+
if (!provider) throw new Error('Provider not available')
11244

113-
Once logged in, Web3Auth provides a JWT token and access to the Tron provider.
114-
115-
---
116-
117-
## Fetching user info
118-
119-
After logging in, you can retrieve information about the user.
120-
121-
```typescript
122-
const user = await web3auth.getUserInfo()
123-
console.log(user)
45+
const privateKey = (await provider.request({ method: 'private_key' })) as string
12446
```
12547

126-
---
127-
128-
## Get account and Balance
129-
130-
Once logged in, we can use `tronRpc.ts` to fetch the user's account and balance.
48+
## TronWeb helpers
13149

13250
```typescript
133-
// tronRpc.ts should be implemented as per previous example
134-
const tronRpc = new TronRpc(provider)
135-
await tronRpc.init()
136-
137-
// Get the user's Tron account address
138-
const accounts = await tronRpc.getAccounts()
139-
console.log('Account: ', accounts[0])
140-
141-
// Get the balance
142-
const balance = await tronRpc.getBalance()
143-
console.log('Balance: ', balance)
51+
import TronWeb from 'tronweb'
52+
53+
const RPC_URL = 'https://api.shasta.trongrid.io'
54+
55+
export async function getTronAccount(privateKey: string): Promise<string> {
56+
const tronWeb = new TronWeb({ fullHost: RPC_URL, privateKey })
57+
return tronWeb.address.fromPrivateKey(privateKey)
58+
}
59+
60+
export async function getTronBalance(privateKey: string): Promise<string> {
61+
const tronWeb = new TronWeb({ fullHost: RPC_URL, privateKey })
62+
const address = tronWeb.address.fromPrivateKey(privateKey)
63+
const balance = await tronWeb.trx.getBalance(address)
64+
return tronWeb.fromSun(balance)
65+
}
66+
67+
export async function signMessage(privateKey: string): Promise<string> {
68+
const tronWeb = new TronWeb({ fullHost: RPC_URL, privateKey })
69+
const message = 'Hello Web3Auth + TRON!'
70+
const hexMessage = tronWeb.toHex(message)
71+
return (await tronWeb.trx.sign(hexMessage)) as string
72+
}
14473
```
14574

146-
---
147-
148-
## Send transaction
149-
150-
You can send a transaction using the user's private key.
75+
## Get account and balance
15176

15277
```typescript
153-
const transaction = await tronRpc.sendTransaction()
154-
console.log('Transaction Hash: ', transaction)
78+
const address = await getTronAccount(privateKey)
79+
const balance = await getTronBalance(privateKey)
80+
console.log('Account:', address)
81+
console.log('Balance:', balance, 'TRX')
15582
```
15683

157-
This will send a transaction from the user's Tron account.
158-
159-
---
160-
161-
## Sign a Message
162-
163-
You can also sign a message using the private key of the logged-in user.
84+
## Sign and send a transaction
16485

16586
```typescript
166-
const signedMessage = await tronRpc.signMessage('Hello Tron!')
167-
console.log('Signed Message: ', signedMessage)
87+
const tronWeb = new TronWeb({ fullHost: RPC_URL, privateKey })
88+
const address = tronWeb.address.fromPrivateKey(privateKey)
89+
90+
const transaction = await tronWeb.transactionBuilder.sendTrx(address, 1_000_000, address)
91+
const signedTransaction = await tronWeb.trx.sign(transaction, privateKey)
92+
const result = await tronWeb.trx.sendRawTransaction(signedTransaction)
93+
console.log('Transaction result:', result)
16894
```
16995

170-
This will return the signature of the message.
96+
## React integration
97+
98+
In React, extract the private key once from `useWeb3Auth().connection?.ethereumProvider` in a
99+
`useEffect`, store it in state, and pass the string to the TronWeb helpers above. See the
100+
[Tron integration example on GitHub](https://github.com/Web3Auth/web3auth-examples/tree/main/other/tron-example) for a
101+
full `App.tsx` flow with `useWeb3AuthConnect` and `useWeb3AuthUser`.
171102

172-
## Conclusion
103+
## Next steps
173104

174-
With Web3Auth, you can easily integrate Tron blockchain capabilities into your application. By using the TronWeb library, you can perform various blockchain operations such as fetching accounts, sending transactions, signing messages, and interacting with smart contracts.
105+
- [JavaScript SDK get started](/embedded-wallets/sdk/js/)
106+
- [Connect any blockchain](/embedded-wallets/connect-blockchain/)

‎embedded-wallets/connect-blockchain/other/algorand.mdx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,13 @@ The SDKs are now branded as MetaMask Embedded Wallet SDKs (formerly Web3Auth Plu
2222
## Installation
2323

2424
```bash npm2yarn
25-
npm install --save algosdk
25+
npm install --save @web3auth/modal algosdk
2626
```
2727

28+
## Initialize Embedded Wallets
29+
30+
<InitializeWeb3Auth />
31+
2832
## Initializing provider
2933

3034
### Getting the `chainConfig`
@@ -74,7 +78,7 @@ Using the function, `web3auth.connection?.ethereumProvider?.request({ method: 'p
7478
Under the hood, it uses the `algosdk.secretKeyToMnemonic()` function, where we need to pass the `Buffer.from(privateKey, "hex")`, that is, the hexadecimal to Uint8Array converted private key. We get a mnemonic seed phrase that can be used to derive the key pair using the `algosdk.mnemonicToSecretKey()`, this returns a key pair. We can use the returned private key pair from this and use it on Algorand transactions.
7579

7680
```tsx
77-
import { IProvider } from '@web3auth/base'
81+
import { IProvider } from '@web3auth/modal'
7882
import algosdk from 'algosdk'
7983

8084
/*
@@ -95,7 +99,7 @@ const account = keyPair.addr
9599
## Get balance
96100

97101
```tsx
98-
import { IProvider } from '@web3auth/base'
102+
import { IProvider } from '@web3auth/modal'
99103
import algosdk from 'algosdk'
100104

101105
/*
@@ -125,7 +129,7 @@ const balance = await client.accountInformation(keyPair.addr).do()
125129
## Send transaction
126130

127131
```tsx
128-
import { IProvider } from '@web3auth/base'
132+
import { IProvider } from '@web3auth/modal'
129133
import algosdk from 'algosdk'
130134

131135
/*
@@ -175,7 +179,7 @@ const txHash = await client.sendRawTransaction(signedTxn.blob).do()
175179
## Sign a message
176180

177181
```tsx
178-
import { IProvider } from '@web3auth/base'
182+
import { IProvider } from '@web3auth/modal'
179183
import algosdk from 'algosdk'
180184

181185
/*

‎embedded-wallets/connect-blockchain/other/aptos.mdx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,13 @@ const aptos = new Aptos(config)
5050
To begin, install the Aptos SDK:
5151

5252
```bash npm2yarn
53-
npm install --save @aptos-labs/ts-sdk
53+
npm install --save @web3auth/modal @aptos-labs/ts-sdk
5454
```
5555

56+
## Initialize Embedded Wallets
57+
58+
<InitializeWeb3Auth />
59+
5660
## Initializing provider
5761

5862
### Getting the `chainConfig`

0 commit comments

Comments
 (0)