|
| 1 | +--- |
| 2 | +title: Integrate Web3Auth with the Sui Blockchain |
| 3 | +sidebar_label: Sui |
| 4 | +image: "guides/banners/sui.png" |
| 5 | +displayed_sidebar: docs |
| 6 | +keywords: [sui, web3auth, authentication, blockchain] |
| 7 | +description: "Integrate Web3Auth with the Sui Blockchain | Documentation - Web3Auth" |
| 8 | +--- |
| 9 | + |
| 10 | +import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx"; |
| 11 | +import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa-tkey.mdx"; |
| 12 | + |
| 13 | +While using the Web3Auth Web SDK for a non-EVM chain like [Sui](https://sui.io/) you get a standard provider from which you can get the private key of |
| 14 | +the user. Using this private key, you can use the corresponding libraries of the blockchain to make blockchain calls like getting the user's public |
| 15 | +`signing key`, fetching `balance`, and `sign & send transaction`. We have highlighted a few methods here to get you started quickly on that. |
| 16 | + |
| 17 | +## Installation |
| 18 | + |
| 19 | +For Sui, we will use the [@mysten/sui.js](https://www.npmjs.com/package/@mysten/sui.js) library to create the Sui address, query the chain and submit |
| 20 | +transactions. |
| 21 | + |
| 22 | +```bash npm2yarn |
| 23 | +npm install --save @mysten/sui.js |
| 24 | +``` |
| 25 | + |
| 26 | +## Initializing Provider |
| 27 | + |
| 28 | +### Getting the `chainConfig` |
| 29 | + |
| 30 | +<Tabs |
| 31 | + groupId="chain" |
| 32 | + defaultValue="mainnet" |
| 33 | + values={[ |
| 34 | + { label: "Mainnet", value: "mainnet", }, |
| 35 | + { label: "Devnet", value: "devnet", } |
| 36 | + ]} |
| 37 | +> |
| 38 | +<TabItem |
| 39 | + value="mainnet" |
| 40 | +> |
| 41 | + |
| 42 | +```typescript |
| 43 | +const chainConfig = { |
| 44 | + chainNamespace: CHAIN_NAMESPACES.OTHER, |
| 45 | + chainId: "35834a8a", |
| 46 | + rpcTarget: "https://fullnode.mainnet.sui.io:443", |
| 47 | + displayName: "Sui Mainnet", |
| 48 | + blockExplorerUrl: "https://suiexplorer.com/", |
| 49 | + ticker: "SUI", |
| 50 | + tickerName: "Sui", |
| 51 | + logo: "https://cryptologos.cc/logos/sui-sui-logo.png?v=029", |
| 52 | +}; |
| 53 | +``` |
| 54 | + |
| 55 | +</TabItem> |
| 56 | + |
| 57 | +<TabItem value="devnet"> |
| 58 | + |
| 59 | +```typescript |
| 60 | +const chainConfig = { |
| 61 | + chainNamespace: CHAIN_NAMESPACES.OTHER, |
| 62 | + chainId: "fd2adfa8", |
| 63 | + rpcTarget: "https://fullnode.devnet.sui.io:443", |
| 64 | + displayName: "Sui Devnet", |
| 65 | + blockExplorerUrl: "https://suiexplorer.com/?network=devnet", |
| 66 | + ticker: "SUI", |
| 67 | + tickerName: "Sui", |
| 68 | + logo: "https://cryptologos.cc/logos/sui-sui-logo.png?v=029", |
| 69 | +}; |
| 70 | +``` |
| 71 | + |
| 72 | +</TabItem> |
| 73 | +</Tabs> |
| 74 | + |
| 75 | +### Initializing and instantiating the Web3Auth SDK |
| 76 | + |
| 77 | +<InitializeWeb3Auth /> |
| 78 | + |
| 79 | +## Get User Info |
| 80 | + |
| 81 | +<GetUserInfoSnippet /> |
| 82 | + |
| 83 | +## Get Account and KeyPair |
| 84 | + |
| 85 | +Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native provider for Sui, we need to directly use the private |
| 86 | +key to create account. |
| 87 | + |
| 88 | +Using the function, `web3auth.provider.request({method: "private_key"})` from Web3Auth provider, the application can have access to the user's private |
| 89 | +key. However, Web3Auth does not provide direct access to Sui specific signing functions, hence, we create a new `Ed25519Keypair` to give SDK the |
| 90 | +ability to sign transactions with this key pair. |
| 91 | + |
| 92 | +```tsx |
| 93 | +import { Ed25519Keypair } from "@mysten/sui.js/keypairs/ed25519"; |
| 94 | + |
| 95 | +// web3authProvider is web3auth.provider from above |
| 96 | +const privateKey = await web3authProvider.request({ method: "private_key" }); |
| 97 | + |
| 98 | +// Create a Uint8Arrray from private key which is in hex format |
| 99 | +const privateKeyUint8Array = new Uint8Array(privateKey.match(/.{1,2}/g)!.map((byte: any) => parseInt(byte, 16))); |
| 100 | + |
| 101 | +// Create an instance of the Sui local key pair manager |
| 102 | +const keyPair = Ed25519Keypair.fromSecretKey(privateKeyUint8Array); |
| 103 | + |
| 104 | +const address = keyPair.toSuiAddress(); |
| 105 | +console.log(`Sui account: ${address}`); |
| 106 | +``` |
| 107 | + |
| 108 | +## Get Balance |
| 109 | + |
| 110 | +```tsx |
| 111 | +import { CoinBalance, getFullnodeUrl, SuiClient } from '@mysten/sui.js/client'; |
| 112 | +import { MIST_PER_SUI } from '@mysten/sui.js/utils'; |
| 113 | + |
| 114 | +// Use the getFullnodeUrl from SDK to get the RPC detils for the Sui network. |
| 115 | +const rpcUrl = getFullnodeUrl('devnet'); |
| 116 | +const suiClient = new SuiClient({ url: this.rpcUrl }); |
| 117 | + |
| 118 | +// Use code from the above to retrive address here. |
| 119 | +const balanceResponse = await this.suiClient.getBalance({owner: address}); |
| 120 | +const suiBalance = balance(balanceResponse); |
| 121 | +console.log(`Sui Balance: ${suiBalance}`); |
| 122 | + |
| 123 | + |
| 124 | +// Convert MIST to Sui |
| 125 | +private balance = (balance: CoinBalance) => { |
| 126 | + return Number.parseInt(balance.totalBalance) / Number(MIST_PER_SUI); |
| 127 | +} |
| 128 | +``` |
| 129 | + |
| 130 | +## Send Transaction |
| 131 | + |
| 132 | +```tsx |
| 133 | +import { TransactionBlock } from "@mysten/sui.js/transactions"; |
| 134 | +import { MIST_PER_SUI } from "@mysten/sui.js/utils"; |
| 135 | + |
| 136 | +// Use code from the above Initializing SuiClient and Ed25519Keypair here |
| 137 | + |
| 138 | +const tx = new TransactionBlock(); |
| 139 | + |
| 140 | +// Convert value to be transferred to smallest value. |
| 141 | +const [coin] = tx.splitCoins(tx.gas, [tx.pure(0.2 * Number(MIST_PER_SUI))]); |
| 142 | +tx.transferObjects([coin], tx.pure("0x7d42ef777fa6e46a7b19d54dc9353c898e7f1c65a3abab8b73f92fe5efe6d96d")); |
| 143 | + |
| 144 | +const result = await this.suiClient.signAndExecuteTransactionBlock({ signer: keyPair, transactionBlock: tx }); |
| 145 | +const transactionHash = result.digest; |
| 146 | +console.log(`Transaction hash: ${transactionHash}`); |
| 147 | +``` |
0 commit comments