diff --git a/docs/connect-blockchain/other/other.mdx b/docs/connect-blockchain/other/other.mdx index 41600e46d..4dd08ac7f 100644 --- a/docs/connect-blockchain/other/other.mdx +++ b/docs/connect-blockchain/other/other.mdx @@ -111,6 +111,12 @@ export const OtherChains = [ icon: "logo-tezos.png", path: "/connect-blockchain/other/tezos", }, + { + key: "sui", + title: "Sui", + icon: "logo-sui.png", + path: "/connect-blockchain/other/tezos", + }, ], }, ]; diff --git a/docs/connect-blockchain/other/sui.mdx b/docs/connect-blockchain/other/sui.mdx new file mode 100644 index 000000000..7b82c3bb3 --- /dev/null +++ b/docs/connect-blockchain/other/sui.mdx @@ -0,0 +1,147 @@ +--- +title: Integrate Web3Auth with the Sui Blockchain +sidebar_label: Sui +image: "guides/banners/sui.png" +displayed_sidebar: docs +keywords: [sui, web3auth, authentication, blockchain] +description: "Integrate Web3Auth with the Sui Blockchain | Documentation - Web3Auth" +--- + +import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx"; +import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa-tkey.mdx"; + +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 +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 +`signing key`, fetching `balance`, and `sign & send transaction`. We have highlighted a few methods here to get you started quickly on that. + +## Installation + +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 +transactions. + +```bash npm2yarn +npm install --save @mysten/sui.js +``` + +## Initializing Provider + +### Getting the `chainConfig` + + + + +```typescript +const chainConfig = { + chainNamespace: CHAIN_NAMESPACES.OTHER, + chainId: "35834a8a", + rpcTarget: "https://fullnode.mainnet.sui.io:443", + displayName: "Sui Mainnet", + blockExplorerUrl: "https://suiexplorer.com/", + ticker: "SUI", + tickerName: "Sui", + logo: "https://cryptologos.cc/logos/sui-sui-logo.png?v=029", +}; +``` + + + + + +```typescript +const chainConfig = { + chainNamespace: CHAIN_NAMESPACES.OTHER, + chainId: "fd2adfa8", + rpcTarget: "https://fullnode.devnet.sui.io:443", + displayName: "Sui Devnet", + blockExplorerUrl: "https://suiexplorer.com/?network=devnet", + ticker: "SUI", + tickerName: "Sui", + logo: "https://cryptologos.cc/logos/sui-sui-logo.png?v=029", +}; +``` + + + + +### Initializing and instantiating the Web3Auth SDK + + + +## Get User Info + + + +## Get Account and KeyPair + +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 +key to create account. + +Using the function, `web3auth.provider.request({method: "private_key"})` from Web3Auth provider, the application can have access to the user's private +key. However, Web3Auth does not provide direct access to Sui specific signing functions, hence, we create a new `Ed25519Keypair` to give SDK the +ability to sign transactions with this key pair. + +```tsx +import { Ed25519Keypair } from "@mysten/sui.js/keypairs/ed25519"; + +// web3authProvider is web3auth.provider from above +const privateKey = await web3authProvider.request({ method: "private_key" }); + +// Create a Uint8Arrray from private key which is in hex format +const privateKeyUint8Array = new Uint8Array(privateKey.match(/.{1,2}/g)!.map((byte: any) => parseInt(byte, 16))); + +// Create an instance of the Sui local key pair manager +const keyPair = Ed25519Keypair.fromSecretKey(privateKeyUint8Array); + +const address = keyPair.toSuiAddress(); +console.log(`Sui account: ${address}`); +``` + +## Get Balance + +```tsx +import { CoinBalance, getFullnodeUrl, SuiClient } from '@mysten/sui.js/client'; +import { MIST_PER_SUI } from '@mysten/sui.js/utils'; + +// Use the getFullnodeUrl from SDK to get the RPC detils for the Sui network. +const rpcUrl = getFullnodeUrl('devnet'); +const suiClient = new SuiClient({ url: this.rpcUrl }); + +// Use code from the above to retrive address here. +const balanceResponse = await this.suiClient.getBalance({owner: address}); +const suiBalance = balance(balanceResponse); +console.log(`Sui Balance: ${suiBalance}`); + + +// Convert MIST to Sui +private balance = (balance: CoinBalance) => { + return Number.parseInt(balance.totalBalance) / Number(MIST_PER_SUI); +} +``` + +## Send Transaction + +```tsx +import { TransactionBlock } from "@mysten/sui.js/transactions"; +import { MIST_PER_SUI } from "@mysten/sui.js/utils"; + +// Use code from the above Initializing SuiClient and Ed25519Keypair here + +const tx = new TransactionBlock(); + +// Convert value to be transferred to smallest value. +const [coin] = tx.splitCoins(tx.gas, [tx.pure(0.2 * Number(MIST_PER_SUI))]); +tx.transferObjects([coin], tx.pure("0x7d42ef777fa6e46a7b19d54dc9353c898e7f1c65a3abab8b73f92fe5efe6d96d")); + +const result = await this.suiClient.signAndExecuteTransactionBlock({ signer: keyPair, transactionBlock: tx }); +const transactionHash = result.digest; +console.log(`Transaction hash: ${transactionHash}`); +``` diff --git a/sidebars.ts b/sidebars.ts index 5b1c44d42..a230eaf7d 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -484,6 +484,7 @@ const sidebars: SidebarsConfig = { "connect-blockchain/other/starkex", "connect-blockchain/other/starknet", "connect-blockchain/other/tezos", + "connect-blockchain/other/sui", ], collapsible: true, collapsed: false, diff --git a/static/guides/banners/sui.png b/static/guides/banners/sui.png new file mode 100644 index 000000000..8f3bd0a50 Binary files /dev/null and b/static/guides/banners/sui.png differ diff --git a/static/guides/logo-sui.png b/static/guides/logo-sui.png new file mode 100644 index 000000000..974db57ee Binary files /dev/null and b/static/guides/logo-sui.png differ