Skip to content

Commit 0f1c77a

Browse files
yashovardhanyashovardhan
committed
Update examples for v11
1 parent 3921b7f commit 0f1c77a

59 files changed

Lines changed: 375 additions & 430 deletions

Some content is hidden

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

‎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+
Post v10 release, Web3Auth Web SDK does not 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 example](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`

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,13 @@ The SDKs are now branded as MetaMask Embedded Wallet SDKs (formerly Web3Auth Plu
3434
## Installation
3535

3636
```bash npm2yarn
37-
npm install --save bitcoinjs-lib ecpair axios
37+
npm install --save @web3auth/modal bitcoinjs-lib ecpair axios
3838
```
3939

40+
## Initialize Embedded Wallets
41+
42+
<InitializeWeb3Auth />
43+
4044
## Initializing provider
4145

4246
### Getting the `chainConfig`
@@ -84,7 +88,7 @@ Once a user logs in, the Embedded Wallets SDK returns a provider. Since there is
8488
Using the function, `web3auth.connection?.ethereumProvider?.request({ method: 'private_key' })` from Web3Auth provider, the application can have access to the user's private key. This private key can be used to derive the Bitcoin KeyPair using the `bitcoinjs-lib` library.
8589

8690
```tsx
87-
import { IProvider } from '@web3auth/base'
91+
import { IProvider } from '@web3auth/modal'
8892
import ecc from '@bitcoinerlab/secp256k1'
8993
import ECPairFactory from 'ecpair'
9094
import { Psbt, networks, payments, crypto, initEccLib } from 'bitcoinjs-lib'

‎embedded-wallets/connect-blockchain/other/cosmos.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 @web3auth/no-modal @web3auth/auth-adapter @web3auth/base @cosmjs/stargate @cosmjs/proto-signing
25+
npm install --save @web3auth/modal @cosmjs/stargate @cosmjs/proto-signing
2626
```
2727

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

3034
### Getting the `chainConfig`
@@ -78,7 +82,7 @@ Once a user logs in, the Embedded Wallets SDK returns a provider. Since there is
7882
In order to get the ChainId, we connect to the RPC using StargateClient and make a call using the Cosmos RPC client to get the chainId. You can get the private key using `this.provider.request({method: "private_key",})`.
7983

8084
```tsx
81-
import type { IProvider } from '@web3auth/base'
85+
import type { IProvider } from '@web3auth/modal'
8286
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
8387
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'
8488

@@ -120,7 +124,7 @@ export default class CosmosRPC {
120124
Using `DirectSecp256k1Wallet.fromKey()` we can get the accounts via the private key we get through the provider.
121125

122126
```tsx
123-
import type { IProvider } from '@web3auth/base'
127+
import type { IProvider } from '@web3auth/modal'
124128
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
125129
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'
126130

@@ -149,7 +153,7 @@ export default class CosmosRPC {
149153
Using the account address we received in the previous step, we can fetch the balance using an RPC call to `client.getAllBalances(address)`.
150154

151155
```tsx
152-
import type { IProvider } from '@web3auth/base'
156+
import type { IProvider } from '@web3auth/modal'
153157
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
154158
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'
155159

@@ -180,7 +184,7 @@ export default class CosmosRPC {
180184
## Send transaction
181185

182186
```tsx
183-
import type { IProvider } from '@web3auth/base'
187+
import type { IProvider } from '@web3auth/modal'
184188
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
185189
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'
186190

0 commit comments

Comments
 (0)