diff --git a/.vscode/settings.json b/.vscode/settings.json index a8c1c4582..401ab2df2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -61,5 +61,8 @@ }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" } } diff --git a/docs/README.mdx b/docs/README.mdx index 20f1fbb72..25870cddb 100644 --- a/docs/README.mdx +++ b/docs/README.mdx @@ -3,7 +3,7 @@ title: Introduction slug: / hide_table_of_contents: true hide_title: true - +sidebar_label: Introduction image: "images/docs-meta-cards/documentation-card.png" description: "Introduction | Documentation - Web3Auth" --- diff --git a/docs/connect-blockchain/connect-blockchain.mdx b/docs/connect-blockchain/connect-blockchain.mdx index 86a03623a..12cf8bc3d 100644 --- a/docs/connect-blockchain/connect-blockchain.mdx +++ b/docs/connect-blockchain/connect-blockchain.mdx @@ -42,9 +42,9 @@ transactions, smart contract wallets, different elliptic curve pairs and even RS ## Private Key Providers (PnP & SFA) The Private Key Providers work with the majority of Web3Auth products, including Plug and Play SDKs -and Single Factor Auth SDKs. As the name suggests these providers are a wrapper around the user's -private key, which is dynamically reconstructed with Shamir's Secret Sharing and is present in the -user's frontend. +and Single Factor Auth Mobile SDKs. As the name suggests these providers are a wrapper around the +user's private key, which is dynamically reconstructed with Shamir's Secret Sharing and is present +in the user's frontend. Once the authentication happens, the returned result from the Web3Auth network is taken up by the provider to give a common interface to interact with the blockchain of your choice. Currently, diff --git a/docs/connect-blockchain/evm/5ire/5ire.mdx b/docs/connect-blockchain/evm/5ire/5ire.mdx index e3afb4054..a1b82bf13 100644 --- a/docs/connect-blockchain/evm/5ire/5ire.mdx +++ b/docs/connect-blockchain/evm/5ire/5ire.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the 5ire Blockchain +sidebar_label: 5ire hide_table_of_contents: true image: "banners/5ire.png" diff --git a/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx b/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx index 965b8f326..06499f536 100644 --- a/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx +++ b/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Aleph Zero Blockchain +sidebar_label: Aleph Zero hide_table_of_contents: true image: "banners/aleph-zero.png" diff --git a/docs/connect-blockchain/evm/ancient8/ancient8.mdx b/docs/connect-blockchain/evm/ancient8/ancient8.mdx index 4b465fbc8..6bdd505bc 100644 --- a/docs/connect-blockchain/evm/ancient8/ancient8.mdx +++ b/docs/connect-blockchain/evm/ancient8/ancient8.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Ancient8 Blockchain +sidebar_label: Ancient8 hide_table_of_contents: true image: "banners/ancient8.png" diff --git a/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx b/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx index 65639622a..a7820066d 100644 --- a/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx +++ b/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Arbitrum Blockchain +sidebar_label: Arbitrum hide_table_of_contents: true image: "banners/arbitrum.png" diff --git a/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx b/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx index fa7f8dacb..a4a5980f5 100644 --- a/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx +++ b/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Astar zkEVM Blockchain +sidebar_label: Astar zkEVM hide_table_of_contents: true image: "banners/zkevm.png" diff --git a/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx b/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx index 10ee94120..f449d1825 100644 --- a/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx +++ b/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Astar zKyoto Testnet +sidebar_label: Astar zKyoto hide_table_of_contents: true image: "banners/zkevm.png" diff --git a/docs/connect-blockchain/evm/avalanche/avalanche.mdx b/docs/connect-blockchain/evm/avalanche/avalanche.mdx index fac613ac7..e13c59240 100644 --- a/docs/connect-blockchain/evm/avalanche/avalanche.mdx +++ b/docs/connect-blockchain/evm/avalanche/avalanche.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Avalanche (C-Chain) Blockchain +sidebar_label: Avalanche hide_table_of_contents: true image: "banners/avalanche.png" diff --git a/docs/connect-blockchain/evm/base/base.mdx b/docs/connect-blockchain/evm/base/base.mdx index f0ca36777..a6b5f20eb 100644 --- a/docs/connect-blockchain/evm/base/base.mdx +++ b/docs/connect-blockchain/evm/base/base.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Base Chain (Coinbase) Blockchain +sidebar_label: Base hide_table_of_contents: true image: "banners/base.png" diff --git a/docs/connect-blockchain/evm/bitkub/bitkub.mdx b/docs/connect-blockchain/evm/bitkub/bitkub.mdx index 31855cfb9..fc3dbb517 100644 --- a/docs/connect-blockchain/evm/bitkub/bitkub.mdx +++ b/docs/connect-blockchain/evm/bitkub/bitkub.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the BitKub Blockchain +sidebar_label: BitKub hide_table_of_contents: true image: "banners/bitkub.png" description: "Integrate Web3Auth with the BitKub Blockchain | Documentation - Web3Auth" diff --git a/docs/connect-blockchain/evm/bnb/bnb.mdx b/docs/connect-blockchain/evm/bnb/bnb.mdx index 015fccec4..6d541fb66 100644 --- a/docs/connect-blockchain/evm/bnb/bnb.mdx +++ b/docs/connect-blockchain/evm/bnb/bnb.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the BNB Blockchain +sidebar_label: BNB hide_table_of_contents: true image: "banners/bnb.png" diff --git a/docs/connect-blockchain/evm/celo/celo.mdx b/docs/connect-blockchain/evm/celo/celo.mdx index e26d7dd1d..25c65c6cb 100644 --- a/docs/connect-blockchain/evm/celo/celo.mdx +++ b/docs/connect-blockchain/evm/celo/celo.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Celo Blockchain +sidebar_label: Celo hide_table_of_contents: true image: "banners/celo.png" diff --git a/docs/connect-blockchain/evm/chiliz/chiliz.mdx b/docs/connect-blockchain/evm/chiliz/chiliz.mdx index dbcd53982..642820ae0 100644 --- a/docs/connect-blockchain/evm/chiliz/chiliz.mdx +++ b/docs/connect-blockchain/evm/chiliz/chiliz.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Chiliz Blockchain +sidebar_label: Chiliz hide_table_of_contents: true image: "banners/chiliz.png" diff --git a/docs/connect-blockchain/evm/cronos/cronos.mdx b/docs/connect-blockchain/evm/cronos/cronos.mdx index f7609bf41..2c64fdc0d 100644 --- a/docs/connect-blockchain/evm/cronos/cronos.mdx +++ b/docs/connect-blockchain/evm/cronos/cronos.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Cronos Blockchain +sidebar_label: Cronos hide_table_of_contents: true image: "banners/cronos.png" diff --git a/docs/connect-blockchain/evm/ethereum/ethereum.mdx b/docs/connect-blockchain/evm/ethereum/ethereum.mdx index d58e927af..16e4d4faf 100644 --- a/docs/connect-blockchain/evm/ethereum/ethereum.mdx +++ b/docs/connect-blockchain/evm/ethereum/ethereum.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Ethereum Blockchain +sidebar_label: Ethereum hide_table_of_contents: true keywords: [ diff --git a/docs/connect-blockchain/evm/evm.mdx b/docs/connect-blockchain/evm/evm.mdx index e463a1813..05811b46b 100644 --- a/docs/connect-blockchain/evm/evm.mdx +++ b/docs/connect-blockchain/evm/evm.mdx @@ -1,7 +1,7 @@ --- title: Integrate Web3Auth with EVM Compatible Chains hide_table_of_contents: true - +sidebar_label: EVM Integration image: "banners/ethereum.png" description: "Integrate Web3Auth with EVM Compatible Chains | Documentation - Web3Auth" --- diff --git a/docs/connect-blockchain/evm/fhenix/fhenix.mdx b/docs/connect-blockchain/evm/fhenix/fhenix.mdx index ed4bc2254..6a355cc8d 100644 --- a/docs/connect-blockchain/evm/fhenix/fhenix.mdx +++ b/docs/connect-blockchain/evm/fhenix/fhenix.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Fhenix Blockchain +sidebar_label: Fhenix hide_table_of_contents: true image: "banners/fhenix.png" diff --git a/docs/connect-blockchain/evm/flare/flare.mdx b/docs/connect-blockchain/evm/flare/flare.mdx index 7233d41d4..e49fdec6f 100644 --- a/docs/connect-blockchain/evm/flare/flare.mdx +++ b/docs/connect-blockchain/evm/flare/flare.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Flare Blockchain +sidebar_label: Flare hide_table_of_contents: true image: "banners/flare.png" diff --git a/docs/connect-blockchain/evm/flow/flow.mdx b/docs/connect-blockchain/evm/flow/flow.mdx index 81fef8e14..ad839e6e5 100644 --- a/docs/connect-blockchain/evm/flow/flow.mdx +++ b/docs/connect-blockchain/evm/flow/flow.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Flow Blockchain +sidebar_label: Flow hide_table_of_contents: true image: "banners/flow.png" description: "Integrate Web3Auth with the Flow Blockchain | Documentation - Web3Auth" diff --git a/docs/connect-blockchain/evm/harmony/harmony.mdx b/docs/connect-blockchain/evm/harmony/harmony.mdx index 1b5725864..f751431fa 100644 --- a/docs/connect-blockchain/evm/harmony/harmony.mdx +++ b/docs/connect-blockchain/evm/harmony/harmony.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Harmony Blockchain +sidebar_label: Harmony hide_table_of_contents: true image: "banners/harmony.png" diff --git a/docs/connect-blockchain/evm/hedera/hedera.mdx b/docs/connect-blockchain/evm/hedera/hedera.mdx index a535a0220..eda0a5e18 100644 --- a/docs/connect-blockchain/evm/hedera/hedera.mdx +++ b/docs/connect-blockchain/evm/hedera/hedera.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Hedera Blockchain +sidebar_label: Hedera hide_table_of_contents: true image: "banners/hedera.png" diff --git a/docs/connect-blockchain/evm/kinto/kinto.mdx b/docs/connect-blockchain/evm/kinto/kinto.mdx index 7cf7e8e63..7fad35c57 100644 --- a/docs/connect-blockchain/evm/kinto/kinto.mdx +++ b/docs/connect-blockchain/evm/kinto/kinto.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Kinto Blockchain +sidebar_label: Kinto hide_table_of_contents: true image: "banners/kinto.png" diff --git a/docs/connect-blockchain/evm/klaytn/klaytn.mdx b/docs/connect-blockchain/evm/klaytn/klaytn.mdx index 693c57690..58238fce5 100644 --- a/docs/connect-blockchain/evm/klaytn/klaytn.mdx +++ b/docs/connect-blockchain/evm/klaytn/klaytn.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Klaytn Blockchain +sidebar_label: Klaytn hide_table_of_contents: true image: "banners/klaytn.png" diff --git a/docs/connect-blockchain/evm/linea/linea.mdx b/docs/connect-blockchain/evm/linea/linea.mdx index 1563ff582..1013885ab 100644 --- a/docs/connect-blockchain/evm/linea/linea.mdx +++ b/docs/connect-blockchain/evm/linea/linea.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Linea Blockchain +sidebar_label: Linea hide_table_of_contents: true image: "banners/linea.png" description: "Integrate Web3Auth with the Linea Blockchain | Documentation - Web3Auth" diff --git a/docs/connect-blockchain/evm/manta/manta.mdx b/docs/connect-blockchain/evm/manta/manta.mdx index 56f32ff79..79ed5adbe 100644 --- a/docs/connect-blockchain/evm/manta/manta.mdx +++ b/docs/connect-blockchain/evm/manta/manta.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Manta Blockchain +sidebar_label: Manta hide_table_of_contents: true image: "banners/manta.png" diff --git a/docs/connect-blockchain/evm/metis/metis.mdx b/docs/connect-blockchain/evm/metis/metis.mdx index 9ffa19c2b..566be9202 100644 --- a/docs/connect-blockchain/evm/metis/metis.mdx +++ b/docs/connect-blockchain/evm/metis/metis.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Metis Blockchain +sidebar_label: Metis hide_table_of_contents: true image: "banners/metis.png" diff --git a/docs/connect-blockchain/evm/mint/mint.mdx b/docs/connect-blockchain/evm/mint/mint.mdx index 9f06fd3e7..c21ea05df 100644 --- a/docs/connect-blockchain/evm/mint/mint.mdx +++ b/docs/connect-blockchain/evm/mint/mint.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Mint Blockchain +sidebar_label: Mint hide_table_of_contents: true image: "banners/mint.png" diff --git a/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx b/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx index 7e4c043e2..7ff494b8e 100644 --- a/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx +++ b/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Moonbeam Blockchain +sidebar_label: Moonbeam hide_table_of_contents: true image: "banners/moonbeam.png" diff --git a/docs/connect-blockchain/evm/moonriver/moonriver.mdx b/docs/connect-blockchain/evm/moonriver/moonriver.mdx index 680da60f5..c2d504b25 100644 --- a/docs/connect-blockchain/evm/moonriver/moonriver.mdx +++ b/docs/connect-blockchain/evm/moonriver/moonriver.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Moonriver Blockchain +sidebar_label: Moonriver hide_table_of_contents: true image: "banners/moonriver.png" diff --git a/docs/connect-blockchain/evm/morph/morph.mdx b/docs/connect-blockchain/evm/morph/morph.mdx index 5367cbdfc..d282d5374 100644 --- a/docs/connect-blockchain/evm/morph/morph.mdx +++ b/docs/connect-blockchain/evm/morph/morph.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Morph Blockchain +sidebar_label: Morph hide_table_of_contents: true image: "banners/morph.png" diff --git a/docs/connect-blockchain/evm/neon/neon.mdx b/docs/connect-blockchain/evm/neon/neon.mdx index d07b0cbb4..0a5b5bc3c 100644 --- a/docs/connect-blockchain/evm/neon/neon.mdx +++ b/docs/connect-blockchain/evm/neon/neon.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Neon Blockchain +sidebar_label: Neon hide_table_of_contents: true image: "banners/neon.png" diff --git a/docs/connect-blockchain/evm/nibiru/nibiru.mdx b/docs/connect-blockchain/evm/nibiru/nibiru.mdx index 7e549a2a6..b6101a6f8 100644 --- a/docs/connect-blockchain/evm/nibiru/nibiru.mdx +++ b/docs/connect-blockchain/evm/nibiru/nibiru.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Nibiru Blockchain +sidebar_label: Nibiru hide_table_of_contents: true image: "banners/nibiru.png" diff --git a/docs/connect-blockchain/evm/opbnb/opbnb.mdx b/docs/connect-blockchain/evm/opbnb/opbnb.mdx index c278b1404..173836f42 100644 --- a/docs/connect-blockchain/evm/opbnb/opbnb.mdx +++ b/docs/connect-blockchain/evm/opbnb/opbnb.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the BNB Optimistic Rolllup +sidebar_label: opBNB hide_table_of_contents: true image: "banners/opbnb.png" diff --git a/docs/connect-blockchain/evm/optimism/optimism.mdx b/docs/connect-blockchain/evm/optimism/optimism.mdx index 02529ddab..24cd3a1bb 100644 --- a/docs/connect-blockchain/evm/optimism/optimism.mdx +++ b/docs/connect-blockchain/evm/optimism/optimism.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Optimism Blockchain +sidebar_label: Optimism hide_table_of_contents: true image: "banners/optimism.png" diff --git a/docs/connect-blockchain/evm/polygon/polygon.mdx b/docs/connect-blockchain/evm/polygon/polygon.mdx index 96db72cbf..db1c7f2ff 100644 --- a/docs/connect-blockchain/evm/polygon/polygon.mdx +++ b/docs/connect-blockchain/evm/polygon/polygon.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Polygon Blockchain +sidebar_label: Polygon hide_table_of_contents: true image: "banners/polygon.png" diff --git a/docs/connect-blockchain/evm/rootstock/rootstock.mdx b/docs/connect-blockchain/evm/rootstock/rootstock.mdx index a237b6400..dcfb7cdae 100644 --- a/docs/connect-blockchain/evm/rootstock/rootstock.mdx +++ b/docs/connect-blockchain/evm/rootstock/rootstock.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Rootstock Blockchain +sidebar_label: Rootstock hide_table_of_contents: true image: "banners/rootstock.png" diff --git a/docs/connect-blockchain/evm/saakuru/saakuru.mdx b/docs/connect-blockchain/evm/saakuru/saakuru.mdx index 25e1ea413..6452788a6 100644 --- a/docs/connect-blockchain/evm/saakuru/saakuru.mdx +++ b/docs/connect-blockchain/evm/saakuru/saakuru.mdx @@ -1,7 +1,7 @@ --- title: Integrate Web3Auth with the Saakuru Blockchain hide_table_of_contents: true - +sidebar_label: Saakuru image: "banners/saakuru.png" description: "Integrate Web3Auth with the Saakuru Blockchain | Documentation - Web3Auth" --- diff --git a/docs/connect-blockchain/evm/shardeum/shardeum.mdx b/docs/connect-blockchain/evm/shardeum/shardeum.mdx index ff6ee1490..d8a00712c 100644 --- a/docs/connect-blockchain/evm/shardeum/shardeum.mdx +++ b/docs/connect-blockchain/evm/shardeum/shardeum.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Shardeum Blockchain +sidebar_label: Shardeum hide_table_of_contents: true image: "banners/shardeum.png" diff --git a/docs/connect-blockchain/evm/skale/skale.mdx b/docs/connect-blockchain/evm/skale/skale.mdx index 76a08d2be..3c653f236 100644 --- a/docs/connect-blockchain/evm/skale/skale.mdx +++ b/docs/connect-blockchain/evm/skale/skale.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Skale Blockchain +sidebar_label: Skale hide_table_of_contents: true image: "banners/skale.png" diff --git a/docs/connect-blockchain/evm/soneium/soneium.mdx b/docs/connect-blockchain/evm/soneium/soneium.mdx index 69ea8a4f2..204ea1c07 100644 --- a/docs/connect-blockchain/evm/soneium/soneium.mdx +++ b/docs/connect-blockchain/evm/soneium/soneium.mdx @@ -1,7 +1,7 @@ --- title: Integrate Web3Auth with the Soneium Blockchain hide_table_of_contents: true - +sidebar_label: Soneium image: "banners/soneium.png" description: "Integrate Web3Auth with the Soneium Blockchain | Documentation - Web3Auth" --- diff --git a/docs/connect-blockchain/evm/songbird/songbird.mdx b/docs/connect-blockchain/evm/songbird/songbird.mdx index 047de5052..67701f00a 100644 --- a/docs/connect-blockchain/evm/songbird/songbird.mdx +++ b/docs/connect-blockchain/evm/songbird/songbird.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Songbird Blockchain +sidebar_label: Songbird hide_table_of_contents: true image: "banners/songbird.png" diff --git a/docs/connect-blockchain/evm/tron/tron.mdx b/docs/connect-blockchain/evm/tron/tron.mdx index f63cd7e2e..5784ee11b 100644 --- a/docs/connect-blockchain/evm/tron/tron.mdx +++ b/docs/connect-blockchain/evm/tron/tron.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Tron Blockchain +sidebar_label: Tron hide_table_of_contents: true image: "banners/tron.png" diff --git a/docs/connect-blockchain/evm/unichain/unichain.mdx b/docs/connect-blockchain/evm/unichain/unichain.mdx index abba2e7b0..4da99c00d 100644 --- a/docs/connect-blockchain/evm/unichain/unichain.mdx +++ b/docs/connect-blockchain/evm/unichain/unichain.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Unichain Blockchain +sidebar_label: Unichain hide_table_of_contents: true image: "banners/unichain.png" description: "Integrate Web3Auth with the Unichain Blockchain | Documentation - Web3Auth" diff --git a/docs/connect-blockchain/evm/xdc/xdc.mdx b/docs/connect-blockchain/evm/xdc/xdc.mdx index c260474fc..4ea4809fb 100644 --- a/docs/connect-blockchain/evm/xdc/xdc.mdx +++ b/docs/connect-blockchain/evm/xdc/xdc.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the XDC Network +sidebar_label: XDC hide_table_of_contents: true image: "banners/xdc.png" description: "Integrate Web3Auth with the XDC Network | Documentation - Web3Auth" diff --git a/docs/connect-blockchain/evm/xpla/xpla.mdx b/docs/connect-blockchain/evm/xpla/xpla.mdx index 1c5983c26..7faecb856 100644 --- a/docs/connect-blockchain/evm/xpla/xpla.mdx +++ b/docs/connect-blockchain/evm/xpla/xpla.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the XPLA Blockchain +sidebar_label: XPLA hide_table_of_contents: true image: "banners/xpla.png" diff --git a/docs/connect-blockchain/evm/zetachain/zetachain.mdx b/docs/connect-blockchain/evm/zetachain/zetachain.mdx index 4962c9aa3..8876f6957 100644 --- a/docs/connect-blockchain/evm/zetachain/zetachain.mdx +++ b/docs/connect-blockchain/evm/zetachain/zetachain.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the ZetaChain Blockchain +sidebar_label: ZetaChain hide_table_of_contents: true image: "banners/zetachain.png" diff --git a/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx b/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx index 394bea0a6..55ebd8167 100644 --- a/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx +++ b/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Zilliqa Blockchain +sidebar_label: Zilliqa hide_table_of_contents: true image: "banners/zilliqa.png" diff --git a/docs/connect-blockchain/evm/zircuit/zircuit.mdx b/docs/connect-blockchain/evm/zircuit/zircuit.mdx index f8894f9f6..61f8b6386 100644 --- a/docs/connect-blockchain/evm/zircuit/zircuit.mdx +++ b/docs/connect-blockchain/evm/zircuit/zircuit.mdx @@ -1,7 +1,7 @@ --- title: Integrate Web3Auth with the Zircuit Blockchain hide_table_of_contents: true - +sidebar_label: Zircuit image: "banners/zircuit.png" description: "Integrate Web3Auth with the Zircuit Blockchain | Documentation - Web3Auth" --- diff --git a/docs/connect-blockchain/near/near.mdx b/docs/connect-blockchain/near/near.mdx index fb7d32f35..f4d0c5eb0 100644 --- a/docs/connect-blockchain/near/near.mdx +++ b/docs/connect-blockchain/near/near.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Near Blockchain +sidebar_label: Near image: "banners/near.png" hide_table_of_contents: true description: "Integrate Web3Auth with the Near Blockchain | Documentation - Web3Auth" diff --git a/docs/connect-blockchain/other/other.mdx b/docs/connect-blockchain/other/other.mdx index a785d3483..ac8e50148 100644 --- a/docs/connect-blockchain/other/other.mdx +++ b/docs/connect-blockchain/other/other.mdx @@ -9,11 +9,11 @@ description: "Connect Web3Auth with any Blockchain - Chain Agnostic | Documentat import Tiles from "@theme/Tiles"; -While using the Web3Auth PnP & SFA SDKs for non-EVM chains, other than Solana and XRPL, we use the -Common Private Key Provider. This provider is a basic wrapper around the private key, helping us -export it on demand. The private key returned by this provider is of the curve `secp256k1` & -`ed25519` based on the particular requests. While these key curves serve the majority of blockchains -out there, certain blockchains have different curve implementations of their own. +While using the Web3Auth PnP & SFA Mobile SDKs for non-EVM chains, other than Solana and XRPL, we +use the Common Private Key Provider. This provider is a basic wrapper around the private key, +helping us export it on demand. The private key returned by this provider is of the curve +`secp256k1` & `ed25519` based on the particular requests. While these key curves serve the majority +of blockchains out there, certain blockchains have different curve implementations of their own. ## Standard Approach for connecting with Non EVM Chains diff --git a/docs/connect-blockchain/solana/solana.mdx b/docs/connect-blockchain/solana/solana.mdx index a0ded513f..843f0dd74 100644 --- a/docs/connect-blockchain/solana/solana.mdx +++ b/docs/connect-blockchain/solana/solana.mdx @@ -1,5 +1,6 @@ --- title: Integrate Web3Auth with the Solana Blockchain +sidebar_label: Solana hide_table_of_contents: true image: "banners/solana.png" description: "Integrate Web3Auth with the Solana Blockchain | Documentation - Web3Auth" diff --git a/docs/contribute/bug-bounty.mdx b/docs/contribute/bug-bounty.mdx index 9d6bd4e20..20f36ffc9 100644 --- a/docs/contribute/bug-bounty.mdx +++ b/docs/contribute/bug-bounty.mdx @@ -1,7 +1,7 @@ --- title: Bug Bounty image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Bug Bounty description: "Bug Bounty | Documentation - Web3Auth" --- diff --git a/docs/contribute/contribute.mdx b/docs/contribute/contribute.mdx index 70da244e1..8c46c531e 100644 --- a/docs/contribute/contribute.mdx +++ b/docs/contribute/contribute.mdx @@ -1,6 +1,6 @@ --- title: Contribute - +sidebar_label: Contribute description: "Contribute to Web3Auth | Documentation - Web3Auth" image: "images/docs-meta-cards/documentation-card.png" --- diff --git a/docs/dashboard-setup/billing-and-usage.mdx b/docs/dashboard-setup/billing-and-usage.mdx index e8fcd91f8..1e56c0efb 100644 --- a/docs/dashboard-setup/billing-and-usage.mdx +++ b/docs/dashboard-setup/billing-and-usage.mdx @@ -1,7 +1,7 @@ --- title: Billing and Usage image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Billing and Usage description: "Billing and Usage | Documentation - Web3Auth" --- diff --git a/docs/dashboard-setup/enable-interoperability.mdx b/docs/dashboard-setup/enable-interoperability.mdx index 8967de68a..d76001159 100644 --- a/docs/dashboard-setup/enable-interoperability.mdx +++ b/docs/dashboard-setup/enable-interoperability.mdx @@ -1,7 +1,7 @@ --- title: Enable Interoperability image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Enable Interoperability description: "Enable Interoperability | Documentation - Web3Auth" --- diff --git a/docs/dashboard-setup/roles-and-permissions.mdx b/docs/dashboard-setup/roles-and-permissions.mdx index a01f3b82c..0ce57ee97 100644 --- a/docs/dashboard-setup/roles-and-permissions.mdx +++ b/docs/dashboard-setup/roles-and-permissions.mdx @@ -1,7 +1,7 @@ --- title: Roles and Permissions image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Roles and Permissions description: "Organization Roles and Permissions | Documentation - Web3Auth" --- diff --git a/docs/dashboard-setup/setup-custom-authentication.mdx b/docs/dashboard-setup/setup-custom-authentication.mdx index 7f396e024..7a0460fd0 100644 --- a/docs/dashboard-setup/setup-custom-authentication.mdx +++ b/docs/dashboard-setup/setup-custom-authentication.mdx @@ -1,7 +1,7 @@ --- title: Setup Custom Authentication image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Setup Custom Authentication description: "Setup Custom Authentication | Documentation - Web3Auth" --- diff --git a/docs/examples.mdx b/docs/examples.mdx index c92162a4e..b81b95906 100644 --- a/docs/examples.mdx +++ b/docs/examples.mdx @@ -1,6 +1,6 @@ --- title: Examples - +sidebar_label: Examples description: "Examples | Documentation - Web3Auth" image: "images/docs-meta-cards/documentation-card.png" hide_table_of_contents: true diff --git a/docs/features/account-dashboard.mdx b/docs/features/account-dashboard.mdx index b9eddbfb4..3121c1471 100644 --- a/docs/features/account-dashboard.mdx +++ b/docs/features/account-dashboard.mdx @@ -1,5 +1,6 @@ --- title: Account Dashboard +sidebar_label: Account Dashboard description: "Account Dashboard | Documentation - Web3Auth" --- diff --git a/docs/features/ecosystem-wallets.mdx b/docs/features/ecosystem-wallets.mdx deleted file mode 100644 index 43b2c8c3d..000000000 --- a/docs/features/ecosystem-wallets.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Ecosystem Wallets -image: "images/docs-meta-cards/documentation-card.png" -description: "Ecosystem Wallets | Documentation - Web3Auth" ---- - -Web3Auth Ecosystem Wallets take our embedded wallet SDKs to the next level. You can now enable a -single user identity across multiple apps, providing one wallet for your entire ecosystem. - -### What Ecosystem Wallets Offer - -- **Unified Login Experience**: Provide users with a single login across all your applications. - Users retain the same wallet across your ecosystem, unlike the app scoped wallets. -- **Ready to launch UI and Branding**: Deploy a fully white-labeled, production-ready UI that can be - hosted on your domain, reducing developer effort and speeding up your go-to-market. -- **Developer Ownership**: Take full control of the developer experience by offering a white-labeled - SDK that developers integrate directly as your npm package -- **In-App Transaction Approvals**: Allow users to sign transactions and manage approvals directly - within your app, eliminating the need to switch to external wallets or extensions. -- **Gasless**: Upgrade to a smart contract wallet spun from an EOA, combining the benefits of MPC - (Multi-Party Computation) and smart wallets for a frictionless user experience. - -:::info Get Started - -Try the Wallet Ecosystem on devnet today. For pricing details and setup support, schedule a call -with our sales team [here](https://calendly.com/web3auth/meeting-with-web3auth). - -::: - -![Ecosystem Wallets](/images/wallet-ecosystem-offerings.png) diff --git a/docs/features/external-wallets.mdx b/docs/features/external-wallets.mdx index ac1e35ad8..9c9500ad1 100644 --- a/docs/features/external-wallets.mdx +++ b/docs/features/external-wallets.mdx @@ -1,7 +1,7 @@ --- title: External Wallets image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: External Wallets description: "External Wallets | Documentation - Web3Auth" --- diff --git a/docs/features/interoperability.mdx b/docs/features/interoperability.mdx index 7ce67de31..9f086703c 100644 --- a/docs/features/interoperability.mdx +++ b/docs/features/interoperability.mdx @@ -1,7 +1,7 @@ --- title: Interoperability image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Interoperability description: "Interoperability | Documentation - Web3Auth" --- diff --git a/docs/features/mfa.mdx b/docs/features/mfa.mdx index b46f9bb0f..5f24b86c2 100644 --- a/docs/features/mfa.mdx +++ b/docs/features/mfa.mdx @@ -1,6 +1,6 @@ --- title: Multi Factor Authentication - +sidebar_label: Multi Factor Authentication description: "Multi Factor Authentication | Documentation - Web3Auth" --- diff --git a/docs/features/mobile.mdx b/docs/features/mobile.mdx index c47cb5f50..787fe444e 100644 --- a/docs/features/mobile.mdx +++ b/docs/features/mobile.mdx @@ -4,7 +4,7 @@ sidebar_label: Mobile description: "Native Mobile SDKs | Documentation - Web3Auth" --- -import { mpccorekitjs, pnpmobile, sfamobile, sfaweb } from "@site/src/components/SDKReferenceCards"; +import { mpccorekitjs, pnpmobile, sfamobile } from "@site/src/components/SDKReferenceCards"; Building mobile apps with blockchain features has never been easier. With Web3Auth's Native Mobile SDKs, you can integrate secure wallet functionality and blockchain interactions directly into your @@ -29,11 +29,11 @@ app with minimal effort. Here’s how you can use our SDKs to create better mobi { pnpmobile } -## Single Factor Auth SDKs +## Single Factor Auth Mobile SDKs --- -{sfaweb} {sfamobile} +{sfamobile} ## MPC Core Kit diff --git a/docs/features/mpc.mdx b/docs/features/mpc.mdx index 920273ddd..8ccc3bbd5 100644 --- a/docs/features/mpc.mdx +++ b/docs/features/mpc.mdx @@ -1,6 +1,6 @@ --- title: Multi-Party Computation - +sidebar_label: Multi-Party Computation description: "Multi-Party Computation | Documentation - Web3Auth" --- diff --git a/docs/features/nft-minting.mdx b/docs/features/nft-minting.mdx index 197a197d0..3a344d1f5 100644 --- a/docs/features/nft-minting.mdx +++ b/docs/features/nft-minting.mdx @@ -2,6 +2,7 @@ title: NFT Minting image: "images/docs-meta-cards/documentation-card.png" description: "NFT Minting | Documentation - Web3Auth" +sidebar_label: NFT Minting --- Web3Auth NFT Minting Service facilitates NFT airdrops and minting, giving you granular control over diff --git a/docs/features/passkeys.mdx b/docs/features/passkeys.mdx deleted file mode 100644 index 21bae42c8..000000000 --- a/docs/features/passkeys.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Passkeys -sidebar_label: Passkeys -displayed_sidebar: docs -description: "Passkeys | Documentation - Web3Auth" -image: "images/docs-meta-cards/documentation-card.png" ---- - -import PasskeysDemo from "@site/static/images/passkeys-demo.gif"; - -Passkeys offer a secure, passwordless authentication method, enhancing user experience with the -WebAuthn standard. Web3Auth supports passkeys via its Single Factor Auth (SFA) Web SDK, enabling -seamless developer integration. - -:::info - -Checkout our [Demo](https://demo-sfa.web3auth.io) to see it in action. - -::: - -Showing How Web3Auth Key Generation works - -:::note - -For now, passkeys support is available for the Web3Auth Single Factor Auth (SFA) Web SDK through the -[Passkeys SFA Plugin package](/sdk/sfa/sfa-js/passkeys-sfa). Support for additional SDKs is coming -soon. - -::: - -### Key Benefits of Passkeys - -#### Convenience - -- **Passwordless Login:** Users can authenticate without the need for passwords, reducing friction - and improving the overall user experience. -- **Biometric Authentication:** Passkeys support biometric methods such as fingerprint or facial - recognition, offering a quick and secure way to log in. - -#### Security - -- **Phishing Resistant:** Passkeys are inherently phishing-resistant, as they use public-key - cryptography and are bound to the origin they were created for, making it difficult for attackers - to intercept or misuse them. -- **Strong Authentication:** Passkeys provide a strong form of authentication, leveraging the - security features of the user's device. - -#### Seamless Integration - -- **Web3Auth SFA SDK Compatibility:** The Passkeys SFA Plugin integrates seamlessly with Web3Auth - Single Factor Auth (SFA) Web SDK, enabling easy implementation of passkey registration, login, and - management functionalities. diff --git a/docs/features/server-side-verification.mdx b/docs/features/server-side-verification.mdx index 3f6d00280..af2a4a845 100644 --- a/docs/features/server-side-verification.mdx +++ b/docs/features/server-side-verification.mdx @@ -1,5 +1,6 @@ --- title: Server-Side Verification +sidebar_label: Server-Side Verification description: "Server-Side Verification | Documentation - Web3Auth" --- diff --git a/docs/features/session-management.mdx b/docs/features/session-management.mdx index 8eba2b8fa..468be01f3 100644 --- a/docs/features/session-management.mdx +++ b/docs/features/session-management.mdx @@ -1,6 +1,6 @@ --- title: Session Management - +sidebar_label: Session Management description: "Session Management | Documentation - Web3Auth" --- diff --git a/docs/features/account-abstraction.mdx b/docs/features/smart-accounts.mdx similarity index 61% rename from docs/features/account-abstraction.mdx rename to docs/features/smart-accounts.mdx index 9beeacde2..f96a34e63 100644 --- a/docs/features/account-abstraction.mdx +++ b/docs/features/smart-accounts.mdx @@ -1,12 +1,12 @@ --- -title: Web3Auth's Native Account Abstraction​ -sidebar_label: Account Abstraction -description: "Native Account Abstraction | Documentation - Web3Auth" +title: Web3Auth's Native Smart Accounts​ +sidebar_label: Smart Accounts +description: "Smart Accounts | Documentation - Web3Auth" --- Create and manage smart accounts for your users with just a few lines of code, using Web3Auth’s -native account abstraction. With smart accounts, you can offer enhanced control and programmability, -such as these listed below: +native smart accounts. With smart accounts, you can offer enhanced control and programmability, such +as these listed below: - **Gas Sponsorship:** Cover transaction fees, or allow users to pay for their own transactions using ERC-20 tokens. @@ -28,11 +28,12 @@ and how it works. ## Getting Started -Our native Account Abstraction (AA) integration simplifies setup, enabling you to create and manage -smart accounts effortlessly with popular libraries like Viem, Ethers, and Web3.js—no need for -third-party packages to achieve ERC-4337 compatibility. We are working closely with different -partners in the account abstraction ecosystem and will provide support for evolving standards like -EIP-7702, ERC-7579 (Modular Accounts), and ERC-7555 (account discovery) as they get finalized. +Our native smart accounts powered by Account Abstraction (AA) simplifies setup, enabling you to +create and manage smart accounts effortlessly with popular libraries like Viem, Ethers, and Web3.js +—no need for third-party packages to achieve ERC-4337 compatibility. We are working closely with +different partners in the account abstraction ecosystem and will provide support for evolving +standards like EIP-7702, ERC-7579 (Modular Accounts), and ERC-7555 (account discovery) as they get +finalized. :::note diff --git a/docs/features/topup.mdx b/docs/features/topup.mdx index 3eed59b6f..3b1d2d25f 100644 --- a/docs/features/topup.mdx +++ b/docs/features/topup.mdx @@ -1,6 +1,6 @@ --- title: Fiat On Ramp Aggregator - +sidebar_label: Fiat On Ramp Aggregator description: "Fiat On Ramp Aggregator | Documentation - Web3Auth" --- diff --git a/docs/features/wallet-pregeneration.mdx b/docs/features/wallet-pregeneration.mdx index 5a7986339..24761ce8f 100644 --- a/docs/features/wallet-pregeneration.mdx +++ b/docs/features/wallet-pregeneration.mdx @@ -1,6 +1,6 @@ --- title: Wallet Pregeneration - +sidebar_label: Wallet Pregeneration description: "Wallet Pregeneration | Documentation - Web3Auth" --- @@ -47,7 +47,7 @@ environment is the **Scale Plan**. This API only returns the Core Kit Key wallet addresses. To use the wallet addresses with the Web3Auth SDKs, you will need to either use the `useCoreKitKey` flag in our PnP SDKs or use any of -our Single Factor Auth SDKs +our Single Factor Auth Mobile SDKs Learn more about how [keys can change within different Web3Auth Products](/docs/troubleshooting/different-private-key#product) diff --git a/docs/features/wallet-ui.mdx b/docs/features/wallet-ui.mdx index 558b948c0..d609ee2ab 100644 --- a/docs/features/wallet-ui.mdx +++ b/docs/features/wallet-ui.mdx @@ -1,6 +1,6 @@ --- title: Embedded Wallet UI - +sidebar_label: Embedded Wallet UI description: "Embedded Wallet UI | Documentation - Web3Auth" --- diff --git a/docs/how-web3auth-works.mdx b/docs/how-web3auth-works.mdx index bc322e8cf..d80be5ffa 100644 --- a/docs/how-web3auth-works.mdx +++ b/docs/how-web3auth-works.mdx @@ -1,7 +1,7 @@ --- title: How Web3Auth Works? image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: How Web3Auth Works? description: "How Web3Auth Works? | Documentation - Web3Auth" --- diff --git a/docs/infrastructure/nodes-and-dkg.mdx b/docs/infrastructure/nodes-and-dkg.mdx index 4eb54760d..701a54171 100644 --- a/docs/infrastructure/nodes-and-dkg.mdx +++ b/docs/infrastructure/nodes-and-dkg.mdx @@ -1,6 +1,6 @@ --- title: Nodes and DKG - +sidebar_label: Nodes and DKG description: "DKG Nodes in Wallet Management | Documentation - Web3Auth" --- diff --git a/docs/infrastructure/sss-architecture.mdx b/docs/infrastructure/sss-architecture.mdx index 1171a17b7..f9118cf8c 100644 --- a/docs/infrastructure/sss-architecture.mdx +++ b/docs/infrastructure/sss-architecture.mdx @@ -11,7 +11,7 @@ import KeyReconstructionFlow from "@site/static/images/key-reconstruction-sss-fl import SSSArchitectureFlow from "@site/static/images/sss-architecture-flow.png"; This document provides an in-depth exploration of the technical architecture of the Shamir's Secret -Sharing(SSS)-based SDKs, this includes the current Plug and Play & Single Factor Auth SDKs. +Sharing(SSS)-based SDKs, this includes the current Plug and Play & Single Factor Auth Mobile SDKs. Shamir's Secret Sharing is a base form of MPC that splits a secret into $n$ shares, of which threshold $t$ are required to reconstruct the secret. You maybe looking for the diff --git a/docs/legal/cookie-policy.mdx b/docs/legal/cookie-policy.mdx index 59923fdfb..57a1aed75 100644 --- a/docs/legal/cookie-policy.mdx +++ b/docs/legal/cookie-policy.mdx @@ -1,47 +1,57 @@ --- title: Cookie Policy description: "Cookie Policy | Documentation - Web3Auth" +sidebar_label: Cookie Policy --- Latest update: 2 June 2023 -This cookie policy is only applicable to Torus website (https://tor.us) and Web3Auth's website (https://web3auth.io) not Torus wallet -(https://app.tor.us). The Torus wallet does not use any cookies. +This cookie policy is only applicable to Torus website (https://tor.us) and Web3Auth's website +(https://web3auth.io) not Torus wallet (https://app.tor.us). The Torus wallet does not use any +cookies. -Cookies consist of portions of code installed in the browser that assist the Owner in providing the Service according to the purposes described. Some -of the purposes for which Cookies are installed may also require the User's consent. +Cookies consist of portions of code installed in the browser that assist the Owner in providing the +Service according to the purposes described. Some of the purposes for which Cookies are installed +may also require the User's consent. -Where the installation of Cookies is based on consent, such consent can be freely withdrawn at any time following the instructions provided in this -document. +Where the installation of Cookies is based on consent, such consent can be freely withdrawn at any +time following the instructions provided in this document. ## Technical Cookies and Cookies Serving Aggregated Statistical Purposes ### Activity Strictly Necessary for the Functioning of the Service -Torus Labs uses Cookies to save the User's session and to carry out other activities that are strictly necessary for the operation of Torus Labs, for -example in relation to the distribution of traffic. +Torus Labs uses Cookies to save the User's session and to carry out other activities that are +strictly necessary for the operation of Torus Labs, for example in relation to the distribution of +traffic. ### Activity Regarding the Saving of Preferences, Optimization, and Statistics -Torus Labs uses Cookies to save browsing preferences and to optimize the User's browsing experience. Among these Cookies are, for example, those used -for the setting of language and currency preferences or for the management of first party statistics employed directly by the Owner of the site. +Torus Labs uses Cookies to save browsing preferences and to optimize the User's browsing experience. +Among these Cookies are, for example, those used for the setting of language and currency +preferences or for the management of first party statistics employed directly by the Owner of the +site. ## Other types of Cookies or Third Parties that Install Cookies -Some of the services listed below collect statistics in an anonymized and aggregated form and may not require the consent of the User or may be -managed directly by the Owner - depending on how they are described - without the help of third parties. +Some of the services listed below collect statistics in an anonymized and aggregated form and may +not require the consent of the User or may be managed directly by the Owner - depending on how they +are described - without the help of third parties. -If any third party operated services are listed among the tools below, these may be used to track Users’ browsing habits – in addition to the -information specified herein and without the Owner’s knowledge. Please refer to the privacy policy of the listed services for detailed information. +If any third party operated services are listed among the tools below, these may be used to track +Users’ browsing habits – in addition to the information specified herein and without the Owner’s +knowledge. Please refer to the privacy policy of the listed services for detailed information. ### Analytics -The services contained in this section enable the Owner to monitor and analyze web traffic and can be used to keep track of User behavior. +The services contained in this section enable the Owner to monitor and analyze web traffic and can +be used to keep track of User behavior. **Google Analytics \(Google LLC\)** -Google Analytics is a web analysis service provided by Google LLC \(“Google”\). Google utilizes the Data collected to track and examine the use of -Torus Labs, to prepare reports on its activities and share them with other Google services. Google may use the Data collected to contextualize and +Google Analytics is a web analysis service provided by Google LLC \(“Google”\). Google utilizes the +Data collected to track and examine the use of Torus Labs, to prepare reports on its activities and +share them with other Google services. Google may use the Data collected to contextualize and personalize the ads of its own advertising network. Personal Data collected: Cookies and Usage Data. @@ -51,21 +61,25 @@ Place of processing: United States – [Privacy Policy](https://policies.google. ### Displaying Content from External Platforms -This type of service allows you to view content hosted on external platforms directly from the pages of Torus Labs and interact with them. This type -of service might still collect web traffic data for the pages where the service is installed, even when Users do not use it. +This type of service allows you to view content hosted on external platforms directly from the pages +of Torus Labs and interact with them. This type of service might still collect web traffic data for +the pages where the service is installed, even when Users do not use it. **YouTube Video Widget \(Google LLC\)** -YouTube is a video content visualization service provided by Google LLC that allows Torus Labs to incorporate content of this kind on its pages. +YouTube is a video content visualization service provided by Google LLC that allows Torus Labs to +incorporate content of this kind on its pages. Personal Data collected: Cookies and Usage Data. -Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy Shield participant. +Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy +Shield participant. ### Tag Management -This type of service helps the Owner to manage the tags or scripts needed on Torus Labs in a centralized fashion. This results in the Users' Data -flowing through these services, potentially resulting in the retention of this Data. +This type of service helps the Owner to manage the tags or scripts needed on Torus Labs in a +centralized fashion. This results in the Users' Data flowing through these services, potentially +resulting in the retention of this Data. **Google Tag Manager \(Google LLC\)** @@ -73,44 +87,56 @@ Google Tag Manager is a tag management service provided by Google LLC. Personal Data collected: Cookies and Usage Data. -Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy Shield participant. +Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy +Shield participant. ### Traffic Optimization and Distribution -This type of service allows Torus Labs to distribute their content using servers located across different countries and to optimize their performance. -Which Personal Data are processed depends on the characteristics and the way these services are implemented. Their function is to filter -communications between Torus Labs and the User's browser. Considering the widespread distribution of this system, it is difficult to determine the -locations to which the contents that may contain Personal Information User are transferred. +This type of service allows Torus Labs to distribute their content using servers located across +different countries and to optimize their performance. Which Personal Data are processed depends on +the characteristics and the way these services are implemented. Their function is to filter +communications between Torus Labs and the User's browser. Considering the widespread distribution of +this system, it is difficult to determine the locations to which the contents that may contain +Personal Information User are transferred. **Cloudflare \(Cloudflare Inc.\)** -Cloudflare is a traffic optimization and distribution service provided by Cloudflare Inc. The way Cloudflare is integrated means that it filters all -the traffic through Torus Labs, i.e., communication between Torus Labs and the User's browser, while also allowing analytical data from Torus Labs to -be collected. +Cloudflare is a traffic optimization and distribution service provided by Cloudflare Inc. The way +Cloudflare is integrated means that it filters all the traffic through Torus Labs, i.e., +communication between Torus Labs and the User's browser, while also allowing analytical data from +Torus Labs to be collected. -Personal Data collected: Cookies and various types of Data as specified in the privacy policy of the service. +Personal Data collected: Cookies and various types of Data as specified in the privacy policy of the +service. Place of processing: United States – [Privacy Policy](https://www.cloudflare.com/privacypolicy/). ## How to Provide or Withdraw Consent to the Installation of Cookies -In addition to what is specified in this document, the User can manage preferences for Cookies directly from within their own browser and prevent – -for example – third parties from installing Cookies. Through browser preferences, it is also possible to delete Cookies installed in the past, -including the Cookies that may have saved the initial consent for the installation of Cookies by this website. Users can, for example, find -information about how to manage Cookies in the most commonly used browsers at the following addresses: +In addition to what is specified in this document, the User can manage preferences for Cookies +directly from within their own browser and prevent – for example – third parties from installing +Cookies. Through browser preferences, it is also possible to delete Cookies installed in the past, +including the Cookies that may have saved the initial consent for the installation of Cookies by +this website. Users can, for example, find information about how to manage Cookies in the most +commonly used browsers at the following addresses: [Google Chrome](https://support.google.com/chrome/answer/95647?hl=en&p=cpn_cookies), [Mozilla Firefox](https://support.mozilla.org/en-US/kb/enable-and-disable-cookies-website-preferences), -[Apple Safari](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/) and +[Apple Safari](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/) +and [Microsoft Internet Explorer](http://windows.microsoft.com/en-us/windows-vista/block-or-allow-cookies). -With regard to Cookies installed by third parties, Users can manage their preferences and withdraw of their consent by clicking the related opt-out -link \(if provided\), by using the means provided in the third party's privacy policy, or by contacting the third party. - -Notwithstanding the above, the Owner informs that Users may follow the instructions provided on the subsequently linked initiatives by the -[EDAA](http://www.youronlinechoices.eu/) \(EU\), the [Network Advertising Initiative](https://thenai.org/) \(US\) and the -[Digital Advertising Alliance](#) \(US\), [DAAC](https://youradchoices.ca/en/learn) \(Canada\), [DDAI](http://www.ddai.info/optout) \(Japan\) or other -similar services. Such initiatives allow Users to select their tracking preferences for most of the advertising tools. The Owner thus recommends that -Users make use of these resources in addition to the information provided in this document. +With regard to Cookies installed by third parties, Users can manage their preferences and withdraw +of their consent by clicking the related opt-out link \(if provided\), by using the means provided +in the third party's privacy policy, or by contacting the third party. + +Notwithstanding the above, the Owner informs that Users may follow the instructions provided on the +subsequently linked initiatives by the [EDAA](http://www.youronlinechoices.eu/) \(EU\), the +[Network Advertising Initiative](https://thenai.org/) \(US\) and the +[Digital Advertising Alliance](#) \(US\), [DAAC](https://youradchoices.ca/en/learn) \(Canada\), +[DDAI](http://www.ddai.info/optout) \(Japan\) or other similar services. Such initiatives allow +Users to select their tracking preferences for most of the advertising tools. The Owner thus +recommends that Users make use of these resources in addition to the information provided in this +document. ## Owner and Data Controller @@ -118,28 +144,35 @@ Torus Labs Private Limited 60 Paya Lebar Road, \#04-46, Paya Lebar Square, Singa **Owner Contact Email:** hello@tor.us -Since the installation of third-party Cookies and other tracking systems through the services used within Torus Labs cannot be technically controlled -by the Owner, any specific references to Cookies and tracking systems installed by third parties are to be considered indicative. In order to obtain -complete information, the User is kindly requested to consult the privacy policy for the respective third-party services listed in this document. +Since the installation of third-party Cookies and other tracking systems through the services used +within Torus Labs cannot be technically controlled by the Owner, any specific references to Cookies +and tracking systems installed by third parties are to be considered indicative. In order to obtain +complete information, the User is kindly requested to consult the privacy policy for the respective +third-party services listed in this document. -Given the objective complexity surrounding the identification of technologies based on Cookies, Users are encouraged to contact the Owner should they -wish to receive any further information on the use of Cookies by Torus Labs. +Given the objective complexity surrounding the identification of technologies based on Cookies, +Users are encouraged to contact the Owner should they wish to receive any further information on the +use of Cookies by Torus Labs. ## Definitions and Legal References **Personal Data \(or Data\)** -Any information that directly, indirectly, or in connection with other information — including a personal identification number — allows for the -identification or identifiability of a natural person. +Any information that directly, indirectly, or in connection with other information — including a +personal identification number — allows for the identification or identifiability of a natural +person. **Usage Data** -Information collected automatically through Torus Labs \(or third-party services employed in Torus Labs\), which can include: the IP addresses or -domain names of the computers utilized by the Users who use Torus Labs, the URI addresses \(Uniform Resource Identifier\), the time of the request, -the method utilized to submit the request to the server, the size of the file received in response, the numerical code indicating the status of the -server's answer \(successful outcome, error, etc.\), the country of origin, the features of the browser and the operating system utilized by the User, -the various time details per visit \(e.g., the time spent on each page within the Application\) and the details about the path followed within the -Application with special reference to the sequence of pages visited, and other parameters about the device operating system and/or the User's IT +Information collected automatically through Torus Labs \(or third-party services employed in Torus +Labs\), which can include: the IP addresses or domain names of the computers utilized by the Users +who use Torus Labs, the URI addresses \(Uniform Resource Identifier\), the time of the request, the +method utilized to submit the request to the server, the size of the file received in response, the +numerical code indicating the status of the server's answer \(successful outcome, error, etc.\), the +country of origin, the features of the browser and the operating system utilized by the User, the +various time details per visit \(e.g., the time spent on each page within the Application\) and the +details about the path followed within the Application with special reference to the sequence of +pages visited, and other parameters about the device operating system and/or the User's IT environment. **User** @@ -152,13 +185,14 @@ The natural person to whom the Personal Data refers. **Data Processor \(or Data Supervisor\)** -The natural or legal person, public authority, agency or other body which processes Personal Data on behalf of the Controller, as described in this -privacy policy. +The natural or legal person, public authority, agency or other body which processes Personal Data on +behalf of the Controller, as described in this privacy policy. **Data Controller \(or Owner\)** -The natural or legal person, public authority, agency or other body which, alone or jointly with others, determines the purposes and means of the -processing of Personal Data, including the security measures concerning the operation and use of Torus Labs. The Data Controller, unless otherwise +The natural or legal person, public authority, agency or other body which, alone or jointly with +others, determines the purposes and means of the processing of Personal Data, including the security +measures concerning the operation and use of Torus Labs. The Data Controller, unless otherwise specified, is the Owner of Torus Labs. **Torus Labs \(or this Application\)** @@ -167,12 +201,13 @@ The means by which the Personal Data of the User is collected and processed. **Service** -The service provided by Torus Labs as described in the relative terms \(if available\) and on this site/application. +The service provided by Torus Labs as described in the relative terms \(if available\) and on this +site/application. **European Union \(or EU\)** -Unless otherwise specified, all references made within this document to the European Union include all current member states to the European Union and -the European Economic Area. +Unless otherwise specified, all references made within this document to the European Union include +all current member states to the European Union and the European Economic Area. **Cookies** @@ -180,7 +215,7 @@ Small sets of data stored in the User's device. **Legal information** -This privacy statement has been prepared based on provisions of multiple legislations, including Art. 13/14 of Regulation \(EU\) 2016/679 \(General -Data Protection Regulation\). +This privacy statement has been prepared based on provisions of multiple legislations, including +Art. 13/14 of Regulation \(EU\) 2016/679 \(General Data Protection Regulation\). This privacy policy relates solely to Torus Labs, if not stated otherwise within this document. diff --git a/docs/legal/privacy-policy.mdx b/docs/legal/privacy-policy.mdx index 885d77f74..bce6aad2e 100644 --- a/docs/legal/privacy-policy.mdx +++ b/docs/legal/privacy-policy.mdx @@ -1,6 +1,7 @@ --- title: Privacy Policy description: "Privacy Policy | Documentation - Web3Auth" +sidebar_label: Privacy Policy --- Latest update: **9 December 2024** diff --git a/docs/legal/terms-and-conditions.mdx b/docs/legal/terms-and-conditions.mdx index 121c2aae2..962c8d96b 100644 --- a/docs/legal/terms-and-conditions.mdx +++ b/docs/legal/terms-and-conditions.mdx @@ -1,6 +1,7 @@ --- title: Terms and Conditions description: "Terms and Conditions | Documentation - Web3Auth" +sidebar_label: Terms and Conditions --- Latest update: 28 April 2025 diff --git a/docs/migration-guides/rn-v3-to-v4.mdx b/docs/migration-guides/rn-v3-to-v4.mdx index 210a012df..40776d8eb 100644 --- a/docs/migration-guides/rn-v3-to-v4.mdx +++ b/docs/migration-guides/rn-v3-to-v4.mdx @@ -1,6 +1,6 @@ --- title: PnP React Native - v3 to v4 - +sidebar_label: PnP React Native - v3 to v4 description: "PnP React Native SDK - v3 to v4 | Documentation - Web3Auth" --- diff --git a/docs/migration-guides/rn-v4-to-v5.mdx b/docs/migration-guides/rn-v4-to-v5.mdx index 9f6f3b7ad..9998d0beb 100644 --- a/docs/migration-guides/rn-v4-to-v5.mdx +++ b/docs/migration-guides/rn-v4-to-v5.mdx @@ -1,6 +1,6 @@ --- title: PnP React Native - v4 to v5 - +sidebar_label: PnP React Native - v4 to v5 description: "PnP React Native SDK - v4 to v5 | Documentation - Web3Auth" --- diff --git a/docs/migration-guides/rn-v5-to-v6.mdx b/docs/migration-guides/rn-v5-to-v6.mdx index 8d912bad8..f3a1cdcaa 100644 --- a/docs/migration-guides/rn-v5-to-v6.mdx +++ b/docs/migration-guides/rn-v5-to-v6.mdx @@ -1,6 +1,6 @@ --- title: PnP React Native - v5 to v6 - +sidebar_label: PnP React Native - v5 to v6 description: "PnP React Native SDK - v5 to v6 | Documentation - Web3Auth" --- diff --git a/docs/migration-guides/rn-v7-to-v8.mdx b/docs/migration-guides/rn-v7-to-v8.mdx index 8baa222f6..60250cf7a 100644 --- a/docs/migration-guides/rn-v7-to-v8.mdx +++ b/docs/migration-guides/rn-v7-to-v8.mdx @@ -1,5 +1,6 @@ --- title: PnP React Native - v7 to v8 +sidebar_label: PnP React Native - v7 to v8 description: "PnP React Native SDK - v7 to v8 | Documentation - Web3Auth" --- diff --git a/docs/migration-guides/sfa-android-v0.4.0-to-v1.mdx b/docs/migration-guides/sfa-android-v0.4.0-to-v1.mdx index d41906930..a569fa2e1 100644 --- a/docs/migration-guides/sfa-android-v0.4.0-to-v1.mdx +++ b/docs/migration-guides/sfa-android-v0.4.0-to-v1.mdx @@ -54,7 +54,7 @@ address for the account. It was renamed to maintain consistency across SDKs. In v1, the `getKey` method is deprecated. Developers can now use `connect`, the common method for single verifier and aggregate verifier login. This change was done to improve the developer -experience and align with other Web3Auth SFA SDKs. +experience and align with other Web3Auth SFA Mobile SDKs. ```kotlin val loginParams = LoginParams( diff --git a/docs/migration-guides/sfa-flutter-v4-to-v5.mdx b/docs/migration-guides/sfa-flutter-v4-to-v5.mdx index 74114c801..65fdcd0e8 100644 --- a/docs/migration-guides/sfa-flutter-v4-to-v5.mdx +++ b/docs/migration-guides/sfa-flutter-v4-to-v5.mdx @@ -50,7 +50,7 @@ address for the account. It was renamed to maintain consistency across SDKs. In v5, the `getKey` method is removed. Developers can now use `connect`, the common method for single verifier and aggregate verifier login. This change was done to improve the developer -experience and align with other Web3Auth SFA SDKs. +experience and align with other Web3Auth SFA Mobile SDKs. ```dart // remove-next-line @@ -69,7 +69,7 @@ final SFAKey key = await singleFactAuthFlutter.connect( In v5, the `getAggregateKey` method is removed. Developers can now use `connect`, the common method for single verifier and aggregate verifier login. This change was done to improve the developer -experience and align with other Web3Auth SFA SDKs. +experience and align with other Web3Auth SFA Mobile SDKs. ```dart // remove-next-line diff --git a/docs/migration-guides/sfa-ios-v7-to-v8.mdx b/docs/migration-guides/sfa-ios-v7-to-v8.mdx index 1b7d4653e..88fc8863a 100644 --- a/docs/migration-guides/sfa-ios-v7-to-v8.mdx +++ b/docs/migration-guides/sfa-ios-v7-to-v8.mdx @@ -47,7 +47,7 @@ and address for the account. It was renamed to maintain consistency across SDKs. ### `getKey` method is renamed to `connect` In v8, the `getKey` method is renamed to `connect`. This change was done to improve the developer -experience and align with other Web3Auth SFA SDKs. +experience and align with other Web3Auth SFA Mobile SDKs. ```swift let loginParams = LoginParams( diff --git a/docs/migration-guides/sfa-node-to-sfa-js.mdx b/docs/migration-guides/sfa-node-to-sfa-js.mdx index 9fdaec29d..67be9b720 100644 --- a/docs/migration-guides/sfa-node-to-sfa-js.mdx +++ b/docs/migration-guides/sfa-node-to-sfa-js.mdx @@ -8,9 +8,7 @@ sidebar_label: SFA Node.js SDK Migration This migration guide provides steps for updating your existing SFA Node.js SDK integration to the SFA JS SDK. This migration is coming after we have deprecated the SFA Node.js SDK in favour a -unified, platform-agnostic solution, the Single Factor Auth JS SDK. This new SDK is an evolution of -our popular SFA Web SDK, designed to support all platforms, including React Native, Node.js, and -Web. +unified, platform-agnostic solution, the Single Factor Auth JS SDK. #### Key Benefits of the SFA JS SDK: diff --git a/docs/migration-guides/sfa-rn-to-sfa-js.mdx b/docs/migration-guides/sfa-rn-to-sfa-js.mdx index 2494974e1..b347a9366 100644 --- a/docs/migration-guides/sfa-rn-to-sfa-js.mdx +++ b/docs/migration-guides/sfa-rn-to-sfa-js.mdx @@ -11,9 +11,7 @@ import Tabs from "@theme/Tabs"; This migration guide provides steps for updating your existing SFA Node.js SDK integration to the SFA JS SDK. This migration is coming after we have deprecated the SFA Node.js SDK in favour a -unified, platform-agnostic solution, the Single Factor Auth JS SDK. This new SDK is an evolution of -our popular SFA Web SDK, designed to support all platforms, including React Native, Node.js, and -Web. +unified, platform-agnostic solution, the Single Factor Auth JS SDK. #### Key Benefits of the SFA JS SDK: diff --git a/docs/product-fit.mdx b/docs/product-fit.mdx index 75fc30636..b4af3a96d 100644 --- a/docs/product-fit.mdx +++ b/docs/product-fit.mdx @@ -1,5 +1,6 @@ --- title: Product Fit Guide +sidebar_label: Product Fit Guide description: "Deciding your Product Fit | Documentation - Web3Auth" --- @@ -18,8 +19,8 @@ remains the same across platforms.** - **Plug and Play SDKs** are designed for quick, easy integration, offering a predefined UI/UX suitable for projects with speed as a priority. -- **Single Factor Auth SDKs** provide a streamlined authentication experience with a single social - login, ideal for applications prioritizing simplicity and quick user onboarding. +- **Single Factor Auth Mobile SDKs** provide a streamlined authentication experience with native + logins, ideal for applications prioritizing simplicity and quick user onboarding. - **MPC Core Kit SDKs** offer advanced security through multi-party computation, giving developers complete control over authentication flows and wallet management, perfect for enterprise @@ -40,7 +41,7 @@ your project requirements and find out which Web3Auth product is the best fit fo | -------------------------------- | ---------------------------------- | ---------------------------------------------- | ------------------------------------------------------------- | | **Quick Setup** | ✅ | ✅ | ❌ | | **Prebuilt UI/UX Flows** | ✅
Fully Customisable UI/UX | ❌
Single Click Login (No flows needed) | ❌
| -| **Custom UI/UX** | ❌
| ✅
Single Click Login (No flows needed) | ✅
Infrastructure SDK, ability to build your own flows | +| **Custom UI/UX** | ✅
Only in Web | ✅
Single Click Login (No flows needed) | ✅
Infrastructure SDK, ability to build your own flows | | **Built-in Key Recovery Flows** | ✅
| ✅
Only 1 Factor Needed | ❌
| | **Non-Custodial** | ✅
| ❗️
Semi Custodial | ✅
| | **Out-of-box Authentication** | ✅ | ❌ | ❌ | diff --git a/docs/product/mpc-core-kit.mdx b/docs/product/mpc-core-kit.mdx index 06911c58d..fb04cf4cb 100644 --- a/docs/product/mpc-core-kit.mdx +++ b/docs/product/mpc-core-kit.mdx @@ -1,11 +1,12 @@ --- title: MPC Core Kit +sidebar_label: MPC Core Kit description: "MPC Core Kit | Documentation - Web3Auth" --- import KeyManagementDark from "@site/static/images/key-management-dark.png"; import KeyManagementLight from "@site/static/images/key-management-light.png"; -import { MPCCards } from "@site/src/components/SDKReferenceCards"; +import { mpccorekit } from "@site/src/components/SDKReferenceCards"; The MPC Core Kit is designed for applications that need advanced security and complete control over their authentication flows. It provides the necessary tools and flexibility to build sophisticated @@ -65,4 +66,4 @@ To learn more about MPC Core Kit architecture, visit ## Get Started with MPC Core Kit SDKs - +{mpccorekit} diff --git a/docs/product/pnp.mdx b/docs/product/pnp.mdx index be83be96d..08e792a07 100644 --- a/docs/product/pnp.mdx +++ b/docs/product/pnp.mdx @@ -6,7 +6,7 @@ description: "Plug and Play | Documentation - Web3Auth" --- import Web3AuthWorking from "@site/static/guides/web3auth-pnp-working.png"; -import { PnPCards } from "@site/src/components/SDKReferenceCards"; +import { pnpweb, pnpmobile, pnpgaming } from "@site/src/components/SDKReferenceCards"; With Web3Auth's Plug-and-Play (PnP) integration, you can provide a fully-featured, secure embedded wallet into your app in just 4 lines of code! Simply initialize the SDK, configure your settings, @@ -21,13 +21,13 @@ Checkout our [Demo](https://demo.web3auth.io) to see it in action. ## How Plug and Play Works -Here's a visual representation of the high-level flow: +Below is a simplified overview of the Plug and Play authentication flow for you users: -1. Users lands on your dApp -2. User initiates login (via Web3Auth Modal) -3. User logins using OAuth/ social login -4. User authenticated (via auth.web3auth.io) -5. User logins to your dapp (with application scoped key) +1. Visit your dApp. +2. Initiate login (using the Web3Auth Modal/ Custom UI). +3. Authenticate via OAuth or social login. +4. Complete any required 2FA setup. +5. Log in to your dApp with an application-scoped key. +{pnpweb} {pnpmobile} {pnpgaming} diff --git a/docs/product/product.mdx b/docs/product/product.mdx index e8754dbec..3a7f0200e 100644 --- a/docs/product/product.mdx +++ b/docs/product/product.mdx @@ -1,7 +1,7 @@ --- title: Explore our Products image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Explore our Products description: "Web3Auth Product Stack | Documentation - Web3Auth" --- diff --git a/docs/product/sfa.mdx b/docs/product/sfa.mdx index a3fd5ecfd..df3120a7c 100644 --- a/docs/product/sfa.mdx +++ b/docs/product/sfa.mdx @@ -1,12 +1,12 @@ --- -title: Single Factor Auth SDKs +title: Single Factor Auth Mobile SDKs sidebar_label: Single Factor Auth description: "Single Factor Auth | Documentation - Web3Auth" --- import SFAInfraDark from "@site/static/images/sfa-infra-dark.png"; import SFAInfraLight from "@site/static/images/sfa-infra-light.png"; -import { SFACards } from "@site/src/components/SDKReferenceCards"; +import { sfamobile } from "@site/src/components/SDKReferenceCards"; Single Factor Auth(SFA) provides the most seamless Web3 onboarding experience possible by making it feel completely like Web2. Users can access your application with just one click through their @@ -78,6 +78,6 @@ to full non-custodial security by activating Multi-Factor Authentication (MFA) w - **WalletConnect Integration:** Enable seamless interoperability with the broader Web3 ecosystem through native WalletConnect support. -## Get Started with Single Factor Auth SDKs +## Get Started with Single Factor Auth Mobile SDKs - +{sfamobile} diff --git a/docs/sdk/gaming/gaming.mdx b/docs/sdk/gaming/gaming.mdx new file mode 100644 index 000000000..c4bb950fa --- /dev/null +++ b/docs/sdk/gaming/gaming.mdx @@ -0,0 +1,13 @@ +--- +title: Explore Web3Auth Gaming SDKs +hide_table_of_contents: true +sidebar_label: Gaming SDKs +displayed_sidebar: sdk_pnp_unity +image: "images/docs-meta-cards/sdk-reference-card.png" +description: "Gaming SDKs | Documentation - Web3Auth" +--- + +import { pnpgaming } from "@site/src/components/SDKReferenceCards"; +import Tiles from "@theme/Tiles"; + +{pnpgaming} diff --git a/docs/sdk/pnp/unity/custom-authentication.mdx b/docs/sdk/gaming/unity/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/unity/custom-authentication.mdx rename to docs/sdk/gaming/unity/custom-authentication.mdx diff --git a/docs/sdk/pnp/unity/dapp-share.mdx b/docs/sdk/gaming/unity/dapp-share.mdx similarity index 100% rename from docs/sdk/pnp/unity/dapp-share.mdx rename to docs/sdk/gaming/unity/dapp-share.mdx diff --git a/docs/sdk/pnp/unity/examples.mdx b/docs/sdk/gaming/unity/examples.mdx similarity index 100% rename from docs/sdk/pnp/unity/examples.mdx rename to docs/sdk/gaming/unity/examples.mdx diff --git a/docs/sdk/pnp/unity/initialize.mdx b/docs/sdk/gaming/unity/initialize.mdx similarity index 100% rename from docs/sdk/pnp/unity/initialize.mdx rename to docs/sdk/gaming/unity/initialize.mdx diff --git a/docs/sdk/pnp/unity/install.mdx b/docs/sdk/gaming/unity/install.mdx similarity index 100% rename from docs/sdk/pnp/unity/install.mdx rename to docs/sdk/gaming/unity/install.mdx diff --git a/docs/sdk/pnp/unity/mfa.mdx b/docs/sdk/gaming/unity/mfa.mdx similarity index 100% rename from docs/sdk/pnp/unity/mfa.mdx rename to docs/sdk/gaming/unity/mfa.mdx diff --git a/docs/sdk/pnp/unity/unity.mdx b/docs/sdk/gaming/unity/unity.mdx similarity index 100% rename from docs/sdk/pnp/unity/unity.mdx rename to docs/sdk/gaming/unity/unity.mdx diff --git a/docs/sdk/pnp/unity/usage.mdx b/docs/sdk/gaming/unity/usage.mdx similarity index 100% rename from docs/sdk/pnp/unity/usage.mdx rename to docs/sdk/gaming/unity/usage.mdx diff --git a/docs/sdk/pnp/unity/whitelabel.mdx b/docs/sdk/gaming/unity/whitelabel.mdx similarity index 100% rename from docs/sdk/pnp/unity/whitelabel.mdx rename to docs/sdk/gaming/unity/whitelabel.mdx diff --git a/docs/sdk/pnp/unreal/custom-authentication.mdx b/docs/sdk/gaming/unreal/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/unreal/custom-authentication.mdx rename to docs/sdk/gaming/unreal/custom-authentication.mdx diff --git a/docs/sdk/pnp/unreal/examples.mdx b/docs/sdk/gaming/unreal/examples.mdx similarity index 100% rename from docs/sdk/pnp/unreal/examples.mdx rename to docs/sdk/gaming/unreal/examples.mdx diff --git a/docs/sdk/pnp/unreal/initialize.mdx b/docs/sdk/gaming/unreal/initialize.mdx similarity index 100% rename from docs/sdk/pnp/unreal/initialize.mdx rename to docs/sdk/gaming/unreal/initialize.mdx diff --git a/docs/sdk/pnp/unreal/install.mdx b/docs/sdk/gaming/unreal/install.mdx similarity index 100% rename from docs/sdk/pnp/unreal/install.mdx rename to docs/sdk/gaming/unreal/install.mdx diff --git a/docs/sdk/pnp/unreal/mfa.mdx b/docs/sdk/gaming/unreal/mfa.mdx similarity index 100% rename from docs/sdk/pnp/unreal/mfa.mdx rename to docs/sdk/gaming/unreal/mfa.mdx diff --git a/docs/sdk/pnp/unreal/unreal.mdx b/docs/sdk/gaming/unreal/unreal.mdx similarity index 100% rename from docs/sdk/pnp/unreal/unreal.mdx rename to docs/sdk/gaming/unreal/unreal.mdx diff --git a/docs/sdk/pnp/unreal/usage.mdx b/docs/sdk/gaming/unreal/usage.mdx similarity index 100% rename from docs/sdk/pnp/unreal/usage.mdx rename to docs/sdk/gaming/unreal/usage.mdx diff --git a/docs/sdk/pnp/unreal/whitelabel.mdx b/docs/sdk/gaming/unreal/whitelabel.mdx similarity index 100% rename from docs/sdk/pnp/unreal/whitelabel.mdx rename to docs/sdk/gaming/unreal/whitelabel.mdx diff --git a/docs/sdk/mobile/mobile.mdx b/docs/sdk/mobile/mobile.mdx new file mode 100644 index 000000000..35e9941c4 --- /dev/null +++ b/docs/sdk/mobile/mobile.mdx @@ -0,0 +1,13 @@ +--- +title: Explore Web3Auth Mobile SDKs +hide_table_of_contents: true +sidebar_label: Mobile SDKs +displayed_sidebar: sdk_pnp_android +image: "images/docs-meta-cards/sdk-reference-card.png" +description: "Mobile SDKs | Documentation - Web3Auth" +--- + +import { pnpmobile, sfamobile } from "@site/src/components/SDKReferenceCards"; +import Tiles from "@theme/Tiles"; + +{pnpmobile} {sfamobile} diff --git a/docs/sdk/pnp/android/android.mdx b/docs/sdk/mobile/pnp/android/android.mdx similarity index 100% rename from docs/sdk/pnp/android/android.mdx rename to docs/sdk/mobile/pnp/android/android.mdx diff --git a/docs/sdk/pnp/android/custom-authentication.mdx b/docs/sdk/mobile/pnp/android/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/android/custom-authentication.mdx rename to docs/sdk/mobile/pnp/android/custom-authentication.mdx diff --git a/docs/sdk/pnp/android/dapp-share.mdx b/docs/sdk/mobile/pnp/android/dapp-share.mdx similarity index 100% rename from docs/sdk/pnp/android/dapp-share.mdx rename to docs/sdk/mobile/pnp/android/dapp-share.mdx diff --git a/docs/sdk/pnp/android/examples.mdx b/docs/sdk/mobile/pnp/android/examples.mdx similarity index 100% rename from docs/sdk/pnp/android/examples.mdx rename to docs/sdk/mobile/pnp/android/examples.mdx diff --git a/docs/sdk/pnp/android/initialize.mdx b/docs/sdk/mobile/pnp/android/initialize.mdx similarity index 100% rename from docs/sdk/pnp/android/initialize.mdx rename to docs/sdk/mobile/pnp/android/initialize.mdx diff --git a/docs/sdk/pnp/android/install.mdx b/docs/sdk/mobile/pnp/android/install.mdx similarity index 100% rename from docs/sdk/pnp/android/install.mdx rename to docs/sdk/mobile/pnp/android/install.mdx diff --git a/docs/sdk/pnp/android/mfa.mdx b/docs/sdk/mobile/pnp/android/mfa.mdx similarity index 100% rename from docs/sdk/pnp/android/mfa.mdx rename to docs/sdk/mobile/pnp/android/mfa.mdx diff --git a/docs/sdk/pnp/android/usage.mdx b/docs/sdk/mobile/pnp/android/usage.mdx similarity index 100% rename from docs/sdk/pnp/android/usage.mdx rename to docs/sdk/mobile/pnp/android/usage.mdx diff --git a/docs/sdk/pnp/android/whitelabel.mdx b/docs/sdk/mobile/pnp/android/whitelabel.mdx similarity index 100% rename from docs/sdk/pnp/android/whitelabel.mdx rename to docs/sdk/mobile/pnp/android/whitelabel.mdx diff --git a/docs/sdk/pnp/flutter/custom-authentication.mdx b/docs/sdk/mobile/pnp/flutter/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/flutter/custom-authentication.mdx rename to docs/sdk/mobile/pnp/flutter/custom-authentication.mdx diff --git a/docs/sdk/pnp/flutter/dapp-share.mdx b/docs/sdk/mobile/pnp/flutter/dapp-share.mdx similarity index 100% rename from docs/sdk/pnp/flutter/dapp-share.mdx rename to docs/sdk/mobile/pnp/flutter/dapp-share.mdx diff --git a/docs/sdk/pnp/flutter/examples.mdx b/docs/sdk/mobile/pnp/flutter/examples.mdx similarity index 100% rename from docs/sdk/pnp/flutter/examples.mdx rename to docs/sdk/mobile/pnp/flutter/examples.mdx diff --git a/docs/sdk/pnp/flutter/flutter.mdx b/docs/sdk/mobile/pnp/flutter/flutter.mdx similarity index 100% rename from docs/sdk/pnp/flutter/flutter.mdx rename to docs/sdk/mobile/pnp/flutter/flutter.mdx diff --git a/docs/sdk/pnp/flutter/initialize.mdx b/docs/sdk/mobile/pnp/flutter/initialize.mdx similarity index 100% rename from docs/sdk/pnp/flutter/initialize.mdx rename to docs/sdk/mobile/pnp/flutter/initialize.mdx diff --git a/docs/sdk/pnp/flutter/install.mdx b/docs/sdk/mobile/pnp/flutter/install.mdx similarity index 100% rename from docs/sdk/pnp/flutter/install.mdx rename to docs/sdk/mobile/pnp/flutter/install.mdx diff --git a/docs/sdk/pnp/flutter/mfa.mdx b/docs/sdk/mobile/pnp/flutter/mfa.mdx similarity index 100% rename from docs/sdk/pnp/flutter/mfa.mdx rename to docs/sdk/mobile/pnp/flutter/mfa.mdx diff --git a/docs/sdk/pnp/flutter/usage.mdx b/docs/sdk/mobile/pnp/flutter/usage.mdx similarity index 100% rename from docs/sdk/pnp/flutter/usage.mdx rename to docs/sdk/mobile/pnp/flutter/usage.mdx diff --git a/docs/sdk/pnp/flutter/whitelabel.mdx b/docs/sdk/mobile/pnp/flutter/whitelabel.mdx similarity index 100% rename from docs/sdk/pnp/flutter/whitelabel.mdx rename to docs/sdk/mobile/pnp/flutter/whitelabel.mdx diff --git a/docs/sdk/pnp/ios/custom-authentication.mdx b/docs/sdk/mobile/pnp/ios/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/ios/custom-authentication.mdx rename to docs/sdk/mobile/pnp/ios/custom-authentication.mdx diff --git a/docs/sdk/pnp/ios/dapp-share.mdx b/docs/sdk/mobile/pnp/ios/dapp-share.mdx similarity index 100% rename from docs/sdk/pnp/ios/dapp-share.mdx rename to docs/sdk/mobile/pnp/ios/dapp-share.mdx diff --git a/docs/sdk/pnp/ios/examples.mdx b/docs/sdk/mobile/pnp/ios/examples.mdx similarity index 100% rename from docs/sdk/pnp/ios/examples.mdx rename to docs/sdk/mobile/pnp/ios/examples.mdx diff --git a/docs/sdk/pnp/ios/initialize.mdx b/docs/sdk/mobile/pnp/ios/initialize.mdx similarity index 100% rename from docs/sdk/pnp/ios/initialize.mdx rename to docs/sdk/mobile/pnp/ios/initialize.mdx diff --git a/docs/sdk/pnp/ios/install.mdx b/docs/sdk/mobile/pnp/ios/install.mdx similarity index 100% rename from docs/sdk/pnp/ios/install.mdx rename to docs/sdk/mobile/pnp/ios/install.mdx diff --git a/docs/sdk/pnp/ios/ios.mdx b/docs/sdk/mobile/pnp/ios/ios.mdx similarity index 100% rename from docs/sdk/pnp/ios/ios.mdx rename to docs/sdk/mobile/pnp/ios/ios.mdx diff --git a/docs/sdk/pnp/ios/mfa.mdx b/docs/sdk/mobile/pnp/ios/mfa.mdx similarity index 100% rename from docs/sdk/pnp/ios/mfa.mdx rename to docs/sdk/mobile/pnp/ios/mfa.mdx diff --git a/docs/sdk/pnp/ios/usage.mdx b/docs/sdk/mobile/pnp/ios/usage.mdx similarity index 100% rename from docs/sdk/pnp/ios/usage.mdx rename to docs/sdk/mobile/pnp/ios/usage.mdx diff --git a/docs/sdk/pnp/ios/whitelabel.mdx b/docs/sdk/mobile/pnp/ios/whitelabel.mdx similarity index 100% rename from docs/sdk/pnp/ios/whitelabel.mdx rename to docs/sdk/mobile/pnp/ios/whitelabel.mdx diff --git a/docs/sdk/pnp/react-native/account-abstraction.mdx b/docs/sdk/mobile/pnp/react-native/account-abstraction.mdx similarity index 100% rename from docs/sdk/pnp/react-native/account-abstraction.mdx rename to docs/sdk/mobile/pnp/react-native/account-abstraction.mdx diff --git a/docs/sdk/pnp/react-native/custom-authentication.mdx b/docs/sdk/mobile/pnp/react-native/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/react-native/custom-authentication.mdx rename to docs/sdk/mobile/pnp/react-native/custom-authentication.mdx diff --git a/docs/sdk/pnp/react-native/dapp-share.mdx b/docs/sdk/mobile/pnp/react-native/dapp-share.mdx similarity index 100% rename from docs/sdk/pnp/react-native/dapp-share.mdx rename to docs/sdk/mobile/pnp/react-native/dapp-share.mdx diff --git a/docs/sdk/pnp/react-native/examples.mdx b/docs/sdk/mobile/pnp/react-native/examples.mdx similarity index 100% rename from docs/sdk/pnp/react-native/examples.mdx rename to docs/sdk/mobile/pnp/react-native/examples.mdx diff --git a/docs/sdk/pnp/react-native/initialize.mdx b/docs/sdk/mobile/pnp/react-native/initialize.mdx similarity index 100% rename from docs/sdk/pnp/react-native/initialize.mdx rename to docs/sdk/mobile/pnp/react-native/initialize.mdx diff --git a/docs/sdk/pnp/react-native/install.mdx b/docs/sdk/mobile/pnp/react-native/install.mdx similarity index 100% rename from docs/sdk/pnp/react-native/install.mdx rename to docs/sdk/mobile/pnp/react-native/install.mdx diff --git a/docs/sdk/pnp/react-native/mfa.mdx b/docs/sdk/mobile/pnp/react-native/mfa.mdx similarity index 100% rename from docs/sdk/pnp/react-native/mfa.mdx rename to docs/sdk/mobile/pnp/react-native/mfa.mdx diff --git a/docs/sdk/pnp/react-native/providers/aa-provider.mdx b/docs/sdk/mobile/pnp/react-native/providers/aa-provider.mdx similarity index 100% rename from docs/sdk/pnp/react-native/providers/aa-provider.mdx rename to docs/sdk/mobile/pnp/react-native/providers/aa-provider.mdx diff --git a/docs/sdk/pnp/react-native/providers/common.mdx b/docs/sdk/mobile/pnp/react-native/providers/common.mdx similarity index 100% rename from docs/sdk/pnp/react-native/providers/common.mdx rename to docs/sdk/mobile/pnp/react-native/providers/common.mdx diff --git a/docs/sdk/pnp/react-native/providers/evm.mdx b/docs/sdk/mobile/pnp/react-native/providers/evm.mdx similarity index 100% rename from docs/sdk/pnp/react-native/providers/evm.mdx rename to docs/sdk/mobile/pnp/react-native/providers/evm.mdx diff --git a/docs/sdk/pnp/react-native/providers/providers.mdx b/docs/sdk/mobile/pnp/react-native/providers/providers.mdx similarity index 100% rename from docs/sdk/pnp/react-native/providers/providers.mdx rename to docs/sdk/mobile/pnp/react-native/providers/providers.mdx diff --git a/docs/sdk/pnp/react-native/providers/solana.mdx b/docs/sdk/mobile/pnp/react-native/providers/solana.mdx similarity index 100% rename from docs/sdk/pnp/react-native/providers/solana.mdx rename to docs/sdk/mobile/pnp/react-native/providers/solana.mdx diff --git a/docs/sdk/pnp/react-native/providers/xrpl.mdx b/docs/sdk/mobile/pnp/react-native/providers/xrpl.mdx similarity index 100% rename from docs/sdk/pnp/react-native/providers/xrpl.mdx rename to docs/sdk/mobile/pnp/react-native/providers/xrpl.mdx diff --git a/docs/sdk/pnp/react-native/react-native.mdx b/docs/sdk/mobile/pnp/react-native/react-native.mdx similarity index 100% rename from docs/sdk/pnp/react-native/react-native.mdx rename to docs/sdk/mobile/pnp/react-native/react-native.mdx diff --git a/docs/sdk/pnp/react-native/usage.mdx b/docs/sdk/mobile/pnp/react-native/usage.mdx similarity index 100% rename from docs/sdk/pnp/react-native/usage.mdx rename to docs/sdk/mobile/pnp/react-native/usage.mdx diff --git a/docs/sdk/pnp/react-native/whitelabel.mdx b/docs/sdk/mobile/pnp/react-native/whitelabel.mdx similarity index 100% rename from docs/sdk/pnp/react-native/whitelabel.mdx rename to docs/sdk/mobile/pnp/react-native/whitelabel.mdx diff --git a/docs/sdk/sfa/sfa-android/sfa-android.mdx b/docs/sdk/mobile/sfa/android/android.mdx similarity index 100% rename from docs/sdk/sfa/sfa-android/sfa-android.mdx rename to docs/sdk/mobile/sfa/android/android.mdx diff --git a/docs/sdk/sfa/sfa-android/authentication.mdx b/docs/sdk/mobile/sfa/android/authentication.mdx similarity index 100% rename from docs/sdk/sfa/sfa-android/authentication.mdx rename to docs/sdk/mobile/sfa/android/authentication.mdx diff --git a/docs/sdk/sfa/sfa-android/examples.mdx b/docs/sdk/mobile/sfa/android/examples.mdx similarity index 100% rename from docs/sdk/sfa/sfa-android/examples.mdx rename to docs/sdk/mobile/sfa/android/examples.mdx diff --git a/docs/sdk/sfa/sfa-android/initialize.mdx b/docs/sdk/mobile/sfa/android/initialize.mdx similarity index 100% rename from docs/sdk/sfa/sfa-android/initialize.mdx rename to docs/sdk/mobile/sfa/android/initialize.mdx diff --git a/docs/sdk/sfa/sfa-android/install.mdx b/docs/sdk/mobile/sfa/android/install.mdx similarity index 100% rename from docs/sdk/sfa/sfa-android/install.mdx rename to docs/sdk/mobile/sfa/android/install.mdx diff --git a/docs/sdk/sfa/sfa-android/usage.mdx b/docs/sdk/mobile/sfa/android/usage.mdx similarity index 100% rename from docs/sdk/sfa/sfa-android/usage.mdx rename to docs/sdk/mobile/sfa/android/usage.mdx diff --git a/docs/sdk/sfa/sfa-flutter/authentication.mdx b/docs/sdk/mobile/sfa/flutter/authentication.mdx similarity index 100% rename from docs/sdk/sfa/sfa-flutter/authentication.mdx rename to docs/sdk/mobile/sfa/flutter/authentication.mdx diff --git a/docs/sdk/sfa/sfa-flutter/examples.mdx b/docs/sdk/mobile/sfa/flutter/examples.mdx similarity index 100% rename from docs/sdk/sfa/sfa-flutter/examples.mdx rename to docs/sdk/mobile/sfa/flutter/examples.mdx diff --git a/docs/sdk/sfa/sfa-flutter/sfa-flutter.mdx b/docs/sdk/mobile/sfa/flutter/flutter.mdx similarity index 100% rename from docs/sdk/sfa/sfa-flutter/sfa-flutter.mdx rename to docs/sdk/mobile/sfa/flutter/flutter.mdx diff --git a/docs/sdk/sfa/sfa-flutter/initialize.mdx b/docs/sdk/mobile/sfa/flutter/initialize.mdx similarity index 100% rename from docs/sdk/sfa/sfa-flutter/initialize.mdx rename to docs/sdk/mobile/sfa/flutter/initialize.mdx diff --git a/docs/sdk/sfa/sfa-flutter/install.mdx b/docs/sdk/mobile/sfa/flutter/install.mdx similarity index 100% rename from docs/sdk/sfa/sfa-flutter/install.mdx rename to docs/sdk/mobile/sfa/flutter/install.mdx diff --git a/docs/sdk/sfa/sfa-flutter/usage.mdx b/docs/sdk/mobile/sfa/flutter/usage.mdx similarity index 100% rename from docs/sdk/sfa/sfa-flutter/usage.mdx rename to docs/sdk/mobile/sfa/flutter/usage.mdx diff --git a/docs/sdk/sfa/sfa-ios/authentication.mdx b/docs/sdk/mobile/sfa/ios/authentication.mdx similarity index 100% rename from docs/sdk/sfa/sfa-ios/authentication.mdx rename to docs/sdk/mobile/sfa/ios/authentication.mdx diff --git a/docs/sdk/sfa/sfa-ios/examples.mdx b/docs/sdk/mobile/sfa/ios/examples.mdx similarity index 100% rename from docs/sdk/sfa/sfa-ios/examples.mdx rename to docs/sdk/mobile/sfa/ios/examples.mdx diff --git a/docs/sdk/sfa/sfa-ios/initialize.mdx b/docs/sdk/mobile/sfa/ios/initialize.mdx similarity index 100% rename from docs/sdk/sfa/sfa-ios/initialize.mdx rename to docs/sdk/mobile/sfa/ios/initialize.mdx diff --git a/docs/sdk/sfa/sfa-ios/install.mdx b/docs/sdk/mobile/sfa/ios/install.mdx similarity index 100% rename from docs/sdk/sfa/sfa-ios/install.mdx rename to docs/sdk/mobile/sfa/ios/install.mdx diff --git a/docs/sdk/sfa/sfa-ios/sfa-ios.mdx b/docs/sdk/mobile/sfa/ios/ios.mdx similarity index 100% rename from docs/sdk/sfa/sfa-ios/sfa-ios.mdx rename to docs/sdk/mobile/sfa/ios/ios.mdx diff --git a/docs/sdk/sfa/sfa-ios/usage.mdx b/docs/sdk/mobile/sfa/ios/usage.mdx similarity index 100% rename from docs/sdk/sfa/sfa-ios/usage.mdx rename to docs/sdk/mobile/sfa/ios/usage.mdx diff --git a/docs/sdk/sfa/sfa-js/account-abstraction.mdx b/docs/sdk/mobile/sfa/react-native/account-abstraction.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/account-abstraction.mdx rename to docs/sdk/mobile/sfa/react-native/account-abstraction.mdx diff --git a/docs/sdk/sfa/sfa-js/authentication.mdx b/docs/sdk/mobile/sfa/react-native/authentication.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/authentication.mdx rename to docs/sdk/mobile/sfa/react-native/authentication.mdx diff --git a/docs/sdk/sfa/sfa-js/examples.mdx b/docs/sdk/mobile/sfa/react-native/examples.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/examples.mdx rename to docs/sdk/mobile/sfa/react-native/examples.mdx diff --git a/docs/sdk/sfa/sfa-js/initialize.mdx b/docs/sdk/mobile/sfa/react-native/initialize.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/initialize.mdx rename to docs/sdk/mobile/sfa/react-native/initialize.mdx diff --git a/docs/sdk/sfa/sfa-js/initiate-topup.mdx b/docs/sdk/mobile/sfa/react-native/initiate-topup.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/initiate-topup.mdx rename to docs/sdk/mobile/sfa/react-native/initiate-topup.mdx diff --git a/docs/sdk/sfa/sfa-js/install.mdx b/docs/sdk/mobile/sfa/react-native/install.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/install.mdx rename to docs/sdk/mobile/sfa/react-native/install.mdx diff --git a/docs/sdk/sfa/sfa-js/providers/aa-provider.mdx b/docs/sdk/mobile/sfa/react-native/providers/aa-provider.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/providers/aa-provider.mdx rename to docs/sdk/mobile/sfa/react-native/providers/aa-provider.mdx diff --git a/docs/sdk/sfa/sfa-js/providers/common.mdx b/docs/sdk/mobile/sfa/react-native/providers/common.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/providers/common.mdx rename to docs/sdk/mobile/sfa/react-native/providers/common.mdx diff --git a/docs/sdk/sfa/sfa-js/providers/evm.mdx b/docs/sdk/mobile/sfa/react-native/providers/evm.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/providers/evm.mdx rename to docs/sdk/mobile/sfa/react-native/providers/evm.mdx diff --git a/docs/sdk/sfa/sfa-js/providers/providers.mdx b/docs/sdk/mobile/sfa/react-native/providers/providers.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/providers/providers.mdx rename to docs/sdk/mobile/sfa/react-native/providers/providers.mdx diff --git a/docs/sdk/sfa/sfa-js/providers/solana.mdx b/docs/sdk/mobile/sfa/react-native/providers/solana.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/providers/solana.mdx rename to docs/sdk/mobile/sfa/react-native/providers/solana.mdx diff --git a/docs/sdk/sfa/sfa-js/providers/xrpl.mdx b/docs/sdk/mobile/sfa/react-native/providers/xrpl.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/providers/xrpl.mdx rename to docs/sdk/mobile/sfa/react-native/providers/xrpl.mdx diff --git a/docs/sdk/sfa/sfa-js/sfa-js.mdx b/docs/sdk/mobile/sfa/react-native/react-native.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/sfa-js.mdx rename to docs/sdk/mobile/sfa/react-native/react-native.mdx diff --git a/docs/sdk/pnp/web/modal/show-wallet-connect.mdx b/docs/sdk/mobile/sfa/react-native/show-wallet-connect.mdx similarity index 100% rename from docs/sdk/pnp/web/modal/show-wallet-connect.mdx rename to docs/sdk/mobile/sfa/react-native/show-wallet-connect.mdx diff --git a/docs/sdk/sfa/sfa-js/usage.mdx b/docs/sdk/mobile/sfa/react-native/usage.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/usage.mdx rename to docs/sdk/mobile/sfa/react-native/usage.mdx diff --git a/docs/sdk/pnp/web/wallet-services/usage.mdx b/docs/sdk/mobile/sfa/react-native/wallet-services/usage.mdx similarity index 100% rename from docs/sdk/pnp/web/wallet-services/usage.mdx rename to docs/sdk/mobile/sfa/react-native/wallet-services/usage.mdx diff --git a/docs/sdk/sfa/sfa-js/wallet-services/wallet-services-hooks.mdx b/docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services-hooks.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/wallet-services/wallet-services-hooks.mdx rename to docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services-hooks.mdx diff --git a/docs/sdk/sfa/sfa-js/wallet-services/wallet-services.mdx b/docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services.mdx similarity index 100% rename from docs/sdk/sfa/sfa-js/wallet-services/wallet-services.mdx rename to docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services.mdx diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx index 8e20378d3..dacc7eec2 100644 --- a/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx +++ b/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx @@ -1,6 +1,6 @@ --- title: EIP1193 (EVM) Signing Provider for MPC Core Kit - +sidebar_label: EIP1193 (EVM) Signing Provider description: "EIP1193 Signing Provider for EVM Compatible Chains | Documentation - Web3Auth" --- diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx index 8e20378d3..dacc7eec2 100644 --- a/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx +++ b/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx @@ -1,6 +1,6 @@ --- title: EIP1193 (EVM) Signing Provider for MPC Core Kit - +sidebar_label: EIP1193 (EVM) Signing Provider description: "EIP1193 Signing Provider for EVM Compatible Chains | Documentation - Web3Auth" --- diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit.mdx new file mode 100644 index 000000000..1621a6317 --- /dev/null +++ b/docs/sdk/mpc-core-kit/mpc-core-kit.mdx @@ -0,0 +1,13 @@ +--- +title: Explore Web3Auth MPC Core Kit +hide_table_of_contents: true +sidebar_label: MPC Core Kit +displayed_sidebar: sdk_mpc_core_kit_js +image: "images/docs-meta-cards/sdk-reference-card.png" +description: "MPC Core Kit | Documentation - Web3Auth" +--- + +import { mpccorekit } from "@site/src/components/SDKReferenceCards"; +import Tiles from "@theme/Tiles"; + +{mpccorekit} diff --git a/docs/sdk/pnp/web/adapters/adapters.mdx b/docs/sdk/pnp/web/adapters/adapters.mdx deleted file mode 100644 index 3f5f2447f..000000000 --- a/docs/sdk/pnp/web/adapters/adapters.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Adapters for Web3Auth PnP Web SDKs -sidebar_label: Overview -description: "Web3Auth PnP Web Adapter SDKs | Documentation - Web3Auth" ---- - -Adapters are essentially connectors between Web3Auth and the underlying wallet provider. For -example, an adapter for connecting with torus wallet is available under web3auth as -[@web3auth/torus-evm-adapter](/sdk/pnp/web/adapters/torus-evm). Every adapter follows a common -interface which is required by Web3Auth to communicate with the wallet. - -An adapter emits certain events like `CONNECTED`, `CONNECTING` and `DISCONNECTED` etc during login -lifecycle of a user. Each adapter exposes provider on successful user login that can be used to -invoke RPC calls on wallet and on connected blockchain. - -Hence, adapters are needed to connect your Web3Auth instance to a wallet provider. Web3Auth by -default contains a pre-configured list of login adapters. It also provides flexibility to add/remove -adapters or to use some existing adapter with custom configurations. To configure an adapter create -an instance of the adapter by using its corresponding package and pass the returned adapter instance -in the `configureAdapter` function. - -For example, to configure auth adapter, - -- Import the `AuthAdapter` from the `@web3auth/auth-adapter` package. -- Create an instance of the adapter along with the configuration -- Pass the returned instance to `web3auth.configureAdapter` as shown in the example below. - -```tsx -import { AuthAdapter } from "@web3auth/auth-adapter"; - -const authAdapter = new AuthAdapter({ - adapterSettings: { - network: "sapphire_mainnet", - uxMode: "popup", - }, -}); - -web3auth.configureAdapter(authAdapter); -``` - -## Currently Available Wallet Adapters - -By default Web3Auth's modal UI supports a set of default adapters depending on the `authMode` being -used. By default, Web3Auth requires basic configuration `client_id`, and registering a redirect if -you are using CustomAuth adapter from the dashboard. - -The table below summarizes all the available adapters and their properties - -| Adapter | ChainNamespace | Default | Package Name | -| ------------------------ | ----------------- | ------- | -------------------------------------------------------------------------------- | -| `auth` | `EIP155`,`SOLANA` | `YES` | [`@web3auth/auth-adapter`](/sdk/pnp/web/adapters/auth) | -| `torus-evm` | `EIP155` | `NO` | [`@web3auth/torus-evm-adapter`](/sdk/pnp/web/adapters/torus-evm) | -| `torus-solana` | `SOLANA` | `No` | [`@web3auth/torus-solana-adapter`](/sdk/pnp/web/adapters/torus-solana) | -| `walletconnect-v2` | `EIP155` | `NO` | [`@web3auth/wallet-connect-v2-adapter`](/sdk/pnp/web/adapters/wallet-connect-v2) | -| `coinbase` | `EIP155` | `NO` | [`@web3auth/coinbase`](/sdk/pnp/web/adapters/coinbase) | -| `default-evm-adapter` | `EIP155` | `NO` | [`@web3auth/default-evm-adapter`](/sdk/pnp/web/adapters) | -| `default-solana-adapter` | `SOLANA` | `NO` | [`@web3auth/default-solana-adapter`](/sdk/pnp/web/adapters) | - -## Common Configuration Interfaces - -```tsx -type CustomChainConfig = { - chainNamespace: ChainNamespaceType; - /** - * The chain id of the chain - */ - chainId: string; - /** - * RPC target Url for the chain - */ - rpcTarget: string; - /** - * Display Name for the chain - */ - displayName: string; - /** - * Url of the block explorer - */ - blockExplorerUrl: string; - /** - * Default currency ticker of the network (e.g: ETH) - */ - ticker: string; - /** - * Name for currency ticker (e.g: `Ethereum`) - */ - tickerName: string; - - /** - * Logo of the chain - */ - logo: stirng; -}; -``` - -:::warning - -If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: diff --git a/docs/sdk/pnp/web/adapters/auth.mdx b/docs/sdk/pnp/web/adapters/auth.mdx deleted file mode 100644 index 4efd0e2d2..000000000 --- a/docs/sdk/pnp/web/adapters/auth.mdx +++ /dev/null @@ -1,631 +0,0 @@ ---- -title: Auth Adapter for Social Logins -sidebar_label: Auth (Social Logins) -description: - "Web3Auth PnP Web Adapter SDKs - Auth Adapter for Social Logins | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx"; -import AuthOptions from "@site/src/common/sdk/pnp/web/_auth-options.mdx"; -import LoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-params.mdx"; -import AuthWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx"; -import AuthWhiteLabelExample from "@site/src/common/sdk/pnp/web/_auth-whitelabel-example.mdx"; -import LoginConfig from "@site/src/common/sdk/pnp/web/_login-config.mdx"; -import ConnectTo from "@site/src/common/sdk/pnp/web/_connect-to.mdx"; -import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options.mdx"; -import CustomAuthenticationCoreExample from "@site/src/common/sdk/pnp/web/_custom-authentication-core-example.mdx"; -import CustomAuthenticationWeb3AuthExample from "@site/src/common/sdk/pnp/web/_custom-authentication-web3auth-example.mdx"; -import ConnectToExample from "@site/src/common/sdk/pnp/web/_connect-to-example.mdx"; -import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx"; - -## [`@web3auth/auth-adapter`](https://npmjs.com/package/@web3auth/auth-adapter) - -The default adapter of Web3Auth is the `auth-adapter`. This adapter is a wrapper around the -[`auth`](https://www.npmjs.com/package/@web3auth/auth) library from Web3Auth (previously Torus) and -enables the main social login features of Web3Auth. By default, Web3Auth has certain configuration -set to enable a quick integration, however, for customising features, like Whitelabel, Custom -Authentication, etc. you need to customise the Auth Adapter. With the Auth Adapter package installed -and instantiated, you can explore a number of options and can customise the login experience of the -user as per your needs. - -## Basic Details - -#### Adapter Name: `auth` - -#### Package Name: [`@web3auth/auth-adapter`](https://npmjs.com/package/@web3auth/auth-adapter) - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/auth-adapter -``` - -## Instantiation - -#### Import the `AuthAdapter` class from `@web3auth/auth-adapter` - -```tsx -import { AuthAdapter } from "@web3auth/auth-adapter"; -``` - -#### Assign the `AuthAdapter` class to a variable - -```tsx -const authAdapter = new AuthAdapter(AuthAdapterOptions); -``` - -This AuthAdapter constructor takes an object with `AuthAdapterOptions` as input. - -## Arguments - -#### `AuthAdapterOptions` - - - - - -| Parameter | type | -| --------------------- | ------------------------------------- | -| `adapterSettings?` | [authOptions](#auth-adapter-settings) | -| `loginSettings?` | [LoginSettings](#loginsettings) | -| `privateKeyProvider?` | [PrivateKeyProvider](#loginsettings) | - - - - - -```tsx -export interface AuthAdapterOptions extends BaseAdapterSettings { - adapterSettings?: MakeOptional; - loginSettings?: LoginSettings; - privateKeyProvider?: PrivateKeyProvider; -} -``` - - - - - -### Auth Adapter Settings - -#### `adapterSettings` - - - -### Login Settings - -#### `loginSettings` - -:::warning - -While you can pass your `chainConfig` to `AuthAdapter`, it is not required for `web3auth/no-modal` -ie. The Web3Auth Plug and Play No Modal package, since you can directly pass `loginParams` over to -the `connectTo` function. - -Either way, both of these methods will work the same. Please note that the `connectTo` function -params will override the `AuthAdapter` settings. - -Read more about how to pass `loginParams` to `connectTo` in its respective section: -[`web3auth/no-modal`](/sdk/pnp/web/no-modal/usage#logging-in-the-user) - -::: - - - -## Multi-Factor Authentication - -At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an -extra layer of protection that verifies your identity when accessing your account. To ensure -ownership, you must provide two or more different backup factors. You have the option to choose from -the device, social, backup factor (seed phrase), and password factors to guarantee access to your -Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into -three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can -easily recover your account if you lose access to your original device or help log into a new -device. - -For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the -MFA screen by setting the `mfaLevel` argument. You can enable or disable a backup factor and change -their order. Currently, there are four values for `mfaLevel`: - -- `default`: presents the MFA screen every third login -- `optional`: presents the MFA screen on every login, but you can skip it -- `mandatory`: make it mandatory to set up MFA after login -- `none`: skips the MFA setup screen - -We offer the following backup factors under `mfaSettings`: - - - -- `deviceShareFactor`, -- `backUpShareFactor`, -- `socialBackupFactor`, -- `passwordFactor`, -- `authenticatorFactor`, and -- `passkeysFactor`. - -### Example - -```tsx -const authAdapter = new AuthAdapter({ - loginSettings: { - mfaLevel: "optional", // default, optional, mandatory, none - }, - adapterSettings: { - // SCALE and above plan only feature - mfaSettings: { - deviceShareFactor: { - enable: true, - priority: 1, - mandatory: true, - }, - backUpShareFactor: { - enable: true, - priority: 2, - mandatory: false, - }, - socialBackupFactor: { - enable: true, - priority: 3, - mandatory: false, - }, - passwordFactor: { - enable: true, - priority: 4, - mandatory: false, - }, - authenticatorFactor: { - enable: true, - priority: 5, - mandatory: false, - }, - passkeysFactor: { - enable: true, - priority: 6, - mandatory: false, - }, - }, - }, -}); -``` - -## Whitelabel - -Web3Auth's Social Logins and Email Login run using the Auth Flow. The whole Auth user experience can -also be whitelabeled using Auth Adapter settings. For this, you need to pass on the `whiteLabel` -configuration parameter to the `adapterSettings` property of the `auth-adapter`. - - - -### Example - - - -## Custom Authentication - -While instantiating the Auth Adapter, you can pass some configuration objects to the constructor. -One of these configurations is the `adapterSettings` configuration which enables you to make changes -in the adapter, enabling you to do things like Whitelabeling and Custom Authentication among other -things. - -#### `loginConfig` - -The `loginConfig` parameter of `adapterSettings` in `auth-adapter` contains the following -properties: - - - -### Custom Authentication within Web3Auth Modal - -When we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the `loginConfig` should -correspond to the socials mentioned in the modal. This means you can use your own authentication -services for the following services: - -`google` | `facebook` | `twitter` | `reddit` | `discord` | `twitch` | `apple` | `line` | `github` | -`kakao` | `linkedin` | `weibo` | `wechat` | `passwordless` - -:::info - -You can customize all or a few of the social logins and others will remain default. You can also -remove the ones you don't want using the whitelabeling option. - -::: - -#### Example - - - -### Logging in through your Custom JWT Token - -When we are using `@web3auth/no-modal`, ie. Web3Auth Plug and Play No Modal SDK, we have the option -to use the `connectTo` function, which enables you to customize the login process according to the -parameters you have for your custom authentication service. - - - -:::tip - -Know more about the `connectTo` function in the -[`Usage SDK Reference`](/sdk/pnp/web/no-modal/usage#logging-in-the-user) - -::: - -Further, to enable Custom Authentication, the `loginParams` parameter takes in another object called -`extraLoginOptions` which contains the following properties: - - - -#### Example - - - - -## Initialization - -Finally, once all the configurations are set, you need to initialize the Auth Adapter. - -```tsx -web3auth.configureAdapter(authAdapter); -``` - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. This function takes the below-mentioned parameters as well as - -[Auth Adapter Settings](#auth-adapter-settings). - -### Arguments - - - - - -`AuthOptions` - -| Parameter | type | description | -| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `clientId` | `string` | Your projectId/clientId from the [dashboard](https://dashboard.web3auth.io) | -| `network` | `WEB3AUTH_NETWORK_TYPE` | Network specifies the web3auth network to be used. | -| `buildEnv?` | `BUILD_ENV_TYPE` | This parameter will be used to change the build environment of auth sdk. | -| `redirectUrl?` | `string` | redirectUrl is the dapp's url where user will be redirected after login. Register this url at "https://dashboard.web3auth.io" else initialization will give error. | -| `uxMode?` | `UX_MODE_TYPE` | Either of the two `uxMode` values: `popup` or `redirect`. Use of `REDIRECT` mode is recommended in browsers where popups might get blocked. | -| `replaceUrlOnRedirect?` | `boolean` | `replaceUrlOnRedirect` removes the params from the redirected url after login | -| `originData?` | `OriginData` | `originData` contains a signature of dapp's origin url which is generated using project's secret. | -| `loginConfig?` | `LoginConfig` | `loginConfig` is key value map where each key should be a valid loginProvider and value should be custom configuration for that loginProvider. | -| `webauthnTransports?` | `AuthenticatorTransport[]` | `webauthnTransports` enables you to configure the transport type user can use for saving their share. | -| `whiteLabel?` | `WhiteLabelData` | `whiteLabel` is for whitelabling default auth modal. | -| `storageServerUrl?` | `string` | `storageServerUrl` specifies a custom storage server url | -| `storageKey?` | `"session" \| "local"` | `storageKey` setting to `local` will persist social login session across browser tabs. | -| `sessionTime?` | `number` | How long should a login session last at a minimum in seconds. Maximum value of sessionTime can be 7 \* 86400 (30 days) | -| `mfaSettings?` | `MfaSettings` | This parameter will be used to enable mfa factors and set priority on UI listing. | -| `useMpc?` | `boolean` | This parameter will be used to use auth mpc | -| `useCoreKitKey?` | `boolean` | This parameter will be used to select core kit key. | - -`BaseAdapterSettings` - -| Parameter | type | -| ----------------- | ----------------------- | -| `clientId` | `string` | -| `sessionTime` | `number` | -| `chainConfig` | `CustomChainConfig` | -| `web3AuthNetwork` | `WEB3AUTH_NETWORK_TYPE` | -| `useCoreKitKey` | `boolean` | - - - - - -```tsx -setAdapterSettings(adapterSettings: Partial & { - privateKeyProvider?: PrivateKeyProvider; -}): void; - -export type PrivateKeyProvider = IBaseProvider; - -export type AuthOptions = { - /** - * You can get your clientId/projectId by registering your - * dapp on {@link "https://dashboard.web3auth.io"| developer dashboard} - */ - clientId: string; - /** - * network specifies the web3auth network to be used. - */ - network: WEB3AUTH_NETWORK_TYPE; - /** - * This parameter will be used to change the build environment of auth sdk. - * @defaultValue production - */ - buildEnv?: BUILD_ENV_TYPE; - /** - * redirectUrl is the dapp's url where user will be redirected after login. - * - * @remarks - * Register this url at {@link "https://dashboard.web3auth.io"| developer dashboard} - * else initialization will give error. - */ - redirectUrl?: string; - /** - * two uxModes are supported:- - * - `'POPUP'`: In this uxMode, a popup will be shown to user for login. - * - `'REDIRECT'`: In this uxMode, user will be redirected to a new window tab for login. - * - * @defaultValue `'POPUP'` - * @remarks - * - * Use of `'REDIRECT'` mode is recommended in browsers where popups might get blocked. - */ - uxMode?: UX_MODE_TYPE; - /** - * replaceUrlOnRedirect removes the params from the redirected url after login - * - * @defaultValue true - */ - replaceUrlOnRedirect?: boolean; - /** - * originData is used to verify the origin of dapp by iframe. - * - * @internal - * @remarks - * You don't have to pass originData explicitly if you have registered your dapp at - * {@link "https://dashboard.web3auth.io"| developer dashboard}. - * - * originData contains a signature of dapp's origin url which is generated using - * project's secret. - */ - originData?: OriginData; - /** - * loginConfig enables you to pass your own login verifiers configuration for various - * loginProviders. - * - * loginConfig is key value map where each key should be a valid loginProvider and value - * should be custom configuration for that loginProvider - * - * @remarks - * You can deploy your own verifiers from {@link "https://dashboard.web3auth.io"| developer dashboard} - * to use here. - * - */ - loginConfig?: LoginConfig; - /** - * webauthnTransport enables you to configure the transport type user can use - * for saving their share. - * - * @defaultValue ["internal"] - * - * @remarks - * This is only available for v1 users. - */ - webauthnTransports?: AuthenticatorTransport[]; - /** - * sdkUrl is for internal development use only and is used to override the - * `network` parameter. - * @internal - */ - sdkUrl?: string; - /** - * dashboardUrl is for internal development use only and is used to override the - * `buildEnv` parameter. - * @internal - */ - dashboardUrl?: string; - /** - * options for whitelabling default auth modal. - */ - whiteLabel?: WhiteLabelData; - /** - * Specify a custom storage server url - * @defaultValue https://session.web3auth.io - * @internal - */ - storageServerUrl?: string; - /** - * setting to "local" will persist social login session across browser tabs. - * - * @defaultValue "local" - */ - storageKey?: "session" | "local"; - /** - * How long should a login session last at a minimum in seconds - * - * @defaultValue 86400 seconds - * @remarks Max value of sessionTime can be 7 * 86400 (30 days) - */ - sessionTime?: number; - /** - * This option is for internal use only in torus wallet and has no effect - * on user's login on other dapps. - * @internal - */ - sessionNamespace?: string; - /** - * This parameter will be used to enable mfa factors and set priority on UI listing. - * List of factors available - * backUpShareFactor | socialFactor | passwordFactor | authenticatorFactor - * @defaultValue false - */ - mfaSettings?: MfaSettings; - /** - * This parameter will be used to use auth mpc - * @defaultValue false - */ - useMpc?: boolean; - /** - * This parameter will be used to select core kit key. - * @defaultValue false - */ - useCoreKitKey?: boolean; -}; - -export interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; - useCoreKitKey?: boolean; -} -``` - - - - - -## Example - -### `@web3auth/modal` - -```tsx -const authAdapter = new AuthAdapter({ - adapterSettings: { - uxMode: "redirect", // "redirect" | "popup" - whiteLabel: { - logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg", - logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg", - defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr - mode: "dark", // whether to enable dark, light or auto mode. defaultValue: auto [ system theme] - }, - // SCALE and above plan only feature - mfaSettings: { - deviceShareFactor: { - enable: true, - priority: 1, - mandatory: true, - }, - backUpShareFactor: { - enable: true, - priority: 2, - mandatory: false, - }, - socialBackupFactor: { - enable: true, - priority: 3, - mandatory: false, - }, - passwordFactor: { - enable: true, - priority: 4, - mandatory: false, - }, - }, - loginConfig: { - // Add login configs corresponding to the providers on modal - // Google login - google: { - verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here - typeOfLogin: "google", // Pass on the login provider of the verifier you've created - clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID - }, - // Facebook login - facebook: { - verifier: "YOUR_FACEBOOK_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here - typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created - clientId: "FACEBOOK_CLIENT_ID_1234567890", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID - }, - // Add other login providers here - }, - }, - loginSettings: { - mfaLevel: "mandatory", - }, -}); -web3auth.configureAdapter(authAdapter); - -// You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter instance. - -authAdapter.setAdapterSettings({ - web3AuthNetwork: "sapphire_mainnet", - sessionTime: 3600, // 1 hour in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - clientId, - redirectUrl: "http://localhost:3000", -}); -``` - -### `web3auth/no-modal` - -```tsx -const authAdapter = new AuthAdapter({ - adapterSettings: { - network: "sapphire_mainnet", - uxMode: "popup", - whiteLabel: { - appName: "W3A Heroes", - appUrl: "https://web3auth.io", - logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg", - logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg", - defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr - mode: "auto", // whether to enable dark mode. defaultValue: false - theme: { - primary: "#768729", - }, - useLogoLoader: true, - }, - // SCALE and above plan only feature - mfaSettings: { - deviceShareFactor: { - enable: true, - priority: 1, - mandatory: true, - }, - backUpShareFactor: { - enable: true, - priority: 2, - mandatory: false, - }, - socialBackupFactor: { - enable: true, - priority: 3, - mandatory: false, - }, - passwordFactor: { - enable: true, - priority: 4, - mandatory: false, - }, - }, - loginConfig: { - jwt: { - verifier: "web3auth-auth0-demo", - typeOfLogin: "jwt", - clientId: "294QRkchfq2YaXUbPri7D6PH7xzHgQMT", - }, - }, - }, -}); -web3auth.configureAdapter(authAdapter); - -// You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter instance. - -authAdapter.setAdapterSettings({ - web3AuthNetwork: "sapphire_mainnet", - sessionTime: 3600, // 1 hour in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - clientId, - redirectUrl: "http://localhost:3000", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/coinbase.mdx b/docs/sdk/pnp/web/adapters/coinbase.mdx deleted file mode 100644 index 0ac12ffe2..000000000 --- a/docs/sdk/pnp/web/adapters/coinbase.mdx +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Coinbase Wallet Adapter -sidebar_label: Coinbase Wallet -description: "Web3Auth PnP Web Adapter SDKs - Coinbase | Documentation - Web3Auth" ---- - -# Coinbase Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -The [`@web3auth/coinbase-adapter`](https://npmjs.com/package/@web3auth/coinbase-adapter) package -enables you to connect with injected Coinbase wallet(Extension Wallet) and -[Smart Wallet](https://www.smartwallet.dev/quick-start). - -## Installation - -```bash npm2yarn -npm install --save @web3auth/coinbase-adapter -``` - -## Parameters - - - - - -| Parameter | Description | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `chainConfig?` | Custom Chain Configuration you want to connect with. Defaults to `chainConfig` passed to `EthereumPrivateKeyProvider`. | -| `adapterSettings?` | Adapter settings to fine-tune the connection preferences, you can refer to [CoinbaseWalletSDKOptions](https://www.smartwallet.dev/sdk/create-coinbase-wallet-sdk#parameters) documentation. The default connection mode is set to "all," which means that users can connect either their Coinbase Injected Wallet or the Smart Wallet. | -| `clientId?` | Client Id for Web3Auth. You can get the client id from Web3Auth Dashboard. | -| `sessionTime?` | Allows you to configure the connection validity. Defaults to `sessionTime` passed to `Web3AuthOptions`. | -| `web3AuthNetwork?` | Allows you to configure the `Web3AuthNetwork`. Defaults to `web3AuthNetwork` passed to `Web3AuthOptions.` | - - - - - -```tsx -interface CoinbaseAdapterOptions { - chainConfig?: CustomChainConfig; - adapterSettings?: CoinbaseWalletSDKOptions; - clientId?: string; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - -## Usage - -```tsx -import { CoinbaseAdapter } from "@web3auth/coinbase-adapter"; - -// focus-start -const coinbaseAdapter = new CoinbaseAdapter({ - // This will only allow users to connect with Smart Wallet - // By default, it's set to "all" - adapterSettings: { options: "smartWalletOnly" }, -}); -// focus-end - -// Use your existing Web3Auth instance -web3auth.configureAdapter(coinbaseAdapter); -``` - -## Use Smart Wallet Features - -The Web3Auth provider which is created using the Coinbase Wallet Adapter will be EIP 1193 compatible -which means, you won't be able to use the Smart Wallet(ERC 4337) features directly - -To use the Smart Wallet ERC 4337 features, you can use the Web3Auth provider to send JSON-RPC -requests to the Smart Wallet. For batching and paymaster feature, it uses EIP 5792 -`wallet_sendCalls` method. [Learn more about EIP 5792](https://eips.ethereum.org/EIPS/eip-5792). - -### Send Batch Requests - -```tsx -// Retrive the Web3Auth provider once the connection is established -const provider = web3auth.provider; - -const response = await provider.request({ - method: "wallet_sendCalls", - params: [ - { - version: "1.0", - chainId: "0x01", - from: address[0], - calls: [ - { - to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567", - value: "0x9184e72a", - data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675", - }, - { - to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567", - value: "0x182183", - data: "0xfbadbaf01", - }, - ], - }, - ], -}); -``` - -### Use Paymaster - -```tsx -// Retrive the Web3Auth provider once the connection is established -const provider = web3auth.provider; - -const response = await provider.request({ - method: "wallet_sendCalls", - params: [ - { - version: "1.0", - chainId: "0x01", - from: address[0], - calls: [ - { - to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567", - value: "0x9184e72a", - data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675", - }, - ], - capabilities: { - paymasterService: { - url: "YOUR_PAYMASTER_URL", - }, - }, - }, - ], -}); -``` diff --git a/docs/sdk/pnp/web/adapters/default-evm-adapter.mdx b/docs/sdk/pnp/web/adapters/default-evm-adapter.mdx deleted file mode 100644 index f422b52e0..000000000 --- a/docs/sdk/pnp/web/adapters/default-evm-adapter.mdx +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Default EVM Adapter -sidebar_label: Default EVM Adapter -description: "Web3Auth PnP Web Adapter SDKs - Default EVM Adapter | Documentation - Web3Auth" ---- - -# Default EVM Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -The [`@web3auth/default-evm-adapter`](https://npmjs.com/package/@web3auth/default-evm-adapter) -package enables seamless detection of injected EVM wallets and WalletConnect-supported wallets, -allowing interaction with just a single line of code. - -## Installation - -```bash npm2yarn -npm install --save @web3auth/default-evm-adapter -``` - -## Injected Wallets - -To automatically fetch all the available EVM wallets in browser context, you should use the -`getInjectedAdapters` function. This function uses MIPD (EIP6163) so all available wallets in the -browser will automatically be detected. - -In case of PnP Modal SDK, if no wallets are available, prompts users with an option to install one. -Refer to the image below for details: - -![getInjectedAdapters image](/images/injected-adapter.png) - -### Parameter - - - - - -| Parameter | Description | -| --------- | ------------------------------------------------------------------- | -| `options` | Accepts `IWeb3AuthCoreOptions` used to initialize the Web3Auth SDK. | - - - - - -```tsx -export declare const getInjectedAdapters: (params: { - options: IWeb3AuthCoreOptions; -}) => Promise[]>; -``` - - - - - -### Usage - -```tsx -// focus-start -import { getInjectedAdapters } from "@web3auth/default-evm-adapter"; -// focus-end -import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; - -const chainConfig = { - chainId: "0xaa36a7", - displayName: "Ethereum Sepolia", - chainNamespace: CHAIN_NAMESPACES.EIP155, - tickerName: "Ethereum Sepolia", - ticker: "ETH", - rpcTarget: "https://rpc.sepolia.org", - blockExplorerUrl: "https://sepolia.etherscan.io", - logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png", -}; - -const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } }); - -const web3AuthOptions: Web3AuthOptions = { - clientId, - chainConfig - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider: privateKeyProvider, -}; - -// focus-start -const adapters = await getInjectedAdapters({ options: web3AuthOptions }); - -adapters.forEach((adapter) => { - web3auth.configureAdapter(adapter); -}); -// focus-end -``` - -## WalletConnect-supported Wallets - -To list all the wallets supported by the WalletConnect list, you can use the -`getDefaultExternalAdapters` function. - -In case of PnP Modal SDK, if no wallets are available, it provides an option to use the -WalletConnect v2 to connect the wallet. Refer to the image below for details: - -![getDefaultExternalAdapters image](/images/default-adapter.png) - -### Parameter - - - - - -| Parameter | Description | -| --------- | ------------------------------------------------------------------- | -| `options` | Accepts `IWeb3AuthCoreOptions` used to initialize the Web3Auth SDK. | - - - - - -```tsx -export declare const getDefaultExternalAdapters: (params: { - options: IWeb3AuthCoreOptions; -}) => Promise[]>; -``` - - - - - -### Usage - -```tsx -// focus-start -import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter"; -// focus-end -import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; - -const chainConfig = { - chainId: "0xaa36a7", - displayName: "Ethereum Sepolia", - chainNamespace: CHAIN_NAMESPACES.EIP155, - tickerName: "Ethereum Sepolia", - ticker: "ETH", - rpcTarget: "https://rpc.sepolia.org", - blockExplorerUrl: "https://sepolia.etherscan.io", - logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png", -}; - -const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } }); - -const web3AuthOptions: Web3AuthOptions = { - clientId, - chainConfig - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider: privateKeyProvider, -}; - -// focus-start -const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions }); - -adapters.forEach((adapter) => { - web3auth.configureAdapter(adapter); -}); -// focus-end -``` diff --git a/docs/sdk/pnp/web/adapters/default-solana-adapter.mdx b/docs/sdk/pnp/web/adapters/default-solana-adapter.mdx deleted file mode 100644 index abb4a6479..000000000 --- a/docs/sdk/pnp/web/adapters/default-solana-adapter.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Default Solana Adapter -sidebar_label: Default Solana Adapter -description: "Web3Auth PnP Web Adapter SDKs - Default Solana Adapter | Documentation - Web3Auth" ---- - -# Default Solana Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -The [`@web3auth/default-solana-adapter`](https://npmjs.com/package/@web3auth/default-solana-adapter) -package enables seamless detection of injected Solana wallets, allowing interaction with just a -single line of code. - -## Installation - -```bash npm2yarn -npm install --save @web3auth/default-solana-adapter -``` - -## Injected Wallets - -To automatically fetch all the available Solana wallets in browser context, you can use the -`getInjectedAdapters`, or `getDefaultExternalAdapters` function. This function uses Wallet Standard -for Solana so all available wallets in the browser will automatically be detected. - -### Parameters - - - - - -| Parameter | Description | -| --------- | ------------------------------------------------------------------- | -| `options` | Accepts `IWeb3AuthCoreOptions` used to initialize the Web3Auth SDK. | - - - - - -```tsx -export declare const getDefaultExternalAdapters: (params: { - options: IWeb3AuthCoreOptions; -}) => Promise[]>; - -export declare const getInjectedAdapters: (params: { - options: IWeb3AuthCoreOptions; -}) => Promise[]>; -``` - - - - - -### Usage - - - - - -```tsx -// focus-start -import { getDefaultExternalAdapters } from "@web3auth/default-solana-adapter"; -// focus-end -import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider"; - -const chainConfig = { - chainId: "0x2", - chainNamespace: CHAIN_NAMESPACES.SOLANA, - rpcTarget: "https://api.devnet.solana.com", - tickerName: "SOLANA", - ticker: "SOL", - decimals: 9, - blockExplorerUrl: "https://explorer.solana.com/?cluster=devnet", - logo: "https://images.toruswallet.io/sol.svg", -}; - -const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } }); - -const web3AuthOptions: Web3AuthOptions = { - clientId, - chainConfig, - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider: privateKeyProvider, -}; - -// focus-start -const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions }); - -adapters.forEach((adapter) => { - web3auth.configureAdapter(adapter); -}); -// focus-end -``` - - - - - -```tsx -// focus-start -import { getInjectedAdapters } from "@web3auth/default-solana-adapter"; -// focus-end -import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider"; - -const chainConfig = { - chainId: "0x2", - chainNamespace: CHAIN_NAMESPACES.SOLANA, - rpcTarget: "https://api.devnet.solana.com", - tickerName: "SOLANA", - ticker: "SOL", - decimals: 9, - blockExplorerUrl: "https://explorer.solana.com/?cluster=devnet", - logo: "https://images.toruswallet.io/sol.svg", -}; - -const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } }); - -const web3AuthOptions: Web3AuthOptions = { - clientId, - chainConfig, - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider: privateKeyProvider, -}; - -// focus-start -const adapters = await getInjectedAdapters({ options: web3AuthOptions }); - -adapters.forEach((adapter) => { - web3auth.configureAdapter(adapter); -}); -// focus-end -``` - - - diff --git a/docs/sdk/pnp/web/adapters/metamask.mdx b/docs/sdk/pnp/web/adapters/metamask.mdx deleted file mode 100644 index b16d4db19..000000000 --- a/docs/sdk/pnp/web/adapters/metamask.mdx +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Metamask Wallet Adapter -sidebar_label: Metamask Wallet -description: "Web3Auth PnP Web Adapter SDKs - Metamask | Documentation - Web3Auth" ---- - -# Metamask Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -## [`@web3auth/metamask-adapter`](https://npmjs.com/package/@web3auth/metamask-adapter) - -Metamask Adapter allows user to login with metamask wallet. You can read more about metamask wallet -[here](https://docs.metamask.io/guide/). - -## Basic Details - -#### Adapter Name: `metamask` - -#### Package Name: [`@web3auth/metamask-adapter`](https://npmjs.com/package/@web3auth/metamask-adapter) - -#### authMode: `DAPP` - -#### chainNamespace: `EIP155` - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/metamask-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `chainConfig?` | `CustomChainConfig` | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface MetamaskAdapterOptions { - chainConfig?: CustomChainConfig; - clientId?: string; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig`, it is not required since you can directly pass it over to -`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. - -### Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `chainConfig?` | `CustomChainConfig` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -## Example - -```tsx -import { MetamaskAdapter } from "@web3auth/metamask-adapter"; -const metamaskAdapter = new MetamaskAdapter({ - clientId, - sessionTime: 3600, // 1 hour in seconds - web3AuthNetwork: "sapphire_mainnet", - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, -}); - -// it will add/update the metamask adapter in to web3auth class -web3auth.configureAdapter(metamaskAdapter); - -// You can change the adapter settings by calling the setAdapterSettings() function on the adapter instance. -metamaskAdapter.setAdapterSettings({ - sessionTime: 86400, // 1 day in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - web3AuthNetwork: "sapphire_mainnet", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/phantom.mdx b/docs/sdk/pnp/web/adapters/phantom.mdx deleted file mode 100644 index be18763b1..000000000 --- a/docs/sdk/pnp/web/adapters/phantom.mdx +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Phantom Wallet Adapter -sidebar_label: Phantom Wallet -description: "Web3Auth PnP Web Adapter SDKs - Phantom | Documentation - Web3Auth" ---- - -# Phantom Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -## [`@web3auth/phantom-adapter`](https://npmjs.com/package/@web3auth/phantom-adapter) - -Phantom adapter allows you to connect with phantom wallet. You can read more about phantom wallet -here.(https://docs.phantom.app/). - -## Basic Details - -#### Adapter Name: `phantom` - -#### Package Name: [`@web3auth/phantom-adapter`](https://npmjs.com/package/@web3auth/phantom-adapter) - -#### authMode: `DAPP` - -#### chainNamespace: `SOLANA` - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/phantom-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `chainConfig` | `CustomChainConfig` | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface PhantomAdapterOptions { - chainConfig?: CustomChainConfig; - clientId?: string; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig`, it is not required since you can directly pass it over to the -`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. - -### Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `chainConfig?` | `CustomChainConfig` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -## Example - -```tsx -import { PhantomAdapter } from "@web3auth/phantom-adapter"; -const phantomAdapter = new PhantomAdapter({ - clientId, - sessionTime: 3600, // 1 hour in seconds - web3AuthNetwork: "sapphire_mainnet", - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.SOLANA, - chainId: "0x1", - rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, -}); -web3auth.configureAdapter(phantomAdapter); - -// You can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance. -phantomAdapter.setAdapterSettings({ - sessionTime: 86400, // 1 day in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.SOLANA, - chainId: "0x1", - rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - web3AuthNetwork: "sapphire_mainnet", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/solflare.mdx b/docs/sdk/pnp/web/adapters/solflare.mdx deleted file mode 100644 index e43bcb7d1..000000000 --- a/docs/sdk/pnp/web/adapters/solflare.mdx +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Solflare Wallet Adapter -sidebar_label: Solflare Wallet -description: "Web3Auth PnP Web Adapter SDKs - Solfare | Documentation - Web3Auth" ---- - -# Solflare Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -## [`@web3auth/solflare-adapter`](https://npmjs.com/package/@web3auth/solflare-adapter) - -Solflare adapter allows you to connect with solflare wallet. You can read more about solflare wallet -here.(https://docs.solflare.com/solflare/). - -## Basic Details - -#### Adapter Name: `solflare` - -#### Package Name: [`@web3auth/solflare-adapter`](https://npmjs.com/package/@web3auth/solflare-adapter) - -#### authMode: `DAPP` - -#### chainNamespace: `SOLANA` - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/solflare-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `chainConfig` | `CustomChainConfig` | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface SolflareAdapterOptions { - chainConfig?: CustomChainConfig; - clientId?: string; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig`, it is not required since you can directly pass it over to the -`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. - -### Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `chainConfig?` | `CustomChainConfig` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -## Example - -```tsx -import { SolflareAdapter } from "@web3auth/solflare-adapter"; -const solflareAdapter = new SolflareAdapter({ - clientId: - "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", - sessionTime: 3600, // 1 hour in seconds - web3AuthNetwork: "sapphire_mainnet", - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.SOLANA, - chainId: "0x1", - rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, -}); -web3auth.configureAdapter(solflareAdapter); - -// You can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance. - -solflareAdapter.setAdapterSettings({ - sessionTime: 86400, // 1 day in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.SOLANA, - chainId: "0x1", - rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - web3AuthNetwork: "sapphire_mainnet", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/torus-evm.mdx b/docs/sdk/pnp/web/adapters/torus-evm.mdx deleted file mode 100644 index bcc78fe85..000000000 --- a/docs/sdk/pnp/web/adapters/torus-evm.mdx +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Torus EVM Wallet Adapter -sidebar_label: Torus EVM Wallet -description: "Web3Auth PnP Web Adapter SDKs - Torus EVM | Documentation - Web3Auth" ---- - -# Torus EVM Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -## [`@web3auth/torus-evm-adapter`](https://npmjs.com/package/@web3auth/torus-evm-adapter) - -Torus Wallet adapter allows to connect with torus wallet for evm chains. You can read more about -torus wallet [here](https://docs.tor.us/wallet/get-started). - -## Basic Details - -#### Adapter Name: `torus-evm` - -#### Package Name: [`@web3auth/torus-evm-adapter`](https://npmjs.com/package/@web3auth/torus-evm-adapter) - -#### authMode: `DAPP` - -#### chainNamespace: `EIP155` - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/torus-evm-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | --------------------------------------------------------------------------------- | -| `chainConfig` | `CustomChainConfig` | -| `adapterSettings` | [`TorusCtorArgs`](https://docs.tor.us/wallet/api-reference/class) | -| `loginSettings` | [`LoginParams`](https://docs.tor.us/wallet/api-reference/class) | -| `initParams` | [`Omit `](https://docs.tor.us/wallet/api-reference/class) | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -// refer to https://docs.tor.us/wallet/api-reference/class to know more about interface field types -interface TorusWalletOptions { - adapterSettings?: TorusCtorArgs; - loginSettings?: LoginParams; - initParams?: Omit; - chainConfig?: CustomChainConfig; - clientId?: string; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig` here, it is not required since you can directly pass it over -to the `Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. - -### Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `chainConfig?` | `CustomChainConfig` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -## Example - -```tsx -import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter"; - -const torusWalletAdapter = new TorusWalletAdapter({ - adapterSettings: { - buttonPosition: "bottom-left", - }, - loginSettings: { - verifier: "google", - }, - initParams: { - buildEnv: "testing", - }, - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", - // Avoid using public rpcTarget in production. - // Use services like Infura - displayName: "Ethereum Mainnet", - blockExplorer: "https://etherscan.io", - ticker: "ETH", - tickerName: "Ethereum", - }, - clientId: - "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", - sessionTime: 3600, // 1 hour in seconds - web3AuthNetwork: "sapphire_mainnet", -}); - -// it will add/update the torus-evm adapter in to web3auth class -web3auth.configureAdapter(torusWalletAdapter); - -// You can change the adapter settings by calling the setAdapterSettings() function on the adapter instance. -torusWalletAdapter.setAdapterSettings({ - sessionTime: 86400, // 1 day in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - web3AuthNetwork: "sapphire_mainnet", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/torus-solana.mdx b/docs/sdk/pnp/web/adapters/torus-solana.mdx deleted file mode 100644 index da8e6bf8a..000000000 --- a/docs/sdk/pnp/web/adapters/torus-solana.mdx +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Torus Solana Wallet Adapter -sidebar_label: Torus Solana Wallet -description: "Web3Auth PnP Web Adapter SDKs - Torus Solana | Documentation - Web3Auth" ---- - -# Torus Solana Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -# [`@web3auth/torus-solana-adapter`](https://npmjs.com/package/@web3auth/torus-solana-adapter) - -Torus solana adapter allows to connect with torus wallet for solana blockchain. You can read more -about torus wallet [here](https://docs.tor.us/solana-wallet/get-started). - -## Basic Details - -#### Adapter Name: `torus-solana` - -#### Package Name: [`@web3auth/torus-solana-adapter`](https://npmjs.com/package/@web3auth/torus-solana-adapter) - -#### authMode: `DAPP` - -#### chainNamespace: `SOLANA` - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/torus-solana-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | --------------------------------------------------------------------------------------- | -| `chainConfig` | `CustomChainConfig` | -| `adapterSettings` | [`TorusCtorArgs`](https://docs.tor.us/solana-wallet/api-reference/class) | -| `loginSettings` | [`LoginParams`](https://docs.tor.us/solana-wallet/api-reference/class) | -| `initParams` | [`Omit`](https://docs.tor.us/solana-wallet/api-reference/class) | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -// refer to https://docs.tor.us/solana-wallet/api-reference/class to know more about interface field types -interface SolanaWalletOptions { - adapterSettings?: TorusCtorArgs; - loginSettings?: LoginParams; - initParams?: Omit; - chainConfig?: CustomChainConfig; - clientId?: string; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig`, it is not required since you can directly pass it over to the -`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. - -### Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `chainConfig?` | `CustomChainConfig` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -## Example - -```tsx -import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter"; -const solanaWalletAdapter = new SolanaWalletAdapter({ - adapterSettings: { - modalZIndex: 99999, - }, - loginSettings: { - loginProvider: "google", - }, - initParams: { - buildEnv: "testing", - }, - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.SOLANA, - rpcTarget: "https://api.mainnet-beta.solana.com", - blockExplorer: "https://explorer.solana.com", - chainId: "0x1", // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet - displayName: "Solana Mainnet Beta", - ticker: "sol", - tickerName: "solana", - }, - clientId: - "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", - sessionTime: 3600, // 1 hour in seconds - web3AuthNetwork: "sapphire_mainnet", -}); - -// it will add/update the torus-solana adapter in to web3auth class -web3auth.configureAdapter(solanaWalletAdapter); - -// you can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance - -solanaWalletAdapter.setAdapterSettings({ - sessionTime: 86400, // 1 day in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.SOLANA, - chainId: "0x1", - rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - web3AuthNetwork: "sapphire_mainnet", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/wallet-connect-v1.mdx b/docs/sdk/pnp/web/adapters/wallet-connect-v1.mdx deleted file mode 100644 index 4cd5e1eb5..000000000 --- a/docs/sdk/pnp/web/adapters/wallet-connect-v1.mdx +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Wallet Connect V1 Adapter - Web3Auth -sidebar_label: Wallet Connect V1 -description: "Web3Auth PnP Web Adapter SDKs - Wallet Connect v1 | Documentation - Web3Auth" ---- - -# WalletConnect v1 Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -:::danger deprecated - -Wallet Connect V1 is going to be deprecated, please use -[**Wallet Connect v2 Adapter**](/sdk/pnp/web/adapters/wallet-connect-v2). - -::: - -## [`@web3auth/wallet-connect-v1-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v1-adapter) - -Wallet connect v1 adapter allows you login with wallet connect v1. You can read more about wallet -connect sunsetting [here](https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/overview). - -## Basic Details - -#### Adapter Name: `wallet-connect-v1` - -#### Package Name: [`@web3auth/wallet-connect-v1-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v1-adapter) - -#### authMode: `DAPP` - -#### chainNamespace: `EIP155` - -#### Default: `YES` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/wallet-connect-v1-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `adapterSettings?` | `IAdapterSettings` | -| `chainConfig?` | `CustomChainConfig` | -| `sessionTime?` | `number` | -| `clientId?` | `string` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface WalletConnectV1AdapterOptions { - adapterSettings?: IAdapterSettings; - chainConfig?: CustomChainConfig; - sessionTime?: number; - clientId?: string; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig` here, but it is not required since you can directly pass it -over to the `Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -### IAdapter Settings - -#### `adapterSettings` - -```tsx -interface IAdapterSettings extends IWalletConnectOptions { - skipNetworkSwitching?: boolean; - networkSwitchModal?: INetworkSwitch; -} - -interface IWalletConnectOptions { - bridge?: string; - uri?: string; - storageId?: string; - signingMethods?: string[]; - session?: IWalletConnectSession; - storage?: ISessionStorage; - clientMeta?: IClientMeta; - qrcodeModal?: IQRCodeModal; - qrcodeModalOptions?: IQRCodeModalOptions; -} - -interface IQRCodeModal { - open(uri: string, cb: any, opts?: any): void; - close(): void; -} - -interface IQRCodeModalOptions { - registryUrl?: string; - mobileLinks?: string[]; - desktopLinks?: string[]; -} -``` - -## Change Adapter Settings - -You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter -instance. - -### Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `clientId?` | `string` | -| `sessionTime?` | `number` | -| `chainConfig?` | `CustomChainConfig` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | - - - - - -```tsx -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: CustomChainConfig; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; -} -``` - - - - - -## Example - -```tsx -import { WalletConnectV1Adapter } from "@web3auth/wallet-connect-v1-adapter"; - -const walletConnectV1Adapter = new WalletConnectV1Adapter({ - adapterSettings: { - bridge: "https://bridge.walletconnect.org", - }, - clientId: - "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", - sessionTime: 3600, // 1 day in seconds -}); - -web3auth.configureAdapter(walletConnectV1Adapter); - -// You can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance. -walletConnectV1Adapter.setAdapterSettings({ - sessionTime: 86400, // 1 day in seconds - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app - }, - web3AuthNetwork: "sapphire_mainnet", -}); -``` diff --git a/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx b/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx deleted file mode 100644 index caf631511..000000000 --- a/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Wallet Connect V2 Adapter -sidebar_label: Wallet Connect V2 -description: "Web3Auth PnP Web Adapter SDKs - Wallet Connect v2 | Documentation - Web3Auth" ---- - -# WalletConnect v2 Adapter - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -:::info - -With Web3Auth Web SDK v9.2.0 and above, WalletConnect V2 Adapter can be used to log in with Solana -chain namespace as well. Have a look at the example -[here](/sdk/pnp/web/adapters/wallet-connect-v2#example). - -::: - -## [`@web3auth/wallet-connect-v2-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v2-adapter) - -Wallet connect v2 adapter allows you to log in with wallet connect v2. You can read more about -Walletconnect [here](https://docs.walletconnect.com/). - -## Basic Details - -#### Adapter Name: `wallet-connect-v2` - -#### Package Name: [`@web3auth/wallet-connect-v2-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v2-adapter) - -#### chainNamespace: `EIP155` - -## Installation - -```bash npm2yarn -npm install --save @web3auth/wallet-connect-v2-adapter -``` - -## Arguments - - - - - -| Parameter | type | -| ------------------ | ----------------------- | -| `adapterSettings?` | `IAdapterSettings` | -| `chainConfig?` | `CustomChainConfig` | -| `sessionTime?` | `number` | -| `clientId?` | `string` | -| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` | -| `useCoreKitKey?` | `boolean` | - - - - - -```tsx -interface WalletConnectV2AdapterOptions extends BaseAdapterSettings { - adapterSettings?: IAdapterSettings; - loginSettings?: EngineTypes.ConnectParams; -} -interface BaseAdapterSettings { - clientId?: string; - sessionTime?: number; - chainConfig?: Partial & Pick; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; - useCoreKitKey?: boolean; -} -``` - - - - - -### Custom Chain Config - -#### `chainConfig` - -:::warning - -While you can pass your `chainConfig` here, it is not required since you can directly pass it over -to the `Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it. - -Read more about it in their respective sections: - -- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration) -- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration) - -::: - -:::warning - -If you pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the -`Web3Auth`/ `Web3AuthNoModal` constructor. - -::: - -### IAdapter Settings - -#### `adapterSettings` - -```tsx -interface IAdapterSettings { - walletConnectInitOptions?: SignClientTypes.Options; - qrcodeModal?: IQRCodeModal; -} - -interface IQRCodeModal { - openModal: (options?: OpenOptions) => Promise; - closeModal: () => void; -} -interface OpenOptions { - uri: string; - chains?: string[]; -} -``` - -## getWalletConnectV2Settings - -You can get walletConnectV2 settings by calling the `getWalletConnectV2Settings()` function with its -required arguments. - -### Arguments - - - - - -| Parameter | type | -| ----------- | ---------------------------------------------------------------------- | -| `namespace` | `ChainNamespaceType`, e.g. (`eip155`) | -| `chainIds` | `string[]` e.g. ["1"] | -| `projectID` | WalletConnect Project ID, get one from https://cloud.walletconnect.com | - - - - - -```tsx -export declare const getWalletConnectV2Settings: ( - namespace: ChainNamespaceType, - chainIds: string[], - projectID: string, -) => Promise<{ - adapterSettings: IAdapterSettings; - loginSettings: EngineTypes.ConnectParams; -}>; -export interface IAdapterSettings { - walletConnectInitOptions?: SignClientTypes.Options; - qrcodeModal?: IQRCodeModal; -} -``` - - - - - -## Example - - - - -```tsx -import { WalletConnectModal } from "@walletconnect/modal"; -import { - getWalletConnectV2Settings, - WalletConnectV2Adapter, -} from "@web3auth/wallet-connect-v2-adapter"; - -const defaultWcSettings = await getWalletConnectV2Settings( - "eip155", - ["1"], - "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons. -); -const walletConnectModal = new WalletConnectModal({ - projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons. -}); -const walletConnectV2Adapter = new WalletConnectV2Adapter({ - adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings }, - loginSettings: { ...defaultWcSettings.loginSettings }, -}); - -web3auth.configureAdapter(walletConnectV2Adapter); -``` - - - - -```tsx -import { WalletConnectModal } from "@walletconnect/modal"; -import { - getWalletConnectV2Settings, - WalletConnectV2Adapter, -} from "@web3auth/wallet-connect-v2-adapter"; - -// adding wallet connect v2 adapter -const defaultWcSettings = await getWalletConnectV2Settings( - "solana", - ["0x1"], - "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons. -); -const walletConnectModal = new WalletConnectModal({ - projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons. -}); -const walletConnectV2Adapter = new WalletConnectV2Adapter({ - adapterSettings: { - qrcodeModal: walletConnectModal, - ...defaultWcSettings.adapterSettings, - }, - loginSettings: { ...defaultWcSettings.loginSettings }, -}); - -web3auth.configureAdapter(walletConnectV2Adapter); -``` - - - diff --git a/docs/sdk/pnp/web/modal/account-abstraction.mdx b/docs/sdk/pnp/web/modal/account-abstraction.mdx deleted file mode 100644 index f42412c9c..000000000 --- a/docs/sdk/pnp/web/modal/account-abstraction.mdx +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Account Abstraction -sidebar_label: Account Abstraction -description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" ---- - -import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx"; -import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx"; -import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx"; -import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx"; -import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx"; -import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx"; -import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx"; -import ConfigurePaymasterContext from "@site/src/common/sdk/pnp/web/_paymaster-context.mdx"; -import AAModalSetup from "@site/src/common/sdk/pnp/web/_aa-modal-setup.mdx"; -import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx"; -import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx"; -import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx"; - -import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; - - - - -## Installation - - - -## Configure - - - -Please note this is the important step for setting the Web3Auth account abstraction provider. - -- [Configure Smart Account provider](#configure-smart-account-provider) -- [Configure Bundler](#configure-bundler) -- [Configure Sponsored Paymaster](#sponsored-paymaster) -- [Configure ERC-20 Paymaster](#erc-20-paymaster) - -## Configure Smart Account Provider - - - -## Configure Bundler - - - -## Configure Paymaster - -You can configure the paymaster of your choice to sponsor gas fees for your users, along with the -paymaster context. The paymaster context lets you set additional parameters, such as choosing the -token for ERC-20 paymasters, defining gas policies, and more. - -### Configure Paymaster Context - - - -### Sponsored Paymaster - - - -### ERC-20 Paymaster - - - -## Set up - -Once you have configured your AccountAbstractionProvider, you can now plug it in your Web3Auth Modal -instance. If you are using the external wallets like MetaMask, Coinbase, etc, you can define whether -you want to use the AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the -`useAAWithExternalWallet` in `Web3AuthOptions`. - -If you are setting `useAAWithExternalWallet` to `true`, it'll create a new Smart Account for your -user, where the signer/creator of the Smart Account would be the external wallet. - -If you are setting `useAAWithExternalWallet` to `false`, it'll skip creating a new Smart Account, -and directly use the external wallet to sign the transactions. - -### Configure Web3Auth Instance - - - -### Configure Signer - - - -## Smart Account Address - - - -## Send Transaction - - - -## Advanced Smart Account Operations - -To learn more about supported transaction methods, and how to perform batch transactions, -[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider/#send-batch-transaction). diff --git a/docs/sdk/pnp/web/modal/initialize.mdx b/docs/sdk/pnp/web/modal/initialize.mdx deleted file mode 100644 index ccbee165d..000000000 --- a/docs/sdk/pnp/web/modal/initialize.mdx +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Initializing PnP Web Modal SDK -sidebar_label: Initialize -description: "@web3auth/modal initialize | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -import ExampleCards from "@theme/ExampleCards"; -import { pnpModalExamples, QUICK_START } from "@site/src/common/maps"; -import UIConfig from "@site/src/common/sdk/pnp/web/_ui-config.mdx"; -import UIConfigWhitelabelExample from "@site/src/common/sdk/pnp/web/_ui-config-whitelabel-example.mdx"; -import Web3AuthOptions from "@site/src/common/sdk/pnp/web/_web3auth-options.mdx"; -import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx"; -import ExternalWalletAdapters from "@site/src/common/sdk/pnp/web/_external-wallet-adapters.mdx"; -import AuthAdapterIntro from "@site/src/common/sdk/pnp/web/_auth-adapter-intro.mdx"; -import CustomAuthenticationWeb3AuthExample from "@site/src/common/sdk/pnp/web/_custom-authentication-web3auth-example.mdx"; -import PluginsIntro from "@site/src/common/sdk/pnp/web/_plugins-intro.mdx"; -import PluginsExample from "@site/src/common/sdk/pnp/web/_plugins-example.mdx"; -import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx"; -import InitModalConfigExample from "@site/src/common/sdk/pnp/web/_init-modal-config-example.mdx"; -import WhiteLabelData from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx"; - -After Installation, the next step to use Web3Auth is to Initialize the SDK. However, the -Initialization is a two-step process, with an additional two steps for customizations, i.e. - -- [Instantiation of Web3Auth](#instantiating-web3auth) -- [Configuration of Adapters](#configuring-adapters) _(optional)_ -- [Configuration of Plugins](#configuring-plugins) _(optional)_ -- [Initialization of Modal](#initializing-modal) - -Please note that these are the most critical steps where you need to pass on different parameters -according to the preference of your project. Additionally, If you wish to customize your Web3Auth -Instance, Whitelabeling, Multi Factor Authentication and Custom Authentication have to be configured -within this step. - -## Instantiating Web3Auth - -#### Import the `Web3Auth` class from `@web3auth/modal` - -```javascript -import { Web3Auth } from "@web3auth/modal"; -``` - -#### Assign the `Web3Auth` class to a variable - -```javascript -const web3auth = new Web3Auth(Web3AuthOptions); -``` - -This Web3Auth constructor takes an object with `Web3AuthOptions` as input. - -### Arguments - -#### `Web3AuthOptions` - - - -### Adding a Custom Chain Configuration - -#### `chainConfig` - - - -:::tip - -Get the **Chain Config** for your preferred Blockchain from the -[Connect Blockchain Reference](/connect-blockchain#reference-guides-for-blockchain-connections). - -::: - -### Adding a Private Key Provider - -#### `privateKeyProvider` - -`privateKeyProvider` parameter helps you to connect with various wallet SDKs. These are -preconfigured RPC clients for different blockchains used to interact with the respective blockchain -networks. - -:::note - -It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more -in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers). - -::: - -You can choose between the following providers based on your usecase. - -- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm) -- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana) -- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl) -- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common) - - - - - -```ts -import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; - -const privateKeyProvider = new EthereumPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -```ts -import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider"; - -const privateKeyProvider = new SolanaPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -```ts -import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider"; - -const privateKeyProvider = new XrplPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -```ts -import { CommonPrivateKeyProvider } from "@web3auth/base-provider"; - -const privateKeyProvider = new CommonPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -### Whitelabeling - -Within the `uiConfig` parameter, you can configure the Web3Auth Modal according to your -application's requirements. - -:::tip - -This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more -in-depth about how you can Whitelabel your application with Web3Auth Plug and Play Modal SDK, have a -look at our [Whitelabeling SDK Reference](/sdk/pnp/web/modal/whitelabel). - -::: - -#### `uiConfig` - - - - - -### Returns - -##### `Object`: The web3auth instance with all its methods and events. - -## Configuring Adapters - -An adapter is a pluggable package that implements an `IAdapter` interface for a wallet within -Web3Auth. An adapter can be plugged in and out of web3auth modal. Each adapter exposes the provider -on successful user login that can be used to invoke RPC calls on the wallet and on the connected -blockchain. Web3Auth's modal UI supports a set of default adapters depending on the -[`authMode`](/sdk/pnp/web/modal/initialize#web3authoptions) being used. - -:::info - -This step is generally optional. You don't have to configure any default adapter unless you want to -override default configs for the adapter. - -Only those adapters that are marked are nondefault -[in this table on the Adapters Documentation](/sdk/pnp/web/adapters/#currently-available-wallet-adapters) -are required to be configured always based on the `authMode` you are using. - -::: - -### Configuring Auth Adapter [Social Logins] - - - -##### Usage - -Since we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the `loginConfig` should -correspond to the socials mentioned in the modal. Here, we're customizing Google and Facebook to be -custom verified, rest of all other socials will be the default. You can customize other social -logins or remove them using the whitelabeling option. - - - -### Configuring External Wallet Adapters - - - -## Configuring Plugins - -:::info - -This step is totally optional. If you don't want to use any plugins, feel free to skip this section. - -::: - - - -## Initializing Modal - -#### `initModal()` - -The final step in the whole initialization process is the initialize the Modal from Web3Auth. - -This is done by calling the `initModal` function of the `web3auth` instance we created above. - -```javascript -await web3auth.initModal(params); -``` - -### Arguments - -The `web3auth.initModal` takes an **optional** `params` config object as input. - -```javascript -params?: { - modalConfig?: Record; -} -``` - -This `params` object further takes a `modalConfig` object using which you can configure the -visibility of each adapter within the modal. Each modal config has the following configurations: - -##### `modalConfig` - - - -### Usage - - - - - - - - - - - -```javascript -await web3auth.initModal(); -``` - - - - - -## Quick Starts - - obj.type === QUICK_START)} /> diff --git a/docs/sdk/pnp/web/modal/initiate-topup.mdx b/docs/sdk/pnp/web/modal/initiate-topup.mdx deleted file mode 100644 index 6e387262a..000000000 --- a/docs/sdk/pnp/web/modal/initiate-topup.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Topup your Wallet in PnP Web Modal SDK -sidebar_label: Top-up Wallet -description: "@web3auth/modal Topup your Wallet | Documentation - Web3Auth" ---- - -import ShowCheckoutDoc from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup-doc.mdx"; - - diff --git a/docs/sdk/pnp/web/modal/install.mdx b/docs/sdk/pnp/web/modal/install.mdx deleted file mode 100644 index d0f563d7a..000000000 --- a/docs/sdk/pnp/web/modal/install.mdx +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: "Installing PnP Web Modal SDK" -sidebar_label: "Install" -description: "Installing Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -## [`@web3auth/modal`](https://npmjs.com/package/@web3auth/modal) - -```bash npm2yarn -npm install --save @web3auth/modal -``` - -### Add `@web3auth/base` to your project - -```bash npm2yarn -npm install --save @web3auth/base -``` - -This package gives access to common types and interfaces for Web3Auth. This comes in handy by -providing you with a standard way of importing the values you need to work with the SDKs. We highly -recommend using it while working with `Typescript`. - -### Add a Provider to your project - -The `@web3auth/modal` package requires a private key provider to facilitate interaction with your -preferred blockchain network. You can choose between the following providers based on your usecase. - -- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm) -- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana) -- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl) -- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common) - -:::note - -It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more -in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers). - -::: - - - - - -```bash npm2yarn -npm install --save @web3auth/ethereum-provider -``` - - - - - -```bash npm2yarn -npm install --save @web3auth/solana-provider -``` - - - - - -```bash npm2yarn -npm install --save @web3auth/xrpl-provider -``` - - - - - -```bash npm2yarn -npm install --save @web3auth/base-provider -``` - - - - - -## Troubleshooting - -### Bundler Issues: Missing Dependencies - -You might face issues mentioning that certain dependencies are missing within the browser -environment. These are node dependencies that need to be polyfilled in your application, to enable -Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while -building the app. We have created guides for different bundlers to help you with this issue: - -- Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)** -- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)** diff --git a/docs/sdk/pnp/web/modal/modal-hooks.mdx b/docs/sdk/pnp/web/modal/modal-hooks.mdx deleted file mode 100644 index f193fe487..000000000 --- a/docs/sdk/pnp/web/modal/modal-hooks.mdx +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: "React Hooks for PnP Modal SDK" -sidebar_label: React Hooks -description: "React Hooks for Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - -Web3Auth provides essential React hooks for Web3Auth Modal SDK for managing authentication, chain -configuration, and user interactions within your application. These hooks can be directly imported -from the `@web3auth/modal-react-hooks` package. Here's an example of how to import them: - -```jsx -import { useWeb3Auth } from "@web3auth/modal-react-hooks"; -``` - -For more information on React hooks, refer to the -[official React documentation](https://react.dev/learn/reusing-logic-with-custom-hooks). - -### Available Hooks - -- `useWeb3Auth`: Provides access to the Web3Auth context initialized via the `Web3AuthProvider` - component. - -### Hook Context Interface - - - - - -| Parameter | Description | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| `isConnected` | Indicates whether a user is currently logged in or not. | -| `provider` | The current provider, or `null` if not connected. | -| `userInfo` | Information about the logged-in user. | -| `isMFAEnabled` | Indicates whether Multi-Factor Authentication (MFA) is enabled or not. | -| `isInitialized` | Indicates whether Web3Auth has been initialized or not. | -| `status` | The current status of Web3Auth. Can take the following values: `NOT_READY`, `READY`, `CONNECTING`, `CONNECTED`, `DISCONNECTED`, `ERRORED`. | -| `enableMFA(params?)` | Enables Multi-Factor Authentication for the user. Returns a Promise. | -| `logout(params?)` | Logs out the user, with an optional cleanup parameter. Returns a Promise. | -| `addAndSwitchChain` | Adds and switches to a new blockchain. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. | -| `addPlugin` | Adds a plugin to the Web3Auth instance. Takes a `plugin` of type `IPlugin` as a parameter. | -| `getPlugin` | Retrieves a plugin by name. Takes `pluginName` of type `string` as parameter. Returns an `IPlugin` or `null`. | -| `authenticateUser` | Retrieves the idToken for the logged-in user. Returns a Promise. | -| `addChain` | Adds a new blockchain configuration. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. | -| `switchChain` | Switches to a specified blockchain by chain ID. Takes `params` of type `{ chainId: string }` as a parameter. Returns a Promise. | - - - - - -```tsx -interface IBaseWeb3AuthHookContext { - /** - * Indicates whether a user is currently logged in or not. - */ - isConnected: boolean; - /** - * The current provider, or `null` if not connected. - */ - provider: IProvider | null; - /** - * Information about the logged-in user. - */ - userInfo: Partial | null; - /** - * Indicates whether Multi-Factor Authentication (MFA) is enabled or not. - */ - isMFAEnabled: boolean; - /** - * Indicates whether Web3Auth has been initialized or not. - */ - isInitialized: boolean; - /** - * The current status of the Web3Auth adapter. - */ - status: ADAPTER_STATUS_TYPE | null; - /** - * Enables Multi-Factor Authentication for the user. - * @param params Optional parameters for enabling MFA. - * @returns A Promise that resolves when MFA is enabled. - */ - enableMFA(params?: LoginParams): Promise; - /** - * Logs out the user, with an optional cleanup parameter. - * @param params Optional parameters for logging out. - * @returns A Promise that resolves when the user is logged out. - */ - logout(params?: { cleanup: boolean }): Promise; - /** - * Adds and switches to a new blockchain. - * @param chainConfig Configuration for the new blockchain. - * @returns A Promise that resolves when the chain is added and switched. - */ - addAndSwitchChain(chainConfig: CustomChainConfig): Promise; - /** - * Adds a plugin to the Web3Auth instance. - * @param plugin The plugin to add. - */ - addPlugin(plugin: IPlugin): void; - /** - * Retrieves a plugin by name. - * @param pluginName The name of the plugin. - * @returns The plugin instance or `null` if not found. - */ - getPlugin(pluginName: string): IPlugin | null; - /** - * Retrieves the idToken for the logged-in user. - * @returns A Promise that resolves with the authenticated user's information. - */ - authenticateUser(): Promise; - /** - * Adds a new blockchain configuration. - * @param chainConfig Configuration for the new blockchain. - * @returns A Promise that resolves when the chain is added. - */ - addChain(chainConfig: CustomChainConfig): Promise; - /** - * Switches to a specified blockchain by chain ID. - * @param params Parameters for switching the chain. - * @returns A Promise that resolves when the chain is switched. - */ - switchChain(params: { chainId: string }): Promise; -} -``` - - - - - -### Web3AuthProvider - -The `Web3AuthProvider` component wraps the main component and injects the Web3Auth-related context -into it. It takes the following properties as its context: - - - - - -| Parameter | Description | -| ----------------- | --------------------------------------------------------------------- | -| `web3AuthOptions` | Configuration options for Web3Auth. | -| `adapters` | An array of adapters for connecting to different blockchain networks. | -| `plugins` | An array of plugins to add additional functionality to Web3Auth. | - - - - - -```tsx -export interface Web3AuthProviderProps { - config: Web3AuthContextConfig; -} - -export type Web3AuthContextConfig = { - web3AuthOptions: IWeb3AuthCoreOptions; - adapters?: IAdapter[]; - plugins?: IPlugin[]; -}; - -export interface IWeb3AuthCoreOptions { - clientId: string; - chainConfig?: CustomChainConfig; - enableLogging?: boolean; - storageKey?: "session" | "local"; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; - useCoreKitKey?: boolean; - uiConfig?: WhiteLabelData; - privateKeyProvider?: IBaseProvider; -} -``` - - - - - -:::info - -Please check out the [PnP Modal SDK references](/sdk/pnp/web/modal/initialize#arguments) for -interfaces for the inner parameters. - -::: - -### Shared Methods Descriptions - -Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your -users. Further, you can use the native provider given by Web3Auth to connect the users to the -respective blockchain network. - -Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples)_ returns the -following functions: - -- **`init()`** - Initializes the Web3Auth instance. - - ```javascript - await init(); - ``` - - Returns: - - ```tsx - init(): Promise; - ``` - -- **`connect()`** - Showing the Modal and Logging in the User. - - ```javascript - await connect(); - ``` - - Returns: - - ```tsx - connect(): Promise; - ``` - - On successful login, the `connect` function returns an `IProvider` instance. You can use this - provider to connect your user to the blockchain and make transactions. - -- **`provider()`** - Returns the native provider that can be used to make different blockchain - transactions. Returns: - - ```js - get provider(): IProvider | null; - ``` - -- **`connected()`** - Returns `true` or `false` depending on whether the web3auth instance is - available or not. Returns: - - ```js - get connected(): boolean; - ``` - -- **`getUserInfo()`** - Getting the User's Information. - - ```javascript - const userInfo = await getUserInfo(); - ``` - -- **`authenticateUser()`** - Getting the idToken from Web3Auth. - - ```javascript - const idToken = await authenticateUser(); - ``` - -- **`addChain()`** - Add chain config details to the connected adapter. - - ```javascript - await addChain(chainConfig); - ``` - -- **`switchChain()`** - Switch chain as per chainId already added to chain config. - - ```javascript - await switchChain({ chainId: "0x1" }); - ``` - -- **`getAdapter()`** - Get the connected adapter instance. - - ```javascript - const adapter = await getAdapter(adapterName); - ``` - -- **`configureAdapter()`** - Configure the adapter instance. - - ```javascript - await configureAdapter(adapterConfig); - ``` - -- **`clearCache()`** - Clear the cache. - - ```javascript - await clearCache(); - ``` - -- **`addPlugin()`** - Add a plugin to Web3Auth. - - ```javascript - await addPlugin(plugin); - ``` - -- **`logout()`** - Logging out the User. - ```javascript - await logout(); - ``` - -## Examples - - diff --git a/docs/sdk/pnp/web/modal/modal.mdx b/docs/sdk/pnp/web/modal/modal.mdx deleted file mode 100644 index 37ac072d8..000000000 --- a/docs/sdk/pnp/web/modal/modal.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: " Web3Auth PnP Web Modal SDK" -sidebar_label: Overview -description: " Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" ---- - -import ExampleCards from "@theme/ExampleCards"; -import { pnpModalExamples, QUICK_START } from "@site/src/common/maps"; - -This package provides the main class for using the default Web3Auth Modal. The package includes all -of our packages and gives you a simple way of implementing Web3Auth within your interface. -Additionally, it is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence, -you can still call all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) -package. - -## Requirements - -- This is a frontend SDK and can only run in a browser environment -- Basic knowledge of JavaScipt -- Supports all major JavaScript Frameworks, Libraries and Bundlers - -## Resources - -- [Quick Start](/quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0): Get Started - with an easy to follow integration of Web3Auth - -- [Example Applications](./examples): Explore our example applications and try the SDK yourself. - -- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers. - -- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find - the source code on our GitHub repository. - -- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community - to get support from our team and other developers. - -## Quick Starts - - obj.type === QUICK_START)} /> diff --git a/docs/sdk/pnp/web/modal/usage.mdx b/docs/sdk/pnp/web/modal/usage.mdx deleted file mode 100644 index d1e1da263..000000000 --- a/docs/sdk/pnp/web/modal/usage.mdx +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Using PnP Web Modal SDK -sidebar_label: Usage -description: "@web3auth/modal Usage | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -import AddChain from "@site/src/common/sdk/pnp/web/_add-chain.mdx"; -import ConnectBlockchain from "@site/src/common/sdk/pnp/web/_connect-blockchain.mdx"; -import GetIdTokenInfo from "@site/src/common/sdk/pnp/web/_get-idtoken-info.mdx"; -import GetUserInfo from "@site/src/common/sdk/pnp/web/_get-user-info.mdx"; -import EnableMFA from "@site/src/common/sdk/pnp/web/_enable-mfa.mdx"; -import ManageMFA from "@site/src/common/sdk/pnp/web/_manage-mfa.mdx"; -import LogOut from "@site/src/common/sdk/pnp/web/_logout.mdx"; -import SwitchChain from "@site/src/common/sdk/pnp/web/_switch-chain.mdx"; -import Status from "@site/src/common/sdk/pnp/web/_status-method.mdx"; -import Provider from "@site/src/common/sdk/pnp/web/_provider-method.mdx"; -import ConnectedAdapterName from "@site/src/common/sdk/pnp/web/_connected-adapter-name-method.mdx"; -import Connected from "@site/src/common/sdk/pnp/web/_connected-method.mdx"; - -Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your -users. Further, you can use the native provider given by Web3Auth to connect the users to the -respective blockchain network. - -Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples)_ returns the -following functions: - -- `connect()` - Showing the Modal and Logging in the User -- `getUserInfo()` - Getting the User's Information -- `enableMFA()` - Enable Multi Factor Authentication for the user -- `manageMFA()` - Redirect the user to manage their MFA settings in the Web3Auth Account Dashboard -- `authenticateUser()` - Getting the idToken from Web3Auth -- `addChain()` - Add chain config details to the connected adapter. -- `switchChain()` - Switch chain as per chainId already added to chain config. -- `logout()` - Logging out the User - -Additionally the following methods are available to get information about the current state of the -instance: - -- `connected` - Returns `true` or `false` depending on whether the user is connected or not. -- `status` - Returns the current status of the web3auth instance. -- `provider` - Returns the currently connected provider to the web3auth instance. -- `connectedAdapterName` - Returns the currently connected provider to the web3auth instance. - -Finally, with the Wallet Services Plugin, you can enable additional functionalities like: - -- `showCheckout()` - Initiate Topup for the user. -- `showWalletConnectScanner()` - Show WalletConnect QR Code Scanner. -- `showWalletUI()` - Show Embedded Wallet UI. -- `showSwap()` - Show Swap UI. -- `showTransactionConfirmation()` - Show Transaction Confirmation UI. - -## Logging in the User - -You can show the modal in the browser by calling `connect()` function on `web3auth` instance. Your -user can choose their preferred login method and access your application. - -```javascript -await web3auth.connect(); -``` - -#### Returns - -```tsx -connect(): Promise; -``` - -- On successful login, the `connect()` function returns a `IProvider` instance. This instance - contains the respective provider corresponding to your selected blockchain. You can use this - provider to connect your user to the blockchain and make transactions. -- On unsuccessful login, this function will return a `null` value. - -:::tip - -Read more about connecting your users with the selected blockchain in the -[Providers SDK Reference](/sdk/pnp/web/providers). - -::: - -### Check if the user is connected - - - -### Check which adapter is connected - - - -### Get the connected provider - - - -### Know the current status of the instance - - - -## Get User's Information - - - -## Enable Multi Factor Authentication (MFA) - - - -## Manage Multi Factor Authentication (MFA) - - - -## Get idToken for Backend Verification - - - -## Add EVM Blockchain to Instance - - - -## Switch to an EVM Blockchain - - - -## Logging out the User - - - -## Connecting to a Blockchain - - - -## Wallet Services Plugin Methods - -You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet -UI Screen, Wallet Connect Scanner, and initiating topup for the user. - -:::tip - -Learn more about the Wallet Services Plugin in the -[Wallet Services SDK Reference](../wallet-services/). - -::: - -### Show WalletConnect Scanner - -You can use the `showWalletConnectScanner` function to show the Wallet Connect Scanner, and connect -with dApps having Wallet Connect login option. This is useful for interoperability with dApps having -Wallet Connect login option. -[Learn more about `showWalletConnectScanner`](/docs/sdk/pnp/web/wallet-services/usage#connect-dapps-with-wallet-connect). - -### Fiat On Ramp - -You can use the `showCheckout` function to show the TopUp modal, allowing users to select their -local currency and specify the token to top up their wallet. -[Learn more about `showCheckout`](/docs/sdk/pnp/web/wallet-services/usage#fiat-on-ramp). - -### Embedded Wallet UI - -You can use the `showWalletUI` function to show the templated wallet UI services. -[Learn more about `showWalletUI`](/docs/sdk/pnp/web/wallet-services/usage#show-wallet-embedded-ui). - -### Swap Screen - -You can use the `showSwap` function to show the Swap UI. -[Learn more about `showSwap`](/docs/sdk/pnp/web/wallet-services/usage#swap). - -### Transaction Confirmation Screen - -You can use the wallet services provider to integrate prebuilt transaction confirmation screens into -your application. Upon successful completion, you can retrieve the signature for the request. -[Learn more about transaction confirmation screens](/docs/sdk/pnp/web/wallet-services/usage#transaction-confirmation-screens). diff --git a/docs/sdk/pnp/web/no-modal/custom-authentication.mdx b/docs/sdk/pnp/web/no-modal/custom-authentication.mdx deleted file mode 100644 index 25d1c1911..000000000 --- a/docs/sdk/pnp/web/no-modal/custom-authentication.mdx +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Custom Authentication with PnP Web No Modal SDK -sidebar_label: Custom Authentication -description: "Web3Auth PnP Web No Modal SDK - Custom Authentication | Documentation - Web3Auth" ---- - -import ConnectTo from "@site/src/common/sdk/pnp/web/_connect-to.mdx"; -import ConnectToExample from "@site/src/common/sdk/pnp/web/_connect-to-example.mdx"; -import CustomAuthenticationCoreExample from "@site/src/common/sdk/pnp/web/_custom-authentication-core-example.mdx"; -import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options.mdx"; -import LoginConfig from "@site/src/common/sdk/pnp/web/_login-config.mdx"; -import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; - -[Custom Authentication](/features/custom-authentication) is a way to authenticate users with your -custom authentication service. For example, while authenticating with Google, you can use your own -Google Client ID and Dashboard to authenticate users directly or use aggregator services like Auth0, -Firebase, AWS Cognito etc. Additionally, you can make your own JWT token authentication system and -pass the ID Token to Web3Auth to generate a private key for them. - -To enable this, you need to [Create a Verifier](/auth-provider-setup/verifiers) from the **Custom -Authentication** tab of your project from the -[Web3Auth Developer Dashboard](https://dashboard.web3auth.io) with your desired configuration. - - - -## Installing Auth Adapter - ---- - -Social logins in Web3Auth are enabled by the [`auth-adapter`](/sdk/pnp/web/adapters/auth). Natively, -it is already present and preconfigured within the Plug and Play SDK, but for custom configurations, -you need to install the adapter package. - -```bash npm2yarn -npm install --save @web3auth/auth-adapter -``` - -## Configuring Auth Adapter - -While instantiating the Auth Adapter, you can pass some configuration objects to the constructor. -One of these configurations is the `adapterSettings` configuration which enables you to make changes -in the adapter, enabling you to do things like Whitelabeling and Custom Authentication among other -things. - -:::tip - -Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on -different configurations you can pass for customizations. - -::: - -#### `loginConfig` - -The `loginConfig` parameter of `adapterSettings` in `auth-adapter` contains the following -properties: - - - -## Logging In - -While using the Web3Auth Plug and Play No Modal SDK, you have the option to use the `connectTo` -function, which enables you to customize the login process according to the parameters you have for -your custom authentication service. - - - -:::tip - -Know more about the `connectTo` function in the -[`Usage SDK Reference`](/sdk/pnp/web/no-modal/usage#logging-in-the-user) - -::: - -:::important - -It is mandatory to pass the `idToken` parameter in the `extraLoginOptions` object when logging in -through your [`Custom JWT Token`](/auth-provider-setup/byo-jwt-provider/). - -::: - -Further, to enable Custom Authentication, the `loginParams` parameter takes in another object called -`extraLoginOptions` which contains the following properties: - - - -## Example - -Since we're using the `@web3auth/no-modal`, ie. the Plug and Play No Modal SDK, the `loginConfig` -can include custom JWT-based authentication as well. This way, we can use any of our preferred login -providers and further setup their configs while logging the user in and passing over the -`extraLoginOptions` in the `connectTo` function. - -### Single Verifier - - - - - -### Aggregate Verifier - -```tsx -import { AuthAdapter } from "@web3auth/auth-adapter"; - -const authAdapter = new AuthAdapter({ - adapterSettings: { - // focus-start - loginConfig: { - // Google login - google: { - verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here - verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here - typeOfLogin: "google", // Pass on the login provider of the verifier you've created - clientId: "YOUR_GOOGLE_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. - }, - github: { - verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here - verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here - typeOfLogin: "github", // Pass on the login provider of the verifier you've created - clientId: "YOUR_GITHUB_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. - }, - }, - // focus-end - }, - privateKeyProvider, -}); -web3auth.configureAdapter(authAdapter); -``` - -```tsx -// When user clicks Google button, use this to Login with Google -const web3authProvider = await web3auth.connectTo("auth", { - loginProvider: "google", -}); - -// When user clicks GitHub button, use this to Login with GitHub via Auth0 -const web3authProvider = await web3auth.connectTo("auth", { - loginProvider: "github", - extraLoginOptions: { - domain: "YOUR_AUTH0_DOMAIN", // Pass the Auth0 Domain here, eg. https://web3auth.au.auth0.com - // This corresponds to the field inside jwt which must be used to uniquely identify the user. - verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD", // This is mapped b/w google and github logins. - isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive, else remove this line - }, -}); -``` diff --git a/docs/sdk/pnp/web/no-modal/examples.mdx b/docs/sdk/pnp/web/no-modal/examples.mdx deleted file mode 100644 index 53603359c..000000000 --- a/docs/sdk/pnp/web/no-modal/examples.mdx +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Examples - PnP Web No Modal SDK -sidebar_label: Examples -description: "@web3auth/no-modal Examples | Documentation - Web3Auth" -hide_table_of_contents: true ---- - -import Examples from "@site/src/components/Examples"; -import { pnpNoModalExamples } from "@site/src/common/maps"; - - diff --git a/docs/sdk/pnp/web/no-modal/initialize.mdx b/docs/sdk/pnp/web/no-modal/initialize.mdx deleted file mode 100644 index 36e3f531c..000000000 --- a/docs/sdk/pnp/web/no-modal/initialize.mdx +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Initializing PnP Web No Modal SDK -sidebar_label: Initialize -description: "@web3auth/no-modal initialize | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -import ExampleCards from "@theme/ExampleCards"; -import { pnpNoModalExamples, QUICK_START } from "@site/src/common/maps"; -import WhiteLabelData from "@site/src/common/sdk/pnp/web/_ui-config.mdx"; -import UIConfigWhitelabelExample from "@site/src/common/sdk/pnp/web/_ui-config-whitelabel-example.mdx"; -import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx"; -import CustomAuthenticationCoreExample from "@site/src/common/sdk/pnp/web/_custom-authentication-core-example.mdx"; -import ExternalWalletAdapters from "@site/src/common/sdk/pnp/web/_external-wallet-adapters.mdx"; -import AuthAdapterIntro from "@site/src/common/sdk/pnp/web/_auth-adapter-intro.mdx"; -import PluginsIntro from "@site/src/common/sdk/pnp/web/_plugins-intro.mdx"; -import Web3AuthNoModalOptions from "@site/src/common/sdk/pnp/web/_web3authcore-options.mdx"; - -After Installation, the next step to use Web3Auth is to Initialize the SDK. - -- [Instantiation of Web3AuthNoModal](#instantiating-web3authnomodal) -- [Configuration of Adapters](#configuring-adapters) -- [Configuration of Plugins](#configuring-plugins) _(optional)_ -- [Initialization of Web3Auth](#initializing-web3auth) - -Please note that these are the most critical steps where you need to pass on different parameters -according to the preference of your project. Additionally, Whitelabeling, Multi Factor -Authentication and Custom Authentication have to be configured within this step, if you wish to -customize your Web3Auth Instance. - -## Instantiating Web3AuthNoModal - -#### Import the `Web3AuthNoModal` class from `@web3auth/no-modal` - -```javascript -import { Web3AuthNoModal } from "@web3auth/no-modal"; -``` - -#### Assign the `Web3AuthNoModal` class to a variable - -```javascript -const web3auth = new Web3AuthNoModal(IWeb3AuthCoreOptions); -``` - -This Web3AuthNoModal constructor takes an object with `IWeb3AuthCoreOptions` as input. - -### Arguments - -#### `IWeb3AuthCoreOptions` - - - -### Adding a Custom Chain Configuration - -#### `chainConfig` - - - -:::tip - -Get the **Chain Config** for your preferred Blockchain from the -[Connect Blockchain Reference](/connect-blockchain#reference-guides-for-blockchain-connections). - -::: - -### Adding a Private Key Provider - -#### `privateKeyProvider` - -`privateKeyProvider` parameter helps you to connect with various wallet SDKs. These are -preconfigured RPC clients for different blockchains used to interact with the respective blockchain -networks. - -:::note - -It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more -in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers). - -::: - -You can choose between the following providers based on your usecase. - -- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm) -- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana) -- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl) -- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common) - - - - - -```ts -import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; - -const privateKeyProvider = new EthereumPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthNoModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -```ts -import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider"; - -const privateKeyProvider = new SolanaPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthNoModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -```ts -import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider"; - -const privateKeyProvider = new XrplPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthNoModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -```ts -import { CommonPrivateKeyProvider } from "@web3auth/base-provider"; - -const privateKeyProvider = new CommonPrivateKeyProvider({ - config: { chainConfig }, -}); - -const web3auth = new Web3AuthNoModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider, -}); -``` - - - - - -### Whitelabeling - -Within the `uiConfig` parameter, you can configure the Web3Auth NoModal according to your -application's requirements. It accepts a `WhiteLabelData` object. - -:::tip - -This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more -in-depth about how you can Whitelabel your application with Web3Auth Plug and Play Modal SDK, have a -look at our [Whitelabeling SDK Reference](/sdk/pnp/web/no-modal/whitelabel). - -::: - -#### `WhiteLabelData` - - - - - -### Returns - -##### `Object`: The web3auth instance with all its methods and events. - -## Configuring Adapters - -An adapter in Web3Auth is a pluggable package that implements the `IAdapter` interface. Some, like -`AuthAdapter`, extend the `BaseAdapter` class, which also implements `IAdapter`. Adapters can be -plugged into or removed from the Web3Auth instance. After successful user login, each adapter -exposes a provider to invoke RPC calls on the wallet and connected blockchain. You can configure and -use any Web3Auth adapter when initializing Web3AuthNoModal. - -### Configuring Auth Adapter [Social Logins] - - - -##### Example - -Since we're using the `@web3auth/no-modal`, ie. the Plug and Play No Modal SDK, the `loginConfig` -can include custom JWT-based authentication as well. This way, we can use any of our preferred login -providers and further setup their configs while logging the user in and passing over the -`extraLoginOptions` in the `connectTo` function. Read more about this in the -[Custom Authentication Guide](/sdk/pnp/web/no-modal/custom-authentication). - - - -### Configuring External Wallet Adapters - - - -## Configuring Plugins - -:::info - -This step is optional. If you do not plan to use any plugins, you can skip this section. - -::: - - - -## Initializing Web3Auth - -#### `init()` - -The final step in the whole initialization process is the initialize the `Web3AuthNoModal` instance, -ie. `web3auth` in our case. - -This is done by calling the `init` function of the `web3auth` instance we created above. - -```javascript -await web3auth.init(); -``` - -This is a simple function, that doesn't take any input, nor does return anything. It just makes sure -that the `web3auth` instance is initialized and ready for the user to log in. - -:::note - -The Web3Auth No Modal React Hooks SDK doesn't require an additional step to init from v9 onwards, -it's auto-inited. - -::: - -## Quick Starts - - obj.type === QUICK_START)} /> diff --git a/docs/sdk/pnp/web/no-modal/initiate-topup.mdx b/docs/sdk/pnp/web/no-modal/initiate-topup.mdx deleted file mode 100644 index edcf2fb31..000000000 --- a/docs/sdk/pnp/web/no-modal/initiate-topup.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Topup your Wallet in PnP Web No Modal SDK -sidebar_label: Top-up Wallet -description: "Web3Auth PnP Web No Modal SDK - Topup your Wallet | Documentation - Web3Auth" ---- - -import ShowCheckoutDoc from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup-doc.mdx"; - - diff --git a/docs/sdk/pnp/web/no-modal/install.mdx b/docs/sdk/pnp/web/no-modal/install.mdx deleted file mode 100644 index 802136464..000000000 --- a/docs/sdk/pnp/web/no-modal/install.mdx +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: "Installing PnP Web No Modal SDK" -sidebar_label: "Install" -description: "Installing Web3Auth Plug and Play No Modal SDK | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -## [`@web3auth/no-modal`](https://npmjs.com/package/@web3auth/no-modal) - -```bash npm2yarn -npm install --save @web3auth/no-modal -``` - -### Consider adding `@web3auth/base` to your project - -```bash npm2yarn -npm install --save @web3auth/base -``` - -This package gives access to common types and interfaces for Web3Auth. This comes in handy by -providing you a standard way of importing the values you need to work with the SDKs. We highly -recommend using it while working with `typescript`. - -### Add a Provider to your project - -The `@web3auth/no-modal` package requires a private key provider to facilitate interaction with your -preferred blockchain network. You can choose between the following providers based on your usecase. - -- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm) -- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana) -- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl) -- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common) - - - - - -```bash npm2yarn -npm install --save @web3auth/ethereum-provider -``` - - - - - -```bash npm2yarn -npm install --save @web3auth/solana-provider -``` - - - - - -```bash npm2yarn -npm install --save @web3auth/xrpl-provider -``` - - - - - -```bash npm2yarn -npm install --save @web3auth/base-provider -``` - - - - - -## Troubleshooting - -### Bundler Issues: Missing Dependencies - -You might face issues mentioning that certain dependencies are missing within the browser -environment. These are node dependencies that need to be polyfilled in your application, to enable -Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while -building the app. We have created guides for different bundlers to help you with this issue: - -- Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)** -- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)** diff --git a/docs/sdk/pnp/web/no-modal/mfa.mdx b/docs/sdk/pnp/web/no-modal/mfa.mdx deleted file mode 100644 index bfabd1b4e..000000000 --- a/docs/sdk/pnp/web/no-modal/mfa.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Multi Factor Authentication with PnP Web No Modal SDK -sidebar_label: Multi Factor Authentication -description: - "Web3Auth PnP Web No Modal SDK - Multi Factor Authentication | Documentation - Web3Auth" ---- - -import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx"; -import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx"; -import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx"; - -At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an -extra layer of protection that verifies your identity when accessing your account. To ensure -ownership, you must provide two or more different backup factors. You have the option to choose from -the device, social, backup factor (seed phrase), and password factors to guarantee access to your -Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into -three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can -easily recover your account if you lose access to your original device or helps login into a new -device. - -For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the -MFA screen by setting the `mfaLevel` argument. You can enable or disable a backup factor and change -their order. Currently, there are four values for `mfaLevel`: - -- `default`: presents the MFA screen every third login -- `optional`: presents the MFA screen on every login, but you can skip it -- `mandatory`: make it mandatory to set up MFA after login -- `none`: skips the MFA setup screen - -:::caution Note - -If you are using default verifiers, your users may have set up MFA on other dApps that also use -default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has -enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled. - -::: - - - -## Installing Auth Adapter - -Social logins in Web3Auth are enabled by the [`auth-adapter`](/sdk/pnp/web/adapters/auth). Natively, -it is already present and preconfigured within the Plug and Play SDK, but for custom configurations, -you need to install the adapter package. - -```bash npm2yarn -npm install --save @web3auth/auth-adapter -``` - -## Configuring Auth Adapter - -While instantiating the Auth Adapter, you can pass some configuration objects to the constructor. -One of these configurations is the `loginSettings` configuration which enables you to make changes -in the adapter, enabling add more settings to your login function using web3auth. - -:::tip - -Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on -different configurations you can pass for customisations. - -::: - -### Login Settings - -#### `loginSettings` - - - -```tsx title="Usage" -import { AuthAdapter } from "@web3auth/auth-adapter"; - -const authAdapter = new AuthAdapter({ - loginSettings: { - mfaLevel: "mandatory", // default, optional, mandatory, none - }, -}); -``` - -### Adapter Settings - -#### `adapterSettings` - - - -##### `mfaSettings` - - - -![Backup MFA Options](/images/mfa-options.gif) - -```tsx title="Usage" -import { AuthAdapter } from "@web3auth/auth-adapter"; - -const authAdapter = new AuthAdapter({ - loginSettings: { - mfaLevel: "mandatory", // default, optional, mandatory, none - }, - adapterSettings: { - // SCALE and above plan only feature - mfaSettings: { - deviceShareFactor: { - enable: true, - priority: 1, - mandatory: true, // at least two factors are mandatory - }, - backUpShareFactor: { - enable: true, - priority: 2, - mandatory: true, // at least two factors are mandatory - }, - socialBackupFactor: { - enable: true, - priority: 3, - mandatory: false, - }, - passwordFactor: { - enable: true, - priority: 4, - mandatory: false, - }, - passkeysFactor: { - enable: true, - priority: 5, - mandatory: false, - }, - authenticatorFactor: { - enable: true, - priority: 6, - mandatory: false, - }, - }, - }, -}); -``` - -:::note Note - -- At least two factors are mandatory when setting up the mfaSettings. -- If you set `mandatory: true` for all factors, the user must set up all four factors. -- If you set `mandatory: false` for all factors, the user can skip setting up MFA. But at least two - factors are mandatory. -- If you set `mandatory: true` for some factors and `mandatory: false` for others, the user must set - up the mandatory factors and can skip the optional factors. But, the user must set up at least two - factors. -- The `priority` field is used to set the order of the factors. The factor with the lowest priority - will be the first factor to be set up. The factor with the highest priority will be the last - factor to be set up. - -::: diff --git a/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx b/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx deleted file mode 100644 index 3c79eece9..000000000 --- a/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx +++ /dev/null @@ -1,438 +0,0 @@ ---- -title: "React Hooks for PnP No Modal SDK" -sidebar_label: React Hooks -description: " React Hooks for Web3Auth PnP Web No Modal SDK| Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - -Web3Auth provides essential React hooks for Web3Auth No Modal SDK for managing authentication, chain -configuration, and user interactions within your application. These hooks can be directly imported -from the `@web3auth/no-modal-react-hooks` package. Here's an example of how to import them: - -```jsx -import { useWeb3Auth } from "@web3auth/no-modal-react-hooks"; -``` - -For more information on React hooks, refer to the -[official React documentation](https://react.dev/learn/reusing-logic-with-custom-hooks). - -### Available Hooks - -- `useWeb3Auth`: Provides access to the Web3Auth context initialized via the `Web3AuthProvider` - component. - -### Hook Context Interface - - - - - -| Parameter | Description | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| `isConnected` | Indicates whether a user is currently logged in or not. | -| `provider` | The current provider, or `null` if not connected. | -| `userInfo` | Information about the logged-in user. | -| `isMFAEnabled` | Indicates whether Multi-Factor Authentication (MFA) is enabled or not. | -| `isInitialized` | Indicates whether Web3Auth has been initialized or not. | -| `status` | The current status of Web3Auth. Can take the following values: `NOT_READY`, `READY`, `CONNECTING`, `CONNECTED`, `DISCONNECTED`, `ERRORED`. | -| `enableMFA(params?)` | Enables Multi-Factor Authentication for the user. Returns a Promise. | -| `logout(params?)` | Logs out the user, with an optional cleanup parameter. Returns a Promise. | -| `addAndSwitchChain` | Adds and switches to a new blockchain. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. | -| `addPlugin` | Adds a plugin to the Web3Auth instance. Takes a `plugin` of type `IPlugin` as a parameter. | -| `getPlugin` | Retrieves a plugin by name. Takes `pluginName` of type `string` as parameter. Returns an `IPlugin` or `null`. | -| `authenticateUser` | Retrieves the idToken for the logged-in user. Returns a Promise. | -| `addChain` | Adds a new blockchain configuration. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. | -| `switchChain` | Switches to a specified blockchain by chain ID. Takes `params` of type `{ chainId: string }` as a parameter. Returns a Promise. | - - - - - -```tsx -interface IBaseWeb3AuthHookContext { - /** - * Indicates whether a user is currently logged in or not. - */ - isConnected: boolean; - /** - * The current provider, or `null` if not connected. - */ - provider: IProvider | null; - /** - * Information about the logged-in user. - */ - userInfo: Partial | null; - /** - * Indicates whether Multi-Factor Authentication (MFA) is enabled or not. - */ - isMFAEnabled: boolean; - /** - * Indicates whether Web3Auth has been initialized or not. - */ - isInitialized: boolean; - /** - * The current status of the Web3Auth adapter. - */ - status: ADAPTER_STATUS_TYPE | null; - /** - * Enables Multi-Factor Authentication for the user. - * @param params - Optional login parameters. - * @returns A Promise that resolves when the MFA is enabled. - */ - enableMFA(params?: LoginParams): Promise; - /** - * Logs out the user, optionally performing cleanup. - * @param params - Optional cleanup parameter. - * @returns A Promise that resolves when the user is logged out. - */ - logout(params?: { cleanup: boolean }): Promise; - /** - * Adds a new blockchain configuration and switches to it. - * @param chainConfig - The configuration for the new blockchain. - * @returns A Promise that resolves when the chain is added and switched to. - */ - addAndSwitchChain(chainConfig: CustomChainConfig): Promise; - /** - * Adds a plugin to the Web3Auth instance. - * @param plugin - The plugin to add. - */ - addPlugin(plugin: IPlugin): void; - /** - * Retrieves a plugin by name. - * @param pluginName The name of the plugin. - * @returns The plugin instance or `null` if not found. - */ - getPlugin(pluginName: string): IPlugin | null; - /** - * Retrieves the idToken for the logged-in user. - * @returns A Promise that resolves with the authenticated user's information. - */ - authenticateUser(): Promise; - /** - * Adds a new blockchain configuration. - * @param chainConfig Configuration for the new blockchain. - * @returns A Promise that resolves when the chain is added. - */ - addChain(chainConfig: CustomChainConfig): Promise; - /** - * Switches to a specified blockchain by chain ID. - * @param params Parameters for switching the chain. - * @returns A Promise that resolves when the chain is switched. - */ - switchChain(params: { chainId: string }): Promise; -} -``` - - - - - -### Web3AuthProvider - -The `Web3AuthProvider` component wraps the main component and injects the Web3Auth-related context -into it. It takes the following properties as its context: - - - - - -| Parameter | Description | -| ----------------- | --------------------------------------------------------------------- | -| `web3AuthOptions` | Configuration options for Web3Auth. | -| `adapters` | An array of adapters for connecting to different blockchain networks. | -| `plugins` | An array of plugins to add additional functionality to Web3Auth. | - - - - - -```tsx -export interface Web3AuthProviderProps { - config: Web3AuthContextConfig; -} - -export type Web3AuthContextConfig = { - web3AuthOptions: Web3AuthOptions; - adapters?: IAdapter[]; - plugins?: IPlugin[]; -}; - -export interface Web3AuthOptions extends IWeb3AuthCoreOptions { - /** - * Config for configuring modal ui display properties - */ - uiConfig?: Omit; - /** - * Private key provider for your chain namespace - */ - privateKeyProvider: IBaseProvider; -} - -export interface IWeb3AuthCoreOptions { - clientId: string; - chainConfig?: CustomChainConfig; - enableLogging?: boolean; - storageKey?: "session" | "local"; - sessionTime?: number; - web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE; - useCoreKitKey?: boolean; - uiConfig?: WhiteLabelData; - privateKeyProvider?: IBaseProvider; -} - -export interface UIConfig extends WhiteLabelData { - /** - * order of how login methods are shown - * - * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]` - */ - loginMethodsOrder?: string[]; - /** - * Z-index of the modal and iframe - * @defaultValue 99998 - */ - modalZIndex?: string; - /** - * Whether to show errors on Web3Auth modal. - * - * @defaultValue `true` - */ - displayErrorsOnModal?: boolean; - /** - * number of columns to display the Social Login buttons - * - * @defaultValue `3` - */ - loginGridCol?: 2 | 3; - /** - * Decides which button will be the focus of the modal - * For `socialLogin` the social icon will be colored - * For other options like `emailLogin` and `externalLogin` the respective buttons will be coverted into a primary button - * - * @defaultValue `socialLogin` - */ - primaryButton?: "externalLogin" | "socialLogin" | "emailLogin"; - adapterListener: SafeEventEmitter; - /** - * UX Mode for the auth adapter - */ - uxMode?: UX_MODE_TYPE; -} -``` - - - - - -:::info - -Please check out the [PnP No Modal SDK references](/sdk/pnp/web/no-modal/initialize#arguments) for -interfaces for the inner parameters. - -::: - -### Shared Methods Descriptions - -Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your -users. Further, you can use the native provider given by Web3Auth to connect the users to the -respective blockchain network. - -Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples)_ returns the -following functions: - -- **`init()`** - Initializes the Web3Auth instance. - - ```javascript - await init(); - ``` - - Returns: - - ```tsx - init(): Promise; - ``` - -- **`connectTo(walletName, loginParams?)`** - Connect to a specific wallet adapter. - - ```javascript - await connectTo(WALLET_ADAPTERS.AUTH, { - loginProvider: "google", - }); - ``` - - Returns: - - ```tsx - connectTo(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise; - ``` - - On successful login, the `connectTo` function returns an `IProvider` instance. You can use this - provider to connect your user to the blockchain and make transactions. - -- **`provider()`** - Returns the native provider that can be used to make different blockchain - transactions. Returns: - - ```js - get provider(): IProvider | null; - ``` - -- **`connected()`** - Returns `true` or `false` depending on whether the web3auth instance is - available or not. Returns: - - ```js - get connected(): boolean; - ``` - -- **`getUserInfo()`** - Getting the User's Information. - - ```javascript - const userInfo = await getUserInfo(); - ``` - -- **`authenticateUser()`** - Getting the idToken from Web3Auth. - - ```javascript - const idToken = await authenticateUser(); - ``` - -- **`addChain()`** - Add chain config details to the connected adapter. - - ```javascript - await addChain(chainConfig); - ``` - -- **`switchChain()`** - Switch chain as per chainId already added to chain config. - - ```javascript - await switchChain({ chainId: "0x1" }); - ``` - -- **`getAdapter()`** - Get the connected adapter instance. - - ```javascript - const adapter = await getAdapter(adapterName); - ``` - -- **`configureAdapter()`** - Configure the adapter instance. - - ```javascript - await configureAdapter(adapterConfig); - ``` - -- **`clearCache()`** - Clear the cache. - - ```javascript - await clearCache(); - ``` - -- **`addPlugin()`** - Add a plugin to Web3Auth. - - ```javascript - await addPlugin(plugin); - ``` - -- **`logout()`** - Logging out the User. - ```javascript - await logout(); - ``` - -### Usage - -```typescript title="App.tsx" -import React from "react"; -import { Web3AuthProvider, useWeb3Auth } from "@web3auth/no-modal-react-hooks"; -import { web3AuthContextConfig } from "./web3AuthProviderProps"; -import { WALLET_ADAPTERS } from "@web3auth/base"; - -const App = () => { - const { - init, - connectTo, - logout, - isConnected, - enableMFA, - addAndSwitchChain, - authenticateUser, - addChain, - switchChain, - } = useWeb3Auth(); - - React.useEffect(() => { - const initialize = async () => { - await init(); - }; - initialize(); - }, [init]); - - return ( - -
- {isConnected ? ( - <> - - - - - - - - ) : ( - - )} -
- - ); -}; - -export default App; -``` - -## Examples - - diff --git a/docs/sdk/pnp/web/no-modal/no-modal.mdx b/docs/sdk/pnp/web/no-modal/no-modal.mdx deleted file mode 100644 index 8d5ba4fd8..000000000 --- a/docs/sdk/pnp/web/no-modal/no-modal.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: "Web3Auth PnP Web No Modal SDK" -sidebar_label: Overview -description: "Web3Auth Plug and Play No Modal SDK | Documentation - Web3Auth" ---- - -import ExampleCards from "@theme/ExampleCards"; -import { pnpNoModalExamples, QUICK_START } from "@site/src/common/maps"; - -Web3Auth Plug and Play No Modal is the main SDK that consists of the core module of Web3Auth Plug -and Play. This SDK gives you all the needed modules for implementing the Web3Auth features, giving -you the flexibility of implementing your own UI to use all the functionalities. Since this package -doesn't contain the UI Modal as compared to the [`@web3auth/modal`](/sdk/pnp/web/modal) package, the -size of this package is smaller. - -## Requirements - -- This is a frontend SDK and can only run in a browser environment -- Basic knowledge of JavaScipt -- Supports all major JavaScript Frameworks, Libraries and Bundlers - -## Resources - -- [Quick Start](/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=REACT&stepIndex=0): Get Started - with an easy to follow integration of Web3Auth - -- [Example Applications](./examples): Explore our example applications and try the SDK yourself. - -- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers. - -- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find - the source code on our GitHub repository. - -- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community - to get support from our team and other developers. - -## Quick Starts - - obj.type === QUICK_START)} /> diff --git a/docs/sdk/pnp/web/no-modal/show-wallet-connect.mdx b/docs/sdk/pnp/web/no-modal/show-wallet-connect.mdx deleted file mode 100644 index 5595344f4..000000000 --- a/docs/sdk/pnp/web/no-modal/show-wallet-connect.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Interoperability with WalletConnect in PnP Web No Modal SDK -sidebar_label: Show Wallet Connect Scanner -description: - "Web3Auth PnP Web No Modal SDK - Interoperability with WalletConnect | Documentation - Web3Auth" ---- - -import ShowWCScannerDoc from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner-doc.mdx"; - - diff --git a/docs/sdk/pnp/web/no-modal/usage.mdx b/docs/sdk/pnp/web/no-modal/usage.mdx deleted file mode 100644 index a1162b8c9..000000000 --- a/docs/sdk/pnp/web/no-modal/usage.mdx +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Using PnP Web No Modal SDK -sidebar_label: Usage -description: "Web3Auth PnP Web No Modal SDK - Usage | Documentation - Web3Auth" ---- - -import AddChain from "@site/src/common/sdk/pnp/web/_add-chain.mdx"; -import ConnectBlockchain from "@site/src/common/sdk/pnp/web/_connect-blockchain.mdx"; -import ConnectTo from "@site/src/common/sdk/pnp/web/_connect-to.mdx"; -import ConnectToExample from "@site/src/common/sdk/pnp/web/_connect-to-example.mdx"; -import Status from "@site/src/common/sdk/pnp/web/_status-method.mdx"; -import Provider from "@site/src/common/sdk/pnp/web/_provider-method.mdx"; -import ConnectedAdapterName from "@site/src/common/sdk/pnp/web/_connected-adapter-name-method.mdx"; -import Connected from "@site/src/common/sdk/pnp/web/_connected-method.mdx"; -import EnableMFA from "@site/src/common/sdk/pnp/web/_enable-mfa.mdx"; -import ManageMFA from "@site/src/common/sdk/pnp/web/_manage-mfa.mdx"; -import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options.mdx"; -import GetIdTokenInfo from "@site/src/common/sdk/pnp/web/_get-idtoken-info.mdx"; -import GetUserInfo from "@site/src/common/sdk/pnp/web/_get-user-info.mdx"; -import LogOut from "@site/src/common/sdk/pnp/web/_logout.mdx"; -import AuthLoginParams from "@site/src/common/sdk/pnp/web/_auth-login-params.mdx"; -import SwitchChain from "@site/src/common/sdk/pnp/web/_switch-chain.mdx"; -import WalletAdapters from "@site/src/common/sdk/pnp/web/_wallet-adapters.mdx"; -import InitiateTopUp from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx"; -import ShowWCScanner from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx"; - -Once you've installed and successfully initialized `Web3AuthNoModal`, you can use it to authenticate -your users. Further, you can use the native provider given by `Web3AuthNoModal` to connect the users -to the respective blockchain network. - -Natively, the instance of `Web3AuthNoModal` _(referred to as `web3auth` in our examples)_ returns -the following functions: - -- `connectTo()` - Logging in the User with the given Wallet Adapter and respective Login Parameters. -- `getUserInfo()` - Getting the User's Information. -- `enableMFA()` - Enable Multi Factor Authentication for the user. -- `manageMFA()` - Redirect users to the Web3Auth Account Dashboard to manage their MFA settings. -- `authenticateUser()` - Getting the idToken from Web3Auth. -- `addChain()` - Add chain config details to the connected adapter. -- `switchChain()` - Switch chain as per chainId already added to the chain config. -- `logout()` - Logging out the User. -- `getAdapter()` - Retrieve a specific wallet adapter by its name. -- `configureAdapter()` - Configure a new or existing adapter. -- `clearCache()` - Clear cached session information. - -Additionally, the following methods and properties are available to get or modify information about -the current state of the instance: - -- `connected` - Returns `true` or `false` depending on whether the user is connected or not. -- `status` - Returns the current status of the web3auth instance. -- `provider` (getter/setter) - Returns or sets the currently connected provider to the web3auth - instance. -- `connectedAdapterName` - Returns the name of the currently connected adapter. - -You can also extend functionality by using the following plugin management functions: - -- `addPlugin()` - Add a plugin to extend the functionality of the Web3Auth instance. -- `getPlugin()` - Retrieve an added plugin by name. - -Finally, with the Wallet Services Plugin, you can enable additional functionalities like: - -- `showWalletUI()` - Show Wallet UI Screen. -- `initiateTopup()` - Initiate Topup for the user. -- `showWalletConnectScanner()` - Show WalletConnect QR Code Scanner. - -## Logging in the User - - - -#### Returns - -```tsx -connectTo(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise; -``` - -- On successful login, the `connectTo()` function returns a `IProvider` instance. This instance - contains the respective provider corresponding to your selected blockchain. You can use this - provider to connect your user to the blockchain and make transactions. - -- On unsuccessful login, this function will return a `null` value. - -### Usage - - - -:::tip - -You can use the `connectTo()` function to connect to the custom authentication verifiers you might -have deployed on the Web3Auth Dashboard, as well as the default ones that Web3Auth provides. For the -default verifiers, you don't need to provide any additional parameters, just pass on the login -provider type. - -::: - -:::tip - -Read more about connecting your users with the selected blockchain in the -[Providers SDK Reference](/sdk/pnp/web/providers). - -::: - -### Wallet Adapter Name - -#### `walletName` - - - -### Login Parameters - -#### `loginParams` - -The `loginParams` are specific for each and every function. Please refer to the -[Adapters SDK Reference](/sdk/pnp/web/adapters) to know more about the login parameters specific to -each wallet adapter. - -For `auth-adapter` which enables social logins, you can refer to the following `loginParams`. - - - -Further, for Custom Authentication, `ExtraLoginOptions` can be used to pass the standard OAuth login -options. - - - -## Check if the user is connected - - - -## Check which adapter is connected - - - -## Get the connected provider - - - -## Know the current status of the instance - - - -## Get User's Information - - - -## Enable Multi Factor Authentication (MFA) - - - -## Manage Multi Factor Authentication (MFA) - - - -## Get idToken - - - -## Add Chain - - - -## Switch Chain - - - -## Logging out the User - - - -## Connecting to a Blockchain - - - -## Fetching the Connected Adapter - - - -## Wallet Services Plugin Methods - -You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet -UI Screen, Wallet Connect Scanner, and initiating topup for the user. - -:::tip - -Learn more about the Wallet Services Plugin in the -[Wallet Services SDK Reference](../wallet-services/). - -::: - -### Show WalletConnect Scanner - -You can use the `showWalletConnectScanner` function to show the Wallet Connect Scanner, and connect -with dApps having Wallet Connect login option. This is useful for interoperability with dApps having -Wallet Connect login option. -[Learn more about `showWalletConnectScanner`](/docs/sdk/pnp/web/wallet-services/usage#connect-dapps-with-wallet-connect). - -### Fiat On Ramp - -You can use the `showCheckout` function to show the TopUp modal, allowing users to select their -local currency and specify the token to top up their wallet. -[Learn more about `showCheckout`](/docs/sdk/pnp/web/wallet-services/usage#fiat-on-ramp). - -### Embedded Wallet UI - -You can use the `showWalletUI` function to show the templated wallet UI services. -[Learn more about `showWalletUI`](/docs/sdk/pnp/web/wallet-services/usage#show-wallet-embedded-ui). - -### Transaction Confirmatons Screen - -You can use the wallet services provider to integrate prebuilt transaction confirmation screens into -your application. Upon successful completion, you can retrieve the signature for the request. -[Learn more about transaction confirmation screens](/docs/sdk/pnp/web/wallet-services/usage#transaction-confirmation-screens). diff --git a/docs/sdk/pnp/web/no-modal/whitelabel.mdx b/docs/sdk/pnp/web/no-modal/whitelabel.mdx deleted file mode 100644 index 334399cfd..000000000 --- a/docs/sdk/pnp/web/no-modal/whitelabel.mdx +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Whitelabel PnP Web No Modal SDK -sidebar_label: Whitelabel -description: "Web3Auth PnP Web No Modal SDK - Whitelabel | Documentation - Web3Auth" ---- - -import AuthWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx"; -import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx"; -import AuthWhiteLabelExample from "@site/src/common/sdk/pnp/web/_auth-whitelabel-example.mdx"; -import PluginConfig from "@site/src/common/sdk/pnp/web/_plugin-config.mdx"; -import PluginsExample from "@site/src/common/sdk/pnp/web/_plugins-example.mdx"; -import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; - -Web3Auth is fully whitelabelable with application branding to have a consistent user experience. All -our SDKs support Whitelabeling, giving granular customization capability across all our offerings. -The major benefit of the Plug and Play No Modal SDK is the flexibility in how you can make your own -UI for triggering the login. Further, Whitelabeling enables you to customize the other aspects as -well. - - - -### NEW: Whitelabeling via the Dashboard - -From version `8.5.0`, **Web3Auth's No Modal Plug and Play SDK** offers whitelabeling capabilities -via the **Dashboard**. This enables developers to customize the logo, appName and translations to -align with their application's branding and user experience requirements. - -- **Customize the Logo and App Name:** Modify the logo and application name to align with your - application's branding. -- **Configure Language and Translations:** Customize the language and translations within the - authentication flow to cater to your target audience. - -![Web3Auth Whitelabeling Dashboard](/images/whitelabel/whitelabel-dashboard.gif) - -Within the Web3Auth Plug and Play No Modal SDK, whitelabeling can happen in 2 different places, - -- [**Auth Adapter**](#auth-adapter): The redirect screens while logging in and constructing the key, - can be customized according to your common as well. For this, you need to pass on the `whiteLabel` - configuration parameter to the [`auth-adapter`](/sdk/pnp/web/adapters/auth). -- [**uiConfig**](/sdk/pnp/web/no-modal/initialize#whitelabeling): The UI components can be - customized using the `uiConfig` parameter while initializing the Web3AuthNoModal SDK. - - - - - -## Auth Adapter - -Web3Auth's Social Logins and Email Login run using the Auth Flow. The whole Auth user experience can -also be whitelabeled using Auth Adapter settings. For this, you need to pass on the `whiteLabel` -configuration parameter to the `adapterSettings` property of the -[`auth-adapter`](/sdk/pnp/web/adapters/auth). - -:::tip - -Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on -different configurations you can pass for customizations. - -::: - -### Example - - - -## uiConfig - -The UI components can be customized using the `uiConfig` parameter while initializing the -Web3AuthNoModal SDK. The `uiConfig` parameter is a `WhiteLabelData` object which can be used to -customize the UI components. - -### Example - -```tsx -import { Web3AuthNoModal } from "@web3auth/no-modal"; -import { WhiteLabelData } from "@web3auth/base"; - -// focus-start -const uiConfig: WhiteLabelData = { - appName: "My App", - appURL: "https://example.com", - logoLight: "https://example.com/logo-light.png", - logoDark: "https://example.com/logo-dark.png", - defaultLanguage: "en", - mode: "light", - useLogoLoader: true, - theme: { - primary: "#FF0000", - secondary: "#00FF00", - warning: "#FFA500", - }, - tncLink: "https://example.com/terms", - privacyPolicy: "https://example.com/privacy", -}; -// focus-end - -const web3auth = new Web3AuthNoModal({ - clientId: "", // Get your Client ID from the Web3Auth Dashboard - chainConfig, - web3AuthNetwork: "sapphire_mainnet", - privateKeyProvider, - // focus-start - uiConfig, - // focus-end -}); -``` diff --git a/docs/sdk/pnp/web/providers/aa-provider.mdx b/docs/sdk/pnp/web/providers/aa-provider.mdx deleted file mode 100644 index 422beef6d..000000000 --- a/docs/sdk/pnp/web/providers/aa-provider.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Account Abstraction Provider -sidebar_label: Account Abstraction Provider -description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/providers/_aa-provider.mdx"; - - diff --git a/docs/sdk/pnp/web/providers/common.mdx b/docs/sdk/pnp/web/providers/common.mdx deleted file mode 100644 index 2db229ba8..000000000 --- a/docs/sdk/pnp/web/providers/common.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Common Provider for PnP Web SDKs -sidebar_label: Common Provider -description: "Other Provider for Private Key | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/providers/_common.mdx"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - - - -## Examples - - diff --git a/docs/sdk/pnp/web/providers/evm.mdx b/docs/sdk/pnp/web/providers/evm.mdx deleted file mode 100644 index 448ae433c..000000000 --- a/docs/sdk/pnp/web/providers/evm.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: EIP1193 (EVM) Private Key Provider for PnP Web SDKs -sidebar_label: EVM Provider -description: "EIP1193 Private Key Provider for EVM Compatible Chains | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/providers/_evm.mdx"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - - - -## Examples - - diff --git a/docs/sdk/pnp/web/providers/providers.mdx b/docs/sdk/pnp/web/providers/providers.mdx deleted file mode 100644 index accce3681..000000000 --- a/docs/sdk/pnp/web/providers/providers.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Providers for PnP Web SDKs - -sidebar_label: Overview -description: "Web3Auth Providers | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/providers/_providers.mdx"; - - diff --git a/docs/sdk/pnp/web/providers/solana.mdx b/docs/sdk/pnp/web/providers/solana.mdx deleted file mode 100644 index 309a8736c..000000000 --- a/docs/sdk/pnp/web/providers/solana.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Solana Private Key Provider for PnP Web SDKs -sidebar_label: Solana Provider -description: "Solana Provider | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/providers/_solana.mdx"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - - - -## Examples - - diff --git a/docs/sdk/pnp/web/providers/xrpl.mdx b/docs/sdk/pnp/web/providers/xrpl.mdx deleted file mode 100644 index ba07ae380..000000000 --- a/docs/sdk/pnp/web/providers/xrpl.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: XRPL Private Key Provider for PnP Web SDKs -sidebar_label: XRPL Provider -description: "XRPL Provider | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/providers/_xrpl.mdx"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - - - -## Examples - - diff --git a/docs/sdk/pnp/web/wagmi-connector.mdx b/docs/sdk/pnp/web/wagmi-connector.mdx deleted file mode 100644 index 0ea59caac..000000000 --- a/docs/sdk/pnp/web/wagmi-connector.mdx +++ /dev/null @@ -1,311 +0,0 @@ ---- -title: Wagmi Connector for Web3Auth PnP Web SDKs -sidebar_label: Wagmi Connector -description: Wagmi Connector for Web3Auth PnP Web SDKs | Documentation - Web3Auth ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx"; -import ExampleCards from "@theme/ExampleCards"; -import { examples } from "@site/src/common/maps"; - -## [`@web3auth/web3auth-wagmi-connector`](https://npmjs.com/package/@web3auth/web3auth-wagmi-connector) - -**wagmi** is a collection of React Hooks containing everything you need to start working with -Ethereum. `@web3auth/web3auth-wagmi-connector` is a connector for the popular -[wagmi](https://github.com/tmm/wagmi) library to help you integrate web3auth plug and play packages. -It works with both the `@web3auth/no-modal` as well as the `@web3auth/modal` packages. - -This package can be used to initialize a [wagmi client](https://wagmi.sh) that will seamlessly -manage the interaction(wallet connection state and configuration, such as: auto-connection, -connectors, and ethers providers) of your dApp with Web3Auth. - -:::tip DEMO - -Checkout the -[Modal](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/wagmi-examples) -Example Apps to see how wagmi works with Web3Auth. - -::: - -:::note - -This version of wagmi connector is made for `@wagmi/core` `v2.6.5`. - -::: - -## Installation - -```bash npm2yarn -npm install --save @web3auth/web3auth-wagmi-connector -``` - -## Initialization - -### Import the `Web3AuthConnector` class from `@web3auth/web3auth-wagmi-connector` - -```tsx -import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector"; -``` - -### Arguments - -#### `Web3AuthConnectorParams` - - - - - -| Parameter | Description | -| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `web3AuthInstance` | Pass the Web3Auth instance here. It's the mandatory field and accepts `IWeb3Auth` or `IWeb3AuthModal`. | -| `loginParams?` | Login Parameters (only meant while using the `@web3auth/no-modal` package). It accepts `OpenloginLoginParams`. | -| `modalConfig?` | Initialisation Parameters (only meant while using the `@web3auth/modal` package). It accepts `Record`. | - - - - - -```tsx -export interface Web3AuthConnectorParams { - web3AuthInstance: IWeb3Auth | IWeb3AuthModal; - loginParams?: OpenloginLoginParams; - modalConfig?: Record; -} -``` - - - - - -##### `modalConfig` - - - -## Usage - -Since this package acts like a connector, it basically takes in your whole Web3Auth instance and -makes it readable for the wagmi library. While connecting the web3auth web packages, you need to -initialize the Web3Auth Instance as mentioned in the [modal docs](/sdk/pnp/web/modal/initialize) and -[no-modal docs](/sdk/pnp/web/no-modal/initialize). You can configure this instance with all the -options available in Web3Auth Modal package and set it up as you wish. - -### Modal SDK - -While all the parameters can be passed directly to the instance, the only parameters that remain -during the initialisation remains (passed on to the `initModal()` function). You can pass these -parameters to the `modalConfig` object in the `Web3AuthConnector` class. - -```tsx -modalConfig: { - [WALLET_ADAPTERS.AUTH]: { - loginMethods: { - google: { - name: "google login", - logoDark: "url to your custom logo which will shown in dark mode", - }, - facebook: {...}, - }, - }, -} -``` - -#### Example - -### No Modal SDK - -While all the parameters can be passed directly to the instance, the only parameters that remain -during the login remains (passed on to the `connectTo()` function). You can pass these parameters to -the `loginParams` object in the `Web3AuthConnector` class. - -:::warning - -It is mandatory to pass `loginParams` object while using the connector with Web3Auth Core package. -This is because the `connectTo()` function requires params to connect to the adapter/ social login -desired by the user. - -::: - - - - - -```tsx -loginParams: { - loginProvider: 'google', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'facebook', -} -``` - - - - -```tsx -loginParams: { - loginProvider: "jwt", - extraLoginOptions: { - id_token: "idToken", // in JWT Format - verifierIdField: "sub", // same as your JWT Verifier ID - } -} -``` - - - - -```tsx -loginParams: { - loginProvider: "jwt", - extraLoginOptions: { - verifierIdField: "sub", // same as your JWT Verifier ID - domain: "https://YOUR-APPLICATION-DOMAIN", // your Auth0 domain - }, -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'email_passwordless', - extraLoginOptions: { - login_hint: "hello@web3auth.io", // email to send the OTP to - }, -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'sms_passwordless', - extraLoginOptions: { - login_hint: "+65-XXXXXXX", - } -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'reddit', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'discord', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'twitch', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'apple', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'github', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'linkedin', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'twitter', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'weibo', -} -``` - - - - -```tsx -loginParams: { - loginProvider: 'line', -} -``` - - - - - -## Examples - - diff --git a/docs/sdk/pnp/web/wallet-services/wallet-services-hooks.mdx b/docs/sdk/pnp/web/wallet-services/wallet-services-hooks.mdx deleted file mode 100644 index ae904853e..000000000 --- a/docs/sdk/pnp/web/wallet-services/wallet-services-hooks.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: "React Hooks for Wallet Services Plugin for PnP Web SDK" -sidebar_label: React hooks -description: - "Web3Auth Wallet Services Plugin React Hooks for PnP Web SDK | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/wallet-services/_wallet-services-hooks.mdx"; - - diff --git a/docs/sdk/pnp/web/wallet-services/wallet-services.mdx b/docs/sdk/pnp/web/wallet-services/wallet-services.mdx deleted file mode 100644 index 7c5eb70c3..000000000 --- a/docs/sdk/pnp/web/wallet-services/wallet-services.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Wallet Services Plugin for PnP Web SDK -sidebar_label: Overview -description: "Web3Auth - Wallet Services Plugin for PnP Web SDK | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/wallet-services/_wallet-services.mdx"; - - diff --git a/docs/sdk/pnp/web/web.mdx b/docs/sdk/pnp/web/web.mdx deleted file mode 100644 index b63101765..000000000 --- a/docs/sdk/pnp/web/web.mdx +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Web3Auth PnP Web SDKs -sidebar_label: Overview -description: "Web3Auth PnP Web SDKs | Documentation - Web3Auth" ---- - -In the Plug and Play product, we offer a modular package of Web3Auth which helps you connect the -Social Logins (using Auth Adapter) alongside external wallet via a modular adapter interface. This -helps you make Web3Auth, a one stop solution for all your authentication needs and get started -quickly with your user onboarding journey. An adapter is just an extension/ connector of the -underlying wallet to Web3Auth. This modular approach helps the package remain lightweight and easy -to use, while providing you the flexibilty of using multiple underlying packages in an efficient -way. - -For using Web3Auth in the web, you have two choices of SDKs to get started with. - -- **Web3Auth Plug and Play Modal SDK [`@web3auth/modal`](/sdk/pnp/web/modal/):** A simple and easy - to use SDK that will give you a simple modular way of implementing Web3Auth directly within your - application. You can use the pre-configured Web3Auth Modal UI and whitelabel it according to your - needs. - -- **Web3Auth Plug and Play No Modal SDK [`@web3auth/no-modal`](/sdk/pnp/web/no-modal):** The core - module implemeting all the Web3Auth features you need and giving you the flexibilty of using your - own UI with the Web3Auth SDK working in the backend. - -## Web3Auth Plug and Play Modal SDK - -### [`@web3auth/modal`](/sdk/pnp/web/modal) - -This package provides main class for using default Web3Auth Modal. The package includes all of our -packages and gives you a simple way of implementing Web3Auth within your interface. Additionally, it -is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence, you can still call -all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. - -:::tip - -Head on to the [`@web3auth/modal` SDK Reference](/sdk/pnp/web/modal) section to get started. - -::: - -## Web3Auth Plug and Play No Modal SDK - -### [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) - -This package provides the core logic for handling adapters within Web3auth. This package acts as a -manager for all the wallet adapters we offer. You should use this package to build your custom login -UI on top of Web3Auth. The SDK size for this is comparatively smaller than the Plug and Play Modal -SDK, since it doesn't have the Web3Auth Modal UI within it. - -:::tip - -Head on to the [`web3auth/no-modal` SDK Reference](/sdk/pnp/web/no-modal) to get started. - -::: - -## Additional SDKs - -### Adapter packages - -Adapter acts as a connector between the Web3Auth and an underlying wallet provider. Web3Auth uses -the default [`@web3auth/auth-adapter`](/sdk/pnp/web/adapters/auth) for social logins. For the rest -of the external wallets, every adapter follows a common interface which is required by Web3Auth to -communicate with the wallet. - -:::tip - -Checkout the [Adapters SDK Reference](/sdk/pnp/web/adapters) to learn more. - -Currently we have the following adapters available for utilisation: - -- [`@web3auth/auth-adapter`](/sdk/pnp/web/adapters/auth) _**- default** (Enables social logins)_ -- [`@web3auth/torus-evm-adapter`](/sdk/pnp/web/adapters/torus-evm) -- [`@web3auth/torus-solana-adapter`](/sdk/pnp/web/adapters/torus-solana) -- [`@web3auth/metamask-adapter`](/sdk/pnp/web/adapters/metamask) -- [`@web3auth/phantom-adapter`](/sdk/pnp/web/adapters/phantom) -- [`@web3auth/wallet-connect-v1-adapter`](/sdk/pnp/web/adapters/wallet-connect-v1) -- [`@web3auth/coinbase-adapter`](/sdk/pnp/web/adapters/coinbase) -- [`@web3auth/solflare-adapter`](/sdk/pnp/web/adapters/solflare) - -::: - -### wagmi Connector - -**wagmi** is a collection of React Hooks containing everything you need to start working with -Ethereum. Web3Auth can be used with wagmi library to ease the integration process for a dApp using -wagmi hooks. - -Simply use [`@web3auth/web3auth-wagmi-connector`](/sdk/pnp/web/wagmi-connector) which connects with -both Modal and No Modal SDKs in your dApp to manage the interactions seamlessly. - -:::tip - -Head on to the [`@web3auth/web3auth-wagmi-connector`](/sdk/pnp/web/wagmi-connector) to get started. - -::: - -## Helper SDKs - -### Wallet Services - -Web3Auth Wallet Services offer modular, pluggable enhancements for your Web3Auth-integrated wallet, -designed to elevate both functionality and user experience within your application. These services -facilitate seamless integration, providing a comprehensive set of features without necessitating -additional UI development. From sophisticated wallet functionality to user engagement tools and -efficient transaction management, Web3Auth Wallet Services are tailored to meet the needs of modern -day dApp experiences. - -:::tip - -Head on to the [`@web3auth/wallet-services-plugin`](/sdk/pnp/web/wallet-services) to get started. - -::: - -### Provider packages - -For making RPC calls within your dApp, Web3Auth exposes respective providers for different chains. -This provider can be used to interact with the connected chain using exposed functions within the -provider. Currently Web3Auth supports providers for both EVM and Solana chains. For other chains, -one can easily get the private key from the Web3Auth SDK. - -:::tip - -Checkout the [Providers SDK Reference](/sdk/pnp/web/providers) to learn more. - -- [For EVM based Chains `@web3auth/ethereum-provider`](/sdk/pnp/web/providers/evm) -- [For Solana Blockchain `@web3auth/solana-provider`](/sdk/pnp/web/providers/solana) -- [Common Key Provider for other Blockchains `@web3auth/base-provider`](/sdk/pnp/web/providers/common) - -::: - -### Common Types and Interfaces - -#### [`@web3auth/base`](https://npmjs.com/package/@web3auth/base) - -This package gives access to common types and interfaces for Web3Auth. This comes in handy by -providing you a standard way of importing the values you need to work with the SDKs. We highly -recommend using it while working with Typescript. diff --git a/docs/sdk/sdk.mdx b/docs/sdk/sdk.mdx index f6b51ebcc..b81726904 100644 --- a/docs/sdk/sdk.mdx +++ b/docs/sdk/sdk.mdx @@ -2,7 +2,7 @@ title: Explore Web3Auth SDKs hide_table_of_contents: true sidebar_label: SDK Reference -displayed_sidebar: sdk_pnp_web +displayed_sidebar: sdk_pnp_react image: "images/docs-meta-cards/sdk-reference-card.png" description: "SDK Reference | Documentation - Web3Auth" --- diff --git a/docs/sdk/sfa/sfa-js/passkeys-sfa.mdx b/docs/sdk/sfa/sfa-js/passkeys-sfa.mdx deleted file mode 100644 index 79a73b0a3..000000000 --- a/docs/sdk/sfa/sfa-js/passkeys-sfa.mdx +++ /dev/null @@ -1,390 +0,0 @@ ---- -title: Passkeys Plugin for SFA JS SDK -sidebar_label: Passkeys Plugin -description: "Web3Auth - Passkeys Plugin for SFA JS SDK | Documentation - Web3Auth" ---- - -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -### [`@web3auth/passkeys-sfa-plugin`](https://npmjs.com/package/@web3auth/passkeys-sfa-plugin) - -The Passkeys SFA Plugin allows your application to use passkeys for secure and easy authentication. -This plugin integrates seamlessly with Web3Auth Single Factor Auth (SFA) Web SDK, enabling passkey -registration, login, and management functionalities. - -:::note Note - -Passkeys SFA Plugin is designed for Web3Auth Single Factor Auth (SFA) Web SDK. - -::: - -## Installation - -```bash npm2yarn -npm install --save @web3auth/passkeys-sfa-plugin -``` - -## Initialization - -Import the `PasskeysPlugin` **class** from `@web3auth/passkeys-sfa-plugin`. - -```javascript -import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin"; -``` - -#### Assign the `PasskeysPlugin` class to a variable - -After creating your Web3Auth SFA instance, you need to initialize the Passkeys Plugin and add it to -the class for further usage. - -```javascript -const passkeysPlugin = new PasskeysPlugin(options); -``` - -This constructor takes an object with `IPasskeysPluginOptions` as input. - -### Arguments - -While initializing the Passkeys plugin, you need to pass the following parameters to the -constructor: - - - - - -| Parameter | Description | -| ----------- | ----------------------------------------------------------------------------------------------------------------------- | -| `rpID?` | Stands for relying party ID. Your app domain. If your app is hosted on "your.app.xyz", the RPID can be "your.app.xyz". | -| `rpName?` | Stands for relying party name. Name of your app. We recommend setting it to the correctly capitalized name of your app. | -| `buildEnv?` | Specifies the build environment to use: `production`, `staging`, `testing`, or `development`. | - - - - - -```tsx -export interface IPasskeysPluginOptions { - buildEnv?: BUILD_ENV_TYPE; - /** - * `rpID` should be your app domain. - * - * If your app is hosted on "your.app.xyz" the RPID can be "your.app.xyz" or "app.xyz". - * - * Be aware: if you create passkeys on "your.app.xyz", they won't be usable on other subdomains (e.g. "other.app.xyz"). - * So unless you have good reasons not to, use the top-level domain as the RPID. - * - * `rpID` will show up in the initial registration popup: - * - * @defaultValue tld - */ - rpID?: string; - /** - * `rpName` doesn't show up in the popup so can be set to anything. - * - * We recommend setting it to the correctly capitalized name of your app, - * in case browsers start showing it in their native UIs in the future. - * - * @defaultValue window.title || window.location.hostname - */ - rpName?: string; -} -``` - - - - - -#### Add the `passkeysPlugin` class to your Web3Auth SFA instance - -After initializing the `passkeysPlugin`, use the `addPlugin()` function to add it to your Web3Auth -SFA instance. - -```javascript -web3AuthInstance.addPlugin(passkeysPlugin); -``` - -### Example - -```javascript -import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin"; - -const passkeysPlugin = new PasskeysPlugin({ - rpID: "your.app.xyz", - rpName: "Your App", -}); - -web3auth.addPlugin(passkeysPlugin); // Add the plugin to web3auth - -// Register a new passkey -await passkeysPlugin.registerPasskey({ username: "user@example.com" }); - -// Login with a passkey -await passkeysPlugin.loginWithPasskey(); - -// List all registered passkeys -const passkeys = await passkeysPlugin.listAllPasskeys(); -console.log(passkeys); -``` - -:::note Note - -Here’s the refined version: - -First, users need to log in with their authentication provider. Once logged in, they can register a -passkey. The next time they log in, they can seamlessly use the registered passkey with a -passkey-enabled authentication device. - -::: - -## Using Passkeys SFA Plugin - -### `registerPasskey()` - -Registers a new passkey for the user. - -#### Parameters - -| Parameter | Description | -| -------------------------- | ---------------------------------------------------------------------------------------------------- | -| `authenticatorAttachment?` | Option to restrict the type of authenticators that can be registered. | -| `username?` | The passkey in the user device will be saved with this name. Default is `loginProvider\|verifierId.` | - -#### Usage - -```javascript -await passkeysPlugin.registerPasskey({ - username: "user@example.com", - authenticatorAttachment: "platform", -}); -``` - -### `loginWithPasskey()` - -Logs in the user with an existing passkey. - -#### Parameters - -| Parameter | Description | -| ------------------ | ------------------------------------------------------------------------------------------------------------- | -| `authenticatorId?` | The ID of the specific authenticator you want to log in with, useful when multiple authenticators are set up. | - -#### Usage - -```javascript -await passkeysPlugin.loginWithPasskey({ - authenticatorId: "authenticator_id", -}); -``` - -:::tip - -When you call `listAllPasskeys()`, the `credential_id` from the response is the authenticator ID -that can be used for logging in with a specific passkey. This improves UX by reducing the number of -prompts the user has to face when multiple authenticators are set up. Here’s a sample output for -`listAllPasskeys()`: - -```json -{ - "id": "123", - // focus-next-line - "credential_id": "abc123def456ghi789jkl012mno345pqr678stu901vwx234yz", - "verifier_id": "verifier987zyx654wvu321tsr098qpo765nml432kji109gfe", - "browser": "Chrome", - "browser_version": "126.0.0.0", - "transport": "hybrid,internal", - "os": "macOS", - "os_version": "12.5.1", - "platform": "desktop", - "provider_name": "Samsung Pass", - "created_at": "2024-06-25T07:41:38.000Z", - "updated_at": "2024-06-25T07:41:38.000Z" -} -``` - -::: - -### `listAllPasskeys()` - -Lists all registered passkeys for the user. - -#### Usage - -```javascript -const passkeys = await passkeysPlugin.listAllPasskeys(); -console.log(passkeys); -``` - -## Using with Web3Auth SFA - -:::note Note - -Below are two files, `App.tsx` and `utils.ts`, demonstrating the implementation of the Passkeys SFA -Plugin. The `utils.ts` file is kept non-opinionated and can be configured according to your -requirements for your users. Also, note that the passkeys flow is **only supported on browsers that -support WebAuthn**. You need to check for browser support before registering or logging in with a -passkey. - -::: - - - - - -```typescript -import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, IProvider } from "@web3auth/base"; -import Web3Auth from "@web3auth/single-factor-auth"; -import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin"; -import { shouldSupportPasskey } from "./utils"; - -const clientId = "Your_Web3Auth_Client_ID"; - -const chainConfig = { - chainId: "0x1", // Please use 0x1 for Mainnet - rpcTarget: "https://rpc.ethereum.org", - displayName: "Ethereum Mainnet", - blockExplorerUrl: "https://etherscan.io/", - ticker: "ETH", - tickerName: "Ethereum", - logo: "https://images.toruswallet.io/eth.svg", -}; - -const web3AuthOptions = { - clientId, - chainConfig: { ...chainConfig, chainNamespace: CHAIN_NAMESPACES.EIP155 }, - web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET, -}; - -const web3auth = new Web3Auth(web3AuthOptions); - -const passkeysPlugin = new PasskeysPlugin({ - rpID: "your.app.xyz", - rpName: "Your App", -}); - -web3auth.addPlugin(passkeysPlugin); // Add the plugin to web3auth - -await web3auth.init(); - -await web3auth.connect({ - verifier: "your_verifier_name", // Pass the verifier name created on the Web3Auth dashboard - verifierId: "your_verifier_id", // Pass the verifierId received from the OAuth provider - idToken: "id_token", // Pass the idToken received from the OAuth provider -}); - -const result = shouldSupportPasskey(); - -if (!result.isBrowserSupported) { - console.log("Browser not supported"); -} else { - // Register a new passkey - await passkeysPlugin.registerPasskey({ username: "user@example.com" }); - - // Login with a passkey - await passkeysPlugin.loginWithPasskey(); - - // List all registered passkeys - const passkeys = await passkeysPlugin.listAllPasskeys(); - console.log(passkeys); -} -``` - - - - - -```typescript -import bowser from "bowser"; - -const PASSKEYS_ALLOWED_MAP = [ - bowser.OS_MAP.iOS, - bowser.OS_MAP.MacOS, - bowser.OS_MAP.Android, - bowser.OS_MAP.Windows, -]; - -const getWindowsVersion = (osVersion: string) => { - const windowsVersionRegex = /NT (\d+\.\d+)/; - const match = osVersion.match(windowsVersionRegex); - if (match) return parseInt(match[1], 10); - return 0; -}; - -const checkIfOSIsSupported = (osName: string, osVersion: string) => { - if (!PASSKEYS_ALLOWED_MAP.includes(osName)) return false; - if (osName === bowser.OS_MAP.MacOS) return true; - switch (osName) { - case bowser.OS_MAP.iOS: { - const version = parseInt(osVersion.split(".")[0], 10); - return version >= 16; - } - case bowser.OS_MAP.Android: { - const version = parseInt(osVersion.split(".")[0], 10); - return version >= 9; - } - case bowser.OS_MAP.Windows: { - const version = getWindowsVersion(osVersion); - return version >= 10; - } - default: - return false; - } -}; - -export function shouldSupportPasskey(): { - isBrowserSupported: boolean; - isOsSupported: boolean; - supported; - - Browser?: Record; -} { - const browser = bowser.getParser(navigator.userAgent); - const osDetails = browser.parseOS(); - if (!osDetails) return { isBrowserSupported: false, isOsSupported: false }; - const osName = osDetails.name || ""; - const result = checkIfOSIsSupported(osName, osDetails.version || ""); - if (!result) return { isBrowserSupported: false, isOsSupported: false }; - const browserData: Record> = { - iOS: { - safari: ">=16", - chrome: ">=108", - }, - macOS: { - safari: ">=16", - chrome: ">=108", - firefox: ">=122", - }, - Android: { - chrome: ">=108", - }, - Windows: { - edge: ">=108", - chrome: ">=108", - }, - }; - const isBrowserSupported = browser.satisfies({ ...browserData }) || false; - return { isBrowserSupported, isOsSupported: true, supportedBrowser: browserData[osName] }; -} - -export function browserSupportsWebAuthn() { - return ( - window?.PublicKeyCredential !== undefined && typeof window.PublicKeyCredential === "function" - ); -} -``` - - - - diff --git a/docs/sdk/sfa/sfa-js/show-wallet-connect.mdx b/docs/sdk/sfa/sfa-js/show-wallet-connect.mdx deleted file mode 100644 index ed7183ce1..000000000 --- a/docs/sdk/sfa/sfa-js/show-wallet-connect.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Interoperability with WalletConnect in PnP Web Modal SDK -sidebar_label: Show Wallet Connect Scanner -description: "@web3auth/modal Interoperability with WalletConnect | Documentation - Web3Auth" ---- - -import ShowWCScannerDoc from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner-doc.mdx"; - - diff --git a/docs/sdk/sfa/sfa-js/wallet-services/usage.mdx b/docs/sdk/sfa/sfa-js/wallet-services/usage.mdx deleted file mode 100644 index 7cf7e59a5..000000000 --- a/docs/sdk/sfa/sfa-js/wallet-services/usage.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Usage - Wallet Services Plugin -sidebar_label: Usage -description: "Usage - Wallet Services Plugin for PnP Web SDK | Documentation - Web3Auth" ---- - -import Content from "@site/src/common/sdk/wallet-services/_usage.mdx"; - - diff --git a/docs/sdk/web/advanced/_other-chains b/docs/sdk/web/advanced/_other-chains new file mode 100644 index 000000000..0bb2bf774 --- /dev/null +++ b/docs/sdk/web/advanced/_other-chains @@ -0,0 +1,153 @@ +--- +title: Multi Factor Authentication with PnP Web Modal SDK +sidebar_label: Multi Factor Authentication +description: "@web3auth/modal Multi Factor Authentication | Documentation - Web3Auth" +--- + +### Adding a Custom Chain Configuration + +:::tip + +Get the **Chain Config** for your preferred Blockchain from the +[Connect Blockchain Reference](/connect-blockchain#reference-guides-for-blockchain-connections). + +::: + +### Adding a Private Key Provider + +#### `privateKeyProvider` + +`privateKeyProvider` parameter helps you to connect with various wallet SDKs. These are +preconfigured RPC clients for different blockchains used to interact with the respective blockchain +networks. + +:::note + +It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more +in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers). + +::: + +You can choose between the following providers based on your usecase. + +- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm) +- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana) +- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl) +- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common) + + + + + +```ts +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const web3auth = new Web3AuthModal({ + clientId: "", // Get your Client ID from the Web3Auth Dashboard + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, +}); +``` + + + + + +```ts +import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider"; + +const privateKeyProvider = new SolanaPrivateKeyProvider({ + config: { chainConfig }, +}); + +const web3auth = new Web3AuthModal({ + clientId: "", // Get your Client ID from the Web3Auth Dashboard + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, +}); +``` + + + + + +```ts +import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider"; + +const privateKeyProvider = new XrplPrivateKeyProvider({ + config: { chainConfig }, +}); + +const web3auth = new Web3AuthModal({ + clientId: "", // Get your Client ID from the Web3Auth Dashboard + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, +}); +``` + + + + + +```ts +import { CommonPrivateKeyProvider } from "@web3auth/base-provider"; + +const privateKeyProvider = new CommonPrivateKeyProvider({ + config: { chainConfig }, +}); + +const web3auth = new Web3AuthModal({ + clientId: "", // Get your Client ID from the Web3Auth Dashboard + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, +}); +``` + + + + + +### Whitelabeling + +Within the `uiConfig` parameter, you can configure the Web3Auth Modal according to your +application's requirements. + +:::tip + +This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more +in-depth about how you can Whitelabel your application with Web3Auth Plug and Play Modal SDK, have a +look at our [Whitelabeling SDK Reference](/sdk/pnp/web/modal/whitelabel). + +::: + +#### `uiConfig` + + + + + +### Returns + +##### `Object`: The web3auth instance with all its methods and events. + +## Configuring Plugins + +:::info + +This step is totally optional. If you don't want to use any plugins, feel free to skip this section. + +::: + + diff --git a/docs/sdk/pnp/web/modal/custom-authentication.mdx b/docs/sdk/web/advanced/custom-authentication.mdx similarity index 100% rename from docs/sdk/pnp/web/modal/custom-authentication.mdx rename to docs/sdk/web/advanced/custom-authentication.mdx diff --git a/docs/sdk/pnp/web/modal/mfa.mdx b/docs/sdk/web/advanced/mfa.mdx similarity index 100% rename from docs/sdk/pnp/web/modal/mfa.mdx rename to docs/sdk/web/advanced/mfa.mdx diff --git a/docs/sdk/web/advanced/smart-accounts/account-abstraction.mdx b/docs/sdk/web/advanced/smart-accounts/account-abstraction.mdx new file mode 100644 index 000000000..3d1a98161 --- /dev/null +++ b/docs/sdk/web/advanced/smart-accounts/account-abstraction.mdx @@ -0,0 +1,11 @@ +--- +title: Overview +sidebar_label: Overview +description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" +--- + +import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx"; +import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; + + + diff --git a/docs/sdk/web/advanced/smart-accounts/configure/dashboard.mdx b/docs/sdk/web/advanced/smart-accounts/configure/dashboard.mdx new file mode 100644 index 000000000..ddaf9f12c --- /dev/null +++ b/docs/sdk/web/advanced/smart-accounts/configure/dashboard.mdx @@ -0,0 +1,52 @@ +--- +title: Configure Dashboard +sidebar_label: Configure Dashboard +description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" +--- + +To enable the Smart Accounts feature, navigate to the Smart Accounts section in the Web3Auth +dashboard, and enable the Set up Smart Accounts toggle. Web3Auth currently supports +[MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount) +as a Smart Account provider. + +![Enable Smart Accounts](/images/dashboard/smart-account/enable-smart-account.jpeg) + +## Wallet configuration + +Once Smart Accounts are enabled, the wallet configurations can be customized. By default, +`All supported wallets` is selected, allowing users to also create Smart Accounts using external +wallets. + +To restrict this behavior, the configuration can be set to `Embedded wallets only`. + +## Configure Bundler + +Web3Auth allows developers to configure a custom bundler, which aggregates UserOperations and +submits them on-chain via the global EntryPoint contract. + +To define a paymaster context for an ERC-20 paymaster or to set specific paymaster policies, refer +to the documentation on configuring the bundler through the code. + +To configure the bundler, navigate to the `Bundler & Paymaster` tab within the `Smart Accounts` +section. The bundler url must be added for each supported chain. + +![Configure Bundler](/images/dashboard/smart-account/configure-bundler.jpeg) + +## Configure Paymaster + +Web3Auth allows developers to configure a paymaster of their choice to sponsor gas fees on behalf of +users. To define a paymaster context or set additional parameters, such as selecting the token for +ERC-20 paymasters, specifying gas policies, and more, refer to the documentation on configuring the +paymaster through code. + +To configure a paymaster via the dashboard, navigate to the `Bundler & Paymaster` tab under the +`Smart Accounts` section. The paymaster url must be added for each supported chain. + +:::info + +Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster, +refer to the documentation on configuring the paymaster through code. + +::: + +![Configure Paymaster](/images/dashboard/smart-account/configure-paymaster.jpeg) diff --git a/docs/sdk/web/advanced/smart-accounts/configure/sdk.mdx b/docs/sdk/web/advanced/smart-accounts/configure/sdk.mdx new file mode 100644 index 000000000..95148bfb6 --- /dev/null +++ b/docs/sdk/web/advanced/smart-accounts/configure/sdk.mdx @@ -0,0 +1,57 @@ +--- +title: Configure SDK +sidebar_label: Configure SDK +description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" +--- + +While the dashboard provides a convenient way to configure Smart Accounts, the SDK offers greater +flexibility by allowing developers to override these settings. It supports advanced configurations +such as specifying an ERC-20 paymaster, defining the paymaster context, and setting additional +parameters like sponsorship policies. + +## Override Paymaster Context + +The Web3Auth SDK allows developers to override the paymaster context defined in the dashboard for +specified chains. This is particularly useful when the selected paymaster requires a custom +paymaster context with additional settings. + +Developers can pass metadata within the paymaster context to provide the information needed to +process UserOperations. This may include the type of paymaster (e.g., Sponsored or ERC-20-based), +token references for gas sponsorship, custom gas policies or limits, and any other parameters +relevant to the sponsorship logic. + +:::info + +Please note that the paymaster context must be manually configured for each chain that needs to be +supported. + +::: + +```ts +import { WEB3AUTH_NETWORK, Web3AuthOptions } from "@web3auth/modal"; + +const web3AuthOptions: Web3AuthOptions = { + clientId: "YOUR_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, + // focus-start + accountAbstractionConfig: { + smartAccountType: "metamask", + chains: [ + { + chainId: "0x1", + bundlerConfig: { + url: "YOUR_BUNDLER_URL", + // This is just an example of how you can configure the paymaster context. + // Please refer to the documentation of the paymaster you are using + // to understand the required parameters. + paymasterContext: { + token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS", + sponsorshipPolicyId: "sp_my_policy_id", + }, + }, + }, + ], + }, + // focus-end +}; +``` diff --git a/docs/sdk/web/advanced/smart-accounts/usage.mdx b/docs/sdk/web/advanced/smart-accounts/usage.mdx new file mode 100644 index 000000000..a5c3c1be5 --- /dev/null +++ b/docs/sdk/web/advanced/smart-accounts/usage.mdx @@ -0,0 +1,251 @@ +--- +title: Usage +sidebar_label: Usage +description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx"; +import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx"; +import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx"; + +// TODO: Add section that Wagmi doesn't require any configuration for signer. + +### Configure Signer + + + +## Smart Account Address + + + +## Send Transaction + + + +## Sign transaction + +Developers have the option to sign a transaction without immediately sending it. If it is the user's +first transaction, the `UserOperation` calldata will automatically include the required deployment +data to create the user's Smart Account on-chain. + +:::info + +Wagmi doesn't have hooks for signing transactions yet. + +::: + + + + + +```tsx +// Convert 1 ether to WEI format +const amount = parseEther("1"); + +const signature = await signer.signTransaction({ + to: "DESTINATION_ADDRESS", + value: amount, +}); +``` + + + + +```tsx +// Convert 1 ether to WEI format +const amount = parseEther("1"); +const addresses = await walletClient.getAddresses(); + +const request = await walletClient.prepareTransactionRequest({ + account: addresses[0], + to: "DESTINATION_ADDRESS", + value: amount, +}); + +const signature = await walletClient.signTransaction(request as any); +``` + + + + +## Sign Message + +Message signing is also supported with Smart Accounts; however, the signature and verification +process differs from that of Externally Owned Accounts (EOAs). Smart Accounts adhere to the EIP-1271 +standard for signature verification, utilizing the isValidSignature method defined in the smart +contract wallet, rather than relying on the ecrecover function used by EOAs. + +[Learn more about EIP 1271](https://eips.ethereum.org/EIPS/eip-1271). + + + + + +```tsx +import { useSignMessage } from "wagmi"; +const { data: signature, signMessage } = useSignMessage(); + +const message = "YOUR_MESSAGE"; + +signMessage({ message }); + +// Use signature as needed +``` + + + + +```tsx +const originalMessage = "YOUR_MESSAGE"; + +// Sign the message +const signedMessage = await signer.signMessage(originalMessage); +``` + + + + +```tsx +const originalMessage = "YOUR_MESSAGE"; + +const addresses = await walletClient.getAddresses(); + +const signedMessage = await walletClient.signMessage({ + account: address[0], + message: originalMessage, +}); +``` + + + + +## Send Batch Transaction + +One of the key features of Smart Accounts is the ability to perform batch transactions. +Traditionally, if a user wants to swap Token A for Token B, they must first approve Token A and then +execute the swap in a separate transaction. With batch transaction support in Smart Accounts, both +steps can be combined into a single UserOperation. + +Executing a batch transaction differs slightly from the standard transaction flow. To perform it, +developers must use the `BundlerClient` provided by Web3Auth. The default Web3Auth provider instance +cannot be used for this purpose, as it is a proxy designed to work seamlessly with common signer +libraries for basic operations. + +When calling `sendUserOperation`, it returns a UserOperation hash, which is the keccak256 hash of +the entire user operation, not the transaction hash. To retrieve the final transaction details, +developers must use the `waitForUserOperationReceipt` method. This function waits for the +UserOperation to be included in a block and returns a complete receipt, including the entryPoint, +blockNumber, blockHash, and the actual transactionHash. + +```ts +// Use your Web3Auth instance +const accountAbstractionProvider = web3auth.accountAbstractionProvider; +// Use the same accountAbstractionProvider we created earlier. +const bundlerClient = accountAbstractionProvider.bundlerClient!; +const smartAccount = accountAbstractionProvider.smartAccount!; + +// 0.00001 ETH in WEI format +const amount = 10000000000000n; + +const userOpHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + ], +}); + +// Retrieve user operation receipt +const receipt = await bundlerClient.waitForUserOperationReceipt({ + hash: userOpHash, +}); + +const transactionHash = receipt.receipt.transactionHash; +``` + +## Send transaction using ERC-20 Paymaster + +To submit a transaction using an ERC-20 paymaster, the associated ERC-20 token must first be +approved for use by the paymaster. Ideally, the application should first check the existing token +allowance and only initiate an approval transaction if the allowance is insufficient. + +Modifying the token allowance requires a write operation on the ERC-20 token contract. In the +example below, Pimlico is used as the paymaster, but developers should update the paymaster and +ERC-20 token addresses to match their specific implementation. To use an ERC-20 paymaster, refer to +the configuration guide for +[ERC-20 paymaster context.](/docs/sdk/pnp/web/modal/account-abstraction/configure/sdk). + +```ts +// Use your Web3Auth instance +const accountAbstractionProvider = web3auth.accountAbstractionProvider; + +// Use the same accountAbstractionProvider we created earlier. +const bundlerClient = accountAbstractionProvider.bundlerClient!; +const smartAccount = accountAbstractionProvider.smartAccount!; + +// Pimlico's ERC-20 Paymaster address +const pimlicoPaymasterAddress = "0x0000000000000039cd5e8aE05257CE51C473ddd1"; + +// USDC address on Ethereum Sepolia +const usdcAddress = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238"; + +// 0.00001 ETH in WEI format +const amount = 10000000000000n; + +// 10 USDC in WEI format. Since USDC has 6 decimals, 10 * 10^6 +const approvalAmount = 10000000n; + +const userOpHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + // Approve USDC on Sepolia chain for Pimlico's ERC 20 Paymaster + { + to: usdcAddress, + abi: parseAbi(["function approve(address,uint)"]), + functionName: "approve", + args: [pimlicoPaymasterAddress, approvalAmount], + }, + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + ], +}); + +// Retrieve user operation receipt +const receipt = await bundlerClient.waitForUserOperationReceipt({ + hash: userOpHash, +}); + +const transactionHash = receipt.receipt.transactionHash; +``` diff --git a/docs/sdk/pnp/web/no-modal/account-abstraction.mdx b/docs/sdk/web/advanced/wallet-services.mdx similarity index 100% rename from docs/sdk/pnp/web/no-modal/account-abstraction.mdx rename to docs/sdk/web/advanced/wallet-services.mdx diff --git a/docs/sdk/pnp/web/modal/whitelabel.mdx b/docs/sdk/web/advanced/whitelabel.mdx similarity index 99% rename from docs/sdk/pnp/web/modal/whitelabel.mdx rename to docs/sdk/web/advanced/whitelabel.mdx index b17052c75..5ad7eeb61 100644 --- a/docs/sdk/pnp/web/modal/whitelabel.mdx +++ b/docs/sdk/web/advanced/whitelabel.mdx @@ -4,6 +4,10 @@ sidebar_label: Whitelabel description: "Whitelabel Web3Auth | Documentation - Web3Auth" --- +##### `modalConfig` + + + import InitModalConfigExample from "@site/src/common/sdk/pnp/web/_init-modal-config-example.mdx"; import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx"; import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx"; diff --git a/docs/sdk/web/config.mdx b/docs/sdk/web/config.mdx new file mode 100644 index 000000000..ada8d1a98 --- /dev/null +++ b/docs/sdk/web/config.mdx @@ -0,0 +1,158 @@ +--- +title: Configuring PnP Web Modal SDK +sidebar_label: Configuration +description: "@web3auth/modal initialize | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; +import ExampleCards from "@theme/ExampleCards"; +import { pnpModalExamples, QUICK_START } from "@site/src/common/maps"; +import Web3AuthOptions from "@site/src/common/sdk/pnp/web/_web3auth-options.mdx"; + +After Installation, the next step to use Web3Auth is to configure. For this, you need to create an +instance of the config object `Web3AuthOptions`, and pass it in the constructor. + +:::info Prerequisites + +Before you start, make sure you have registered on the +[Web3Auth Dashboard](https://dashboard.web3auth.io/) and have set up your project. You can look into +the [Dashboard Setup](/dashboard-setup) guide to learn more. + +::: + +## Instantiating Web3Auth + +This Web3Auth constructor takes an object with `Web3AuthOptions` as the type. + +:::note Type Reference + +Import the type `Web3AuthOptions` for easy type interface for Typescript. + +```javascript +import { type Web3AuthOptions } from "@web3auth/modal"; +``` + +::: + +### Arguments + +#### `Web3AuthOptions` + + + +## Usage + + + + + +```ts +import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal"; + +const web3AuthOptions: Web3AuthOptions = { + clientId: "YOUR_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET +}; +``` + + + + + +```ts +import { WALLET_CONNECTORS, WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal"; + +const web3AuthOptions: Web3AuthOptions = { + clientId: "YOUR_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET + modalConfig: { + connectors: { + [WALLET_CONNECTORS.AUTH]: { + label: "auth", + loginMethods: { + google: { + name: "google login", + // logoDark: "url to your custom logo which will shown in dark mode", + }, + facebook: { + // it will hide the facebook option from the Web3Auth modal. + name: "facebook login", + showOnModal: false, + }, + email_passwordless: { + name: "email passwordless login", + showOnModal: true, + authConnectionId: "w3a-email_passwordless-demo", + }, + sms_passwordless: { + name: "sms passwordless login", + showOnModal: true, + authConnectionId: "w3a-sms_passwordless-demo", + }, + }, + // setting it to false will hide all social login methods from modal. + showOnModal: true, + }, + }, + // setting it to true will hide the external wallets discovery. + hideWalletDiscovery: true, + }, +}; +``` + + + + + +## Advanced Configurations + +Web3Auth Modal SDK provides several advanced configuration options to enhance your integration. Each +configuration option serves a specific purpose and can be implemented based on your application's +requirements: + +:::tip + +Each of these configuration options has detailed documentation in their respective sections. Click +on the links above to learn more about implementing these advanced features. + +::: + +- **[Configuring Account Abstraction](/sdk/pnp/web/modal/advanced/account-abstraction)** + + - `accountAbstractionConfig`: Configure account abstraction parameters + - `useAAWithExternalWallet`: Enable account abstraction with external wallet connections + +- **[Setting up Custom Authentication](/sdk/pnp/web/modal/advanced/custom-authentication)** + + - `modalConfig`: Customize authentication methods and their appearance in the modal + +- **[Whitelabeling your integration](/sdk/pnp/web/modal/advanced/whitelabel)** + + - `uiConfig`: Customize the UI appearance including colors, logos, and themes + - `modalConfig`: Configure which authentication options appear and their presentation + +- **[Adding a Multi-Factor Authentication](/sdk/pnp/web/modal/advanced/multi-factor-authentication)** + + - `connectors`: Configure MFA settings for different authentication methods + +- **[Wallet Services for additional features](/sdk/pnp/web/modal/advanced/wallet-services)** + + - `walletServicesConfig`: Configure wallet services parameters + - `plugins`: Add additional plugins or their parameters + +- **[Connecting with other Blockchain Networks](/sdk/pnp/web/modal/advanced/other-chains)** + + - `chains`: Specify which blockchain networks to support + - `defaultChainId`: Set the default blockchain network + - `privateKeyProvider`: Configure custom private key provider for specific chains + +## Quick Starts + + obj.type === QUICK_START)} /> diff --git a/docs/sdk/web/js/events.mdx b/docs/sdk/web/js/events.mdx new file mode 100644 index 000000000..0e023b2d6 --- /dev/null +++ b/docs/sdk/web/js/events.mdx @@ -0,0 +1,245 @@ +--- +title: Web3Auth Events & Status +sidebar_label: SDK Events +description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth" +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx"; + +# Web3Auth Events & Status + +This page documents the key properties and lifecycle events available from a Web3Auth instance. +These allow you to track the connection status, react to changes, and build responsive user +experiences. + +## `connected` + +Returns `true` if a wallet is connected, otherwise `false`. + +#### Interface + +```ts +get connected(): boolean; +``` + +#### Usage + +```js +const isConnected = web3auth.connected; +``` + +## `provider` + +Returns the current provider instance if connected. + +#### Interface + +```ts +get provider(): IProvider | null; +``` + +#### Usage + +```js +const provider = web3auth.provider; +``` + +## `connectedConnectorName` + +Name of the currently connected wallet connector, or `null` if not connected. + +#### Interface + +```ts +connectedConnectorName: WALLET_CONNECTOR_TYPE | null; +``` + +##### `WALLET_CONNECTOR_TYPE` + + + + +| Event | Description | +| ------------------- | ---------------------------- | +| `AUTH` | Web3Auth connector. | +| `WALLET_CONNECT_V2` | Wallet Connect V2 connector. | +| `COINBASE` | Coinbase connector. | +| `METAMASK` | Metamask connector. | + + + + +```ts +export type WALLET_CONNECTOR_TYPE = (typeof WALLET_CONNECTORS)[keyof typeof WALLET_CONNECTORS]; +export declare const WALLET_CONNECTORS: { + readonly AUTH: "auth"; + readonly WALLET_CONNECT_V2: "wallet-connect-v2"; + readonly COINBASE: "coinbase"; + readonly METAMASK: "metamask"; +}; +``` + + + + +#### Usage + +```js +const connectorName = web3auth.connectedConnectorName; +``` + +## `status` + +Current status of the Web3Auth instance. Emits status change events. + +#### Interface + +```ts +status: CONNECTOR_STATUS_TYPE; +``` + +##### `CONNECTOR_STATUS_TYPE` + + + + +| Event | Description | +| --------------- | --------------------------------------------------------------- | +| `NOT_READY` | Triggered when the connector is not ready. | +| `READY` | Triggered when the connector is ready. | +| `CONNECTING` | Triggered when a connection is being established. | +| `CONNECTED` | Triggered when a wallet is successfully connected. | +| `DISCONNECTING` | Triggered when the wallet is in the process of disconnecting. | +| `DISCONNECTED` | Triggered when the wallet is disconnected. | +| `ERRORED` | Triggered when an error occurs during the connection lifecycle. | + + + + +```ts +export type CONNECTOR_STATUS_TYPE = (typeof CONNECTOR_STATUS)[keyof typeof CONNECTOR_STATUS]; +export declare const CONNECTOR_STATUS: { + readonly NOT_READY: "not_ready"; + readonly READY: "ready"; + readonly CONNECTING: "connecting"; + readonly CONNECTED: "connected"; + readonly DISCONNECTING: "disconnecting"; + readonly DISCONNECTED: "disconnected"; + readonly ERRORED: "errored"; +}; +``` + + + + +#### Usage + +```js +const status = web3auth.status; +``` + +## `currentChain` + +Returns the current chain configuration if connected. + +#### Interface + +```ts +get currentChain(): CustomChainConfig | undefined; +``` + +#### `chainConfig` + + + +#### Usage + +```js +const chain = web3auth.currentChain; +``` + +## `connectedConnector` + +Returns the connector instance for the connected wallet, or `null`. + +#### Interface + +```ts +get connectedConnector(): IConnector | null; +``` + +#### Usage + +```js +const connector = web3auth.connectedConnector; +``` + +## `accountAbstractionProvider` + +Returns the account abstraction provider if available. + +#### Interface + +```ts +get accountAbstractionProvider(): AccountAbstractionProvider | null; +``` + +#### Usage + +```js +const aaProvider = web3auth.accountAbstractionProvider; +``` + +## `getConnector` + +Returns a connector instance for a given connector name and chain namespace. + +#### Interface + +```ts +getConnector(connectorName: WALLET_CONNECTOR_TYPE, chainNamespace?: ChainNamespaceType): IConnector | null; + +export type WALLET_CONNECTOR_TYPE = (typeof WALLET_CONNECTORS)[keyof typeof WALLET_CONNECTORS]; +export declare const WALLET_CONNECTORS: { + readonly AUTH: "auth"; + readonly WALLET_CONNECT_V2: "wallet-connect-v2"; + readonly COINBASE: "coinbase"; + readonly METAMASK: "metamask"; +}; +export type ChainNamespaceType = (typeof CHAIN_NAMESPACES)[keyof typeof CHAIN_NAMESPACES]; +``` + +#### Usage + +```js +const connector = web3auth.getConnector("WALLET_CONNECT_V2", "eip155"); +``` + +## `getPlugin` + +Returns a plugin instance by name, or `null` if not found. + +#### Interface + +```ts +getPlugin(name: string): IPlugin | null; + +export interface IPlugin extends SafeEventEmitter { + name: string; + status: PLUGIN_STATUS_TYPE; + SUPPORTED_CONNECTORS: WALLET_CONNECTOR_TYPE[]; + pluginNamespace: PluginNamespace; + initWithWeb3Auth(web3auth: IWeb3AuthCore, whiteLabel?: WhiteLabelData): Promise; + connect(): Promise; + disconnect(): Promise; + cleanup(): Promise; +} +``` + +#### Usage + +```js +const plugin = web3auth.getPlugin("walletServices"); +``` diff --git a/docs/sdk/pnp/web/modal/examples.mdx b/docs/sdk/web/js/examples.mdx similarity index 100% rename from docs/sdk/pnp/web/modal/examples.mdx rename to docs/sdk/web/js/examples.mdx diff --git a/docs/sdk/web/js/functions/authenticateUser.mdx b/docs/sdk/web/js/functions/authenticateUser.mdx new file mode 100644 index 000000000..7ed5039cc --- /dev/null +++ b/docs/sdk/web/js/functions/authenticateUser.mdx @@ -0,0 +1,181 @@ +--- +title: authenticateUser +sidebar_label: authenticateUser +description: "@web3auth/modal authenticateUser | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +Function to retrieve the identity token from Web3Auth. + +:::note + +This function will only return information based on the connected adapter. These details are not +stored anywhere and are fetched from the adapter during the connection and remain in the session. + +::: + +### Usage + +```ts +// Later in your code: +try { + const idToken = await web3auth.authenticateUser(); + console.log(idToken); +} catch (error) { + console.error("Error authenticating user:", error); +} +``` + +### Return Type + +```typescript +authenticateUser(): Promise + +type UserAuthInfo = { idToken: string }; +``` + +### Response Format + +The `idToken` is a JWT that can be decoded to get user information. + + + + + + + + + +| Parameter | Type | Description | +| ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `iat` | `number` | The "iat" (issued at) claim identifies the time at which the JWT was issued. | +| `aud` | `string` | The "aud" (audience) claim identifies the recipients that the JWT is intended for. (Here, it's the dapp `client_id`) | +| `iss` | `string` | The "iss" (issuer) claim identifies who issued the JWT. (Here, it's Web3Auth `https://api.openlogin.com/`) | +| `email` | `string` | The email address of the user (optional) | +| `name` | `string` | The name of the user (optional) | +| `profileImage` | `string` | The profile image of the user (optional) | +| `verifier` | `string` | Web3auth's verifier used while user login | +| `verifierId` | `string` | Unique user id given by OAuth login provider | +| `aggregateVerifier` | `string` | Name of the verifier if you are using a single id verifier (aggregateVerifier) (optional) | +| `exp` | `number` | The "exp" (expiration time) claim identifies the expiration time on or after which the _JWT MUST NOT be accepted for processing_. | +| `wallets` | `array` | list of wallets for which this token is issued:
  • `curve` "secp256k1" (default) or "ed25519"
    You can specify which curve you want use for the encoded public key in the login parameters
  • `type` "web3auth_key" incase of social logins
  • `public_key` compressed public key derived based on the specified curve
| + + + + + +`authenticateUser(): Promise` + +```tsx +export type UserAuthInfo = { idToken: string }; +``` + + + + + +#### Sample Response + +```json +{ + "iat": 1655835494, + "aud": "BCtbnOamqh0cJFEUYA0NB5YkvBECZ3HLZsKfvSRBvew2EiiKW3UxpyQASSR0artjQkiUOCHeZ_ZeygXpYpxZjOs", + "iss": "https://api.openlogin.com/", + "email": "xyz@xyz.com", + "name": "John Doe", + "profileImage": "https://lh3.googleusercontent.com/a/AATXAJx3lnGmHiM4K97uLo9Rb0AxOceH-dQCBSRqGbck=s96-c", + "verifier": "torus", + "verifierId": "xyz@xyz.com", + "aggregateVerifier": "tkey-google-lrc", + "exp": 1655921894, + "wallets": [ + { + "public_key": "035143318b83eb5d31611f8c03582ab1200494f66f5e11a67c34f5581f48c1b70b", + "type": "web3auth_key", + "curve": "secp256k1" + } + ] +} +``` + + + + + + + + + +| Parameter | Type | Description | +| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `iat` | `number` | The "iat" (issued at) claim identifies the time at which the JWT was issued. | +| `aud` | `string` | The "audience" claim identifies the recipients that the JWT is intended for. (Here, it's `website's url`) | +| `iss` | `string` | The "issuer" claim identifies who issued the JWT.
Here, issuer could be `torus-evm`, `torus-solana`, `metamask`, `phantom`, `walletconnect-v1`, `coinbase`, `solflare` | +| `wallets` | `array` | list of wallets for which this token is issued:
  • `address` : Wallet public address
  • `type` Network Type such as "ethereum", "solana" or "starkware" incase of external wallets
| + + + + + +`authenticateUser(): Promise` + +```tsx +export type UserAuthInfo = { idToken: string }; +``` + + + + + +#### Sample Response + +```json +{ + "iat": 1661158877, + "issuer": "", + "audience": "https://requesting.website", + "wallets": [ + { + "address": "0x809d4310d578649d8539e718030ee11e603ee8f3", + "type": "ethereum" + } + ], + "exp": 1661245277 +} +``` + + + + + +### Error Handling + +```javascript +try { + const userInfo = await web3auth.authenticateUser(); + // Use the token +} catch (error) { + // Handle errors (e.g., user not connected, network issues) + console.error("Authentication failed:", error); +} +``` diff --git a/docs/sdk/web/js/functions/connect.mdx b/docs/sdk/web/js/functions/connect.mdx new file mode 100644 index 000000000..de8c210e1 --- /dev/null +++ b/docs/sdk/web/js/functions/connect.mdx @@ -0,0 +1,48 @@ +--- +title: connect +sidebar_label: connect +description: "@web3auth/modal Connect | Documentation - Web3Auth" +--- + +Function to show the Web3Auth modal in the browser. Your users can choose their preferred login +method and access your application. + +### Import + +```javascript +import { Web3Auth } from "@web3auth/modal"; +``` + +### Usage + +```javascript +// Initialize Web3Auth first +const web3auth = new Web3Auth({ + // Your configuration options +}); + +await web3auth.init(); + +// Show the modal and connect +const provider = await web3auth.connect(); +``` + +### Return Type + +```tsx +connect(): Promise; +``` + +#### Return Values + +- **IProvider | null** + - On successful login, returns an `IProvider` instance containing the respective provider + corresponding to your selected blockchain. + - On unsuccessful login, returns `null`. + +:::tip + +Read more about connecting your users with the selected blockchain in the +[Providers SDK Reference](/sdk/pnp/web/providers). + +::: diff --git a/docs/sdk/web/js/functions/enableMFA.mdx b/docs/sdk/web/js/functions/enableMFA.mdx new file mode 100644 index 000000000..61647b4a0 --- /dev/null +++ b/docs/sdk/web/js/functions/enableMFA.mdx @@ -0,0 +1,36 @@ +--- +title: enableMFA +sidebar_label: enableMFA +description: "@web3auth/modal Function enableMFA | Documentation - Web3Auth" +--- + +Function to enable Multi-Factor Authentication (MFA) for users with Web3Auth. + +ge + +```javascript +try { + await web3auth.enableMFA(); + console.log("MFA setup process initiated"); +} catch (error) { + console.error("Error enabling MFA:", error); +} +``` + +### Interface + +```ts +enableMFA(loginParams?: T): Promise; +``` + +#### loginParams + +Optional parameters for the login process when setting up MFA. + +#### Return Value + +`Promise` + +A promise that resolves when the MFA setup process has been initiated. This function will trigger a +redirect to the MFA setup page, where the user will be asked to login again and set up the MFA +methods according to the configuration set in the Web3Auth instance. diff --git a/docs/sdk/web/js/functions/functions.mdx b/docs/sdk/web/js/functions/functions.mdx new file mode 100644 index 000000000..472d05be4 --- /dev/null +++ b/docs/sdk/web/js/functions/functions.mdx @@ -0,0 +1,58 @@ +--- +title: Using PnP Web Modal SDK +sidebar_label: Overview +description: "@web3auth/modal Functions | Documentation - Web3Auth" +--- + +Web3Auth provides a comprehensive set of functions to handle authentication, user management, and +blockchain interactions in your applications. These functions allow you to implement features like +user login, multi-factor authentication, chain switching, and wallet services with minimal effort. +Each function is designed to handle a specific aspect of Web3Auth functionality, making it easy to +integrate into your projects. + +## List of Functions + +:::tip + +For detailed usage, configuration options, and code examples, refer to the dedicated documentation +page for each function. + +::: + +### Authentication Functions + +| Function Name | Description | +| ------------- | ------------------------------------------- | +| `connect()` | Displays the Modal and logs in the user. | +| `logout()` | Logs out the user from the current session. | + +### User Management Functions + +| Function Name | Description | +| -------------------- | ----------------------------------------------------------- | +| `getUserInfo()` | Retrieves the authenticated user's information. | +| `authenticateUser()` | Gets the idToken from Web3Auth for authentication purposes. | + +### Security Functions + +| Function Name | Description | +| ------------- | ---------------------------------------------------------------------------------- | +| `enableMFA()` | Enables Multi-Factor Authentication for the user. | +| `manageMFA()` | Redirects the user to manage their MFA settings in the Web3Auth Account Dashboard. | + +### Blockchain Functions + +| Function Name | Description | +| --------------- | ---------------------------------------------------------------------------------------- | +| `addChain()` | Adds chain configuration details to the connected adapter. | +| `switchChain()` | Switches to a different blockchain network as per chainId already added to chain config. | + +### Wallet Services Plugin Functions + +| Function Name | Description | +| ------------------------------- | --------------------------------------------- | +| `showCheckout()` | Initiates cryptocurrency top-up for the user. | +| `showWalletConnectScanner()` | Displays the WalletConnect QR Code Scanner. | +| `showWalletUI()` | Shows the Embedded Wallet UI. | +| `showSwap()` | Displays the Swap UI for token exchanges. | +| `showTransactionConfirmation()` | Shows the Transaction Confirmation UI. | diff --git a/docs/sdk/web/js/functions/getUserInfo.mdx b/docs/sdk/web/js/functions/getUserInfo.mdx new file mode 100644 index 000000000..3ab6b99ed --- /dev/null +++ b/docs/sdk/web/js/functions/getUserInfo.mdx @@ -0,0 +1,111 @@ +--- +title: getUserInfo +sidebar_label: getUserInfo +description: "@web3auth/modal Function getUserInfo | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +Function to retrieve information about the connected user. + +:::note + +This function will only return information based on the connected adapter. These details are not +stored anywhere and are fetched from the adapter during the connection and remain in the session. + +::: + +### Usage + +```javascript +// After successful login +const userInfo = await web3auth.getUserInfo(); +console.log(userInfo); +``` + +### Return Type + + + + + +| Property | Type | Description | +| ------------------- | ------- | ------------------------------------------------------------------------------------------------ | +| `email` | string | Email of the user. | +| `name` | string | Name of the user. | +| `profileImage` | string | Profile image of the user. | +| `aggregateVerifier` | string | Aggregate verifier of the user. | +| `verifier` | string | Verifier of the user. | +| `verifierId` | string | Verifier ID of the user. | +| `typeOfLogin` | string | Type of login provider. | +| `dappShare` | string | Dapp share of the user. | +| `idToken` | string | Token issued by Web3Auth. | +| `oAuthIdToken` | string | Token issued by OAuth provider. Will be available only if you are using custom verifiers. | +| `oAuthAccessToken` | string | Access Token issued by OAuth provider. Will be available only if you are using custom verifiers. | +| `appState` | string | App state of the user. | +| `touchIDPreference` | string | Touch ID preference of the user. | +| `isMfaEnabled` | boolean | Whether Multi Factor Authentication is enabled for the user. | + + + + + +```typescript +getUserInfo(): Promise>; + +type AuthUserInfo = { + email?: string; + name?: string; + profileImage?: string; + aggregateVerifier?: string; + verifier: string; + verifierId: string; + typeOfLogin: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE; + dappShare?: string; + /** + * Token issued by Web3Auth. + */ + idToken?: string; + /** + * Token issued by OAuth provider. Will be available only if you are using + * custom verifiers. + */ + oAuthIdToken?: string; + /** + * Access Token issued by OAuth provider. Will be available only if you are using + * custom verifiers. + */ + oAuthAccessToken?: string; + appState?: string; + touchIDPreference?: string; + isMfaEnabled?: boolean; +}; +``` + + + + +### Sample Response + +```json +{ + "email": "john@gmail.com", + "name": "John Dash", + "profileImage": "https://lh3.googleusercontent.com/a/Ajjjsdsmdjmnm...", + "aggregateVerifier": "tkey-google-lrc", + "verifier": "torus", + "verifierId": "john@gmail.com", + "typeOfLogin": "google", + "dappShare": "<24 words seed phrase>", // will be sent only incase of custom verifiers + "idToken": "", + "oAuthIdToken": "", // will be sent only incase of custom verifiers + "oAuthAccessToken": "" // will be sent only incase of custom verifiers +} +``` diff --git a/docs/sdk/web/js/functions/logout.mdx b/docs/sdk/web/js/functions/logout.mdx new file mode 100644 index 000000000..732c8c57e --- /dev/null +++ b/docs/sdk/web/js/functions/logout.mdx @@ -0,0 +1,39 @@ +--- +title: logout +sidebar_label: logout +description: "@web3auth/modal Usage | Documentation - Web3Auth" +--- + +Function to disconnect from Web3Auth. + +### Usage + +```tsx +function LogoutButton() { + const handleLogout = async () => { + try { + await web3auth.logout(); + console.log("Logged out successfully"); + } catch (error) { + console.error("Error logging out:", error); + } + }; + + return ; +} +``` + +### Function Signature + +```tsx +logout(options?: { cleanup: boolean }): Promise; +``` + +#### Parameters + +- **options** (optional) +- **cleanup** (`boolean`): Whether to remove all user data during logout. + +#### Return Value + +Promise that resolves when the user is successfully logged out. diff --git a/docs/sdk/web/js/functions/manageMFA.mdx b/docs/sdk/web/js/functions/manageMFA.mdx new file mode 100644 index 000000000..5be6b8409 --- /dev/null +++ b/docs/sdk/web/js/functions/manageMFA.mdx @@ -0,0 +1,38 @@ +--- +title: Using PnP Web Modal SDK +sidebar_label: Usage +description: "@web3auth/modal Usage | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +#### `manageMFA()` + +You can redirect users to the Web3Auth Account Dashboard to manage their MFA settings by calling the +`manageMFA()` function. This method ensures that identity details are injected into the dashboard +internally for custom verifier-based dApps. In order to see what's present on the account dashboard, +please refer to the [Account Dashboard](/features/account-dashboard). + +```javascript +await web3auth.manageMFA(); +``` + +#### Interface + +```typescript +manageMFA(loginParams?: T): Promise; +``` + +- **`loginParams`** (optional): Optional parameters to include during the MFA management process. +- **Returns**: A `Promise` indicating successful redirection to the Account Dashboard. + +:::tip + +If MFA is not already enabled, the `manageMFA()` method will throw an error. Ensure you use +`enableMFA()` before calling `manageMFA()`. + +If your dApp uses default verifiers, users can directly log in to the Account Dashboard to manage +MFA. For custom verifier-based dApps, the `manageMFA()` method must be used. + +::: diff --git a/docs/sdk/web/js/functions/showCheckout.mdx b/docs/sdk/web/js/functions/showCheckout.mdx new file mode 100644 index 000000000..72709f382 --- /dev/null +++ b/docs/sdk/web/js/functions/showCheckout.mdx @@ -0,0 +1,38 @@ +--- +title: showCheckout +sidebar_label: showCheckout +description: "@web3auth/modal showCheckout Function | Documentation - Web3Auth" +--- + +Function to show the cryptocurrency checkout modal, allowing users to select their local currency +and specify the token to top up their wallet. + +:::note + +This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this +SDK in a production environment is the **Scale Plan**. You can use this feature in Web3Auth Sapphire +Devnet network for free. + +::: + +### Usage + +```ts +await web3auth.showCheckout({ + show: true, +}); // Opens the TopUp modal +``` + +### Parameters + +| Name | Description | +| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `receiveWalletAddress?` | Specifies the recipient's address. By default, it is set to the currently connected address. | +| `tokenList?` | Specifies the tokens to display in the list. By default, all tokens are shown. Use the ticker name to specify which tokens to display, such as `[USDC, USDT, ETH]`. Please checkout the coverage details for [full list of supported networks and tokens](/docs/features/topup#network-coverage). | +| `fiatList?` | Specifies the available fiat currencies enabled for purchase. Use the currency acronym to define which fiat currencies to display, such as `[USD, SGD, INR, JPY]`. Please checkout the coverage details for [full list of supported currencies](/docs/features/topup#country-and-payment-method-coverage). | +| `show` | Determines whether the checkout UI is displayed. This can be used to programmatically control its visibility. | + +### Supported Cryptocurrency + +To checkout the supported cryptocurrency and networks, +[please checkout the coverage documentation](/docs/features/topup#coverage). diff --git a/docs/sdk/web/js/functions/showSwap.mdx b/docs/sdk/web/js/functions/showSwap.mdx new file mode 100644 index 000000000..338b1b3fd --- /dev/null +++ b/docs/sdk/web/js/functions/showSwap.mdx @@ -0,0 +1,33 @@ +--- +title: showSwap +sidebar_label: showSwap +description: "@web3auth/modal showSwap Function | Documentation - Web3Auth" +--- + +Function to open the Swap interface using the Wallet Services Plugin. + +### Usage + +```ts +await web3auth.showSwap({ + show: true, +}); // Opens the Swap Modal +``` + +### Parameters + +| Name | Type | Description | +| ------------ | --------- | ------------------------------------------------------------------------------------------------------------ | +| `show` | `boolean` | Controls whether the Swap UI is visible. Set to `true` to display the Swap interface, or `false` to hide it. | +| `fromToken?` | `string` | Specifies the token being swapped from. Optional field. | +| `toToken?` | `string` | Specifies the token being swapped to. Optional field. | +| `fromValue?` | `string` | The amount of the `fromToken` to be swapped. Optional field. | +| `toAddress?` | `string` | The recipient's address for the `toToken`. Optional field. | + +### Return Type + +```ts +Promise; +``` + +The function returns a Promise that resolves when the swap modal is successfully displayed. diff --git a/docs/sdk/web/js/functions/showWalletConnectScanner.mdx b/docs/sdk/web/js/functions/showWalletConnectScanner.mdx new file mode 100644 index 000000000..9169821b8 --- /dev/null +++ b/docs/sdk/web/js/functions/showWalletConnectScanner.mdx @@ -0,0 +1,46 @@ +--- +title: showWalletConnectScanner +sidebar_label: showWalletConnectScanner +description: "@web3auth/modal showWalletConnectScanner | Documentation - Web3Auth" +--- + +Function to show the WalletConnect QR scanner using the Wallet Services Plugin. + +### Usage + +```ts +import { Web3Auth } from "@web3auth/modal"; + +// After initializing and logging in with Web3Auth +async function openWalletConnectScanner() { + try { + await web3auth.showWalletConnectScanner({ + show: true, + }); + } catch (error) { + console.error("Error opening WalletConnect scanner:", error); + } +} +``` + +### Parameters + +```ts +interface ShowWalletConnectScannerParams { + show: boolean; +} +``` + +#### show + +`boolean` + +Determines whether the Wallet Connect UI is displayed. This can be used to programmatically control +its visibility. + +### Return Type + +`Promise` + +The function returns a promise that resolves when the WalletConnect scanner has been displayed or +hidden. diff --git a/docs/sdk/web/js/functions/showWalletUI.mdx b/docs/sdk/web/js/functions/showWalletUI.mdx new file mode 100644 index 000000000..a337d47e5 --- /dev/null +++ b/docs/sdk/web/js/functions/showWalletUI.mdx @@ -0,0 +1,38 @@ +--- +title: showWalletUI +sidebar_label: showWalletUI +description: "@web3auth/modal showWalletUI | Documentation - Web3Auth" +--- + +Function to show the templated wallet UI services modal using the Wallet Services Plugin. + +### Usage + +```javascript +// Open the Wallet UI modal +await web3auth.showWalletUi({ + show: true, +}); +``` + +### Parameters + +```javascript +interface ShowWalletUIParams { + show: boolean; + path?: string; +} +``` + +#### show + +`boolean` + +Determines whether the wallet UI is displayed. This can be used to programmatically control its +visibility. + +#### path + +`string?` (optional) + +Specifies the path for the wallet services. diff --git a/docs/sdk/web/js/functions/switchChain.mdx b/docs/sdk/web/js/functions/switchChain.mdx new file mode 100644 index 000000000..ee4944c80 --- /dev/null +++ b/docs/sdk/web/js/functions/switchChain.mdx @@ -0,0 +1,70 @@ +--- +title: switchChain +sidebar_label: switchChain +description: "@web3auth/modal Usage | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +Function to switch blockchain networks with Web3Auth. + +## Usage + +```javascript +await web3auth.switchChain({ chainId: "0xaa36a7" }); +``` + +## Parameters + + + + + +| Parameter | Description | Type | Required | +| --------------------- | ---------------------------------------------------------------- | ------ | -------- | +| `{ chainId: string }` | chainId of the chain to switch to, e.g `{ chainId: "0xaa36a7" }` | Object | Yes | + + + + + +```tsx +async switchChain(params: { chainId: string }): Promise { + if (this.status !== ADAPTER_STATUS.CONNECTED || !this.connectedAdapterName) throw WalletLoginError.notConnectedError(`No wallet is connected`); + return this.walletAdapters[this.connectedAdapterName].switchChain(params); +} +``` + + + + + +## Example + +```javascript title="switchChain.js" +// Initialize Web3Auth first +// ... + +// Switch to Sepolia Testnet +try { + await web3auth.switchChain({ chainId: "0xaa36a7" }); + console.log("Successfully switched to Sepolia Testnet"); +} catch (error) { + console.error("Error switching chain:", error); +} + +// Later, switch to Ethereum Mainnet +try { + await web3auth.switchChain({ chainId: "0x1" }); + console.log("Successfully switched to Ethereum Mainnet"); +} catch (error) { + console.error("Error switching chain:", error); +} +``` diff --git a/docs/sdk/web/js/install.mdx b/docs/sdk/web/js/install.mdx new file mode 100644 index 000000000..aa791f64e --- /dev/null +++ b/docs/sdk/web/js/install.mdx @@ -0,0 +1,66 @@ +--- +title: "Installing PnP Web Modal SDK" +sidebar_label: "Installation" +description: "Installing Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" +--- + +## [`@web3auth/modal`](https://npmjs.com/package/@web3auth/modal) + +```bash npm2yarn +npm install --save @web3auth/modal +``` + +## Troubleshooting + +:::warning SDK Errors & Warnings + +Check out our guide for common **[SDK Errors & Warnings](/troubleshooting/sdk-errors-warnings)** + +::: + +### Bundler Issues: Missing Dependencies + +You might encounter errors related to missing dependencies in the browser environment when +implementing Web3Auth. + +Common error messages include `Buffer is not defined`, `process is not defined`, or other +Node.js-specific modules that aren't available in browsers by default. + +These Node.js dependencies need to be polyfilled in your application to enable Web3Auth +functionality properly. Additionally, your bundler configuration may need adjustments to handle +these dependencies correctly during the build process. + +We've prepared detailed troubleshooting guides for popular bundlers: + +- **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)** +- **[Svelte Troubleshooting Guide](/troubleshooting/svelte-issues)** +- **[Nuxt Troubleshooting Guide](/troubleshooting/nuxt-issues)** +- **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)** + +### JWT Errors + +When configuring Web3Auth's Custom Authentication, you may encounter JWT errors. Below is a list of +common JWT errors and links to their solutions: + +- [**Invalid JWT Verifiers ID field**](/troubleshooting/jwt-errors#invalid-jwt-verifiers-id-field) \ + `Error occurred while verifying params could not verify identity` + +- [**Failed to verify JWS signature**](/troubleshooting/jwt-errors#failed-to-verify-jws-signature) \ + `Error occurred while verifying params unable to verify jwt token` + +- [**Duplicate Token**](/troubleshooting/jwt-errors#duplicate-token) \ + `Could not get result from torus nodes Duplicate token found` + +- [**Expired Token**](/troubleshooting/jwt-errors#expired-token) \ + `Error occurred while verifying params timesigned is more than 1m0s ago` + +- [**Mismatch JWT Validation field**](/troubleshooting/jwt-errors#mismatch-jwt-validation-field) + +- [**Looking for Refresh Tokens?**](/troubleshooting/jwt-errors#looking-for-refresh-tokens) + +### Different Private Keys across integrations + +If you are getting different private keys across integrations, it is likely because you are using +different conflicting projects, SDKs, or configurations. Please refer to our troubleshooting guide +**[Different Private Keys across integrations](/troubleshooting/different-private-key)** to +understand and resolve this issue. diff --git a/docs/sdk/web/js/js.mdx b/docs/sdk/web/js/js.mdx new file mode 100644 index 000000000..2b8e9bb1c --- /dev/null +++ b/docs/sdk/web/js/js.mdx @@ -0,0 +1,57 @@ +--- +title: Web3Auth Plug and Play Web SDK +sidebar_label: Overview +description: "Web3Auth PnP Web SDK | Documentation - Web3Auth" +--- + +import ExampleCards from "@theme/ExampleCards"; +import { pnpModalExamples, QUICK_START } from "@site/src/common/maps"; + +Web3Auth Plug and Play (PnP) provides a comprehensive authentication solution for Web3 applications, +handling everything from social logins to external wallet connections, giving you a simplified +interface to connect to the user's preferred wallet. It serves as a unified connection experience +for all wallet types, simplifying user onboarding and authentication management. + +## Web3Auth SDK [`@web3auth/modal`](/sdk/pnp/web/modal/) + +The Web3Auth SDK provides two main integration approaches: + +### Modal Approach + +- **Complete UI Package**: Includes a ready-to-use modal interface with all authentication options +- **Customizable Appearance**: Extensive whitelabeling options to match your application's branding +- **Simple Integration**: Minimal code required to implement full authentication capabilities + +### No Modal Approach + +The same SDK can be used without the pre-built UI components: + +- **Complete UI Control**: Build your own authentication interface from scratch +- **Invisible Integration**: Can be implemented in a way that's completely transparent to users +- **Core Functionality**: Includes all authentication adapters and wallet connection methods +- **Flexible Implementation**: Can be integrated at any level of your application architecture + +## Requirements + +- This is a frontend SDK and can only run in a browser environment +- Basic knowledge of JavaScipt +- Supports all major JavaScript Frameworks, Libraries and Bundlers + +## Resources + +- [Quick Start](/quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0): Get Started + with an easy to follow integration of Web3Auth + +- [Example Applications](./examples): Explore our example applications and try the SDK yourself. + +- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers. + +- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find + the source code on our GitHub repository. + +- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community + to get support from our team and other developers. + +## Quick Starts + + obj.type === QUICK_START)} /> diff --git a/docs/sdk/web/js/setup.mdx b/docs/sdk/web/js/setup.mdx new file mode 100644 index 000000000..3e0fdf515 --- /dev/null +++ b/docs/sdk/web/js/setup.mdx @@ -0,0 +1,74 @@ +--- +title: Setup +sidebar_label: Setup +description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth" +--- + +## Instantiating Web3Auth + +### 1. Import the Web3Auth class + +First, import the `Web3Auth` class from the `@web3auth/modal` package: + +```javascript +import { Web3Auth } from "@web3auth/modal"; +``` + +### 2. Create a Web3Auth instance + +Next, create an instance of the `Web3Auth` class. You'll need to pass the `Web3AuthOptions` object, +which contains the configuration you set up in the +[Configuration Section](/sdk/pnp/web/modal/config): + +```javascript +const web3auth = new Web3Auth(Web3AuthOptions); +``` + +## Initialize Web3Auth + +The final step in the whole setup process is to initialize the Web3Auth instance. This is done by +calling the `initModal` function of the `web3auth` instance we created above. + +:::caution + +The `initModal` needs to be called only once, ideally within the constructor. This has to be done +before the user tries to login or connect to a wallet. + +::: + +```javascript +await web3auth.initModal(); +``` + +## Example + +```ts +import { Component } from "@angular/core"; +// focus-next-line +import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal"; + +// focus-start +const web3auth = new Web3Auth({ + clientId: "YOUR_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, +}); +// focus-end + +@Component({ + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"], +}) +export class AppComponent { + + async ngOnInit() { + const init = async () => { + // focus-next-line + await web3auth.initModal(); + }; + + init(); + } + ... +} +``` diff --git a/docs/sdk/web/react/ethereum-hooks.mdx b/docs/sdk/web/react/ethereum-hooks.mdx new file mode 100644 index 000000000..fb6548145 --- /dev/null +++ b/docs/sdk/web/react/ethereum-hooks.mdx @@ -0,0 +1,117 @@ +--- +title: React Hooks for Ethereum (via Wagmi) +sidebar_label: Ethereum Hooks +description: "@web3auth/modal Ethereum React Hooks | Documentation - Web3Auth" +--- + +Web3Auth supports hooks based Ethereum wallet operations in React via [Wagmi](https://wagmi.sh/). +Once you have set up Wagmi using the Web3Auth Modal SDK (see the +[Setup guide](./setup#wagmi-integration)), you can use all Wagmi hooks directly in your +application—no additional wrappers or configuration are needed beyond the initial setup. + +:::info + +Wagmi provides a comprehensive set of React hooks for Ethereum and EVM-compatible chains. Web3Auth +integrates seamlessly with Wagmi, so you can use hooks like `useAccount`, `useBalance`, +`useSendTransaction`, and more, out of the box. + +::: + +## Example Usage + +Below are some examples of using Wagmi hooks in your dApp after Web3Auth and Wagmi are set up. You +can note these functions work directly with Wagmi. Once you have set up Wagmi with Web3Auth, you can +use any Wagmi hook as you would in a standard Wagmi application. + +### Get Account Balance + +```tsx +import { useAccount, useBalance } from "wagmi"; +import { formatUnits } from "viem"; + +export function Balance() { + const { address } = useAccount(); + const { data, isLoading, error } = useBalance({ address }); + + return ( +
+

Balance

+
+ {data?.value !== undefined && `${formatUnits(data.value, data.decimals)} ${data.symbol}`}{" "} + {isLoading && "Loading..."} {error && "Error: " + error.message} +
+
+ ); +} +``` + +### Send Transaction + +```tsx +import { FormEvent } from "react"; +import { useWaitForTransactionReceipt, useSendTransaction, BaseError } from "wagmi"; +import { Hex, parseEther } from "viem"; + +export function SendTransaction() { + const { data: hash, error, isPending, sendTransaction } = useSendTransaction(); + + async function submit(e: FormEvent) { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const to = formData.get("address") as Hex; + const value = formData.get("value") as string; + sendTransaction({ to, value: parseEther(value) }); + } + + const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({ + hash, + }); + + return ( +
+

Send Transaction

+
+ + + +
+ {hash &&
Transaction Hash: {hash}
} + {isConfirming && "Waiting for confirmation..."} + {isConfirmed && "Transaction confirmed."} + {error &&
Error: {(error as BaseError).shortMessage || error.message}
} +
+ ); +} +``` + +### Switch Chain + +```tsx +import { useChainId, useSwitchChain } from "wagmi"; + +export function SwitchChain() { + const chainId = useChainId(); + const { chains, switchChain, error } = useSwitchChain(); + + return ( +
+

Switch Chain

+

Connected to {chainId}

+ {chains.map((chain) => ( + + ))} + {error?.message} +
+ ); +} +``` diff --git a/docs/sdk/web/react/examples.mdx b/docs/sdk/web/react/examples.mdx new file mode 100644 index 000000000..c5558c2b7 --- /dev/null +++ b/docs/sdk/web/react/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP Web Modal SDK +sidebar_label: Examples +description: "@web3auth/modal Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpModalExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/web/react/hooks/hooks.mdx b/docs/sdk/web/react/hooks/hooks.mdx new file mode 100644 index 000000000..7af1f2d7d --- /dev/null +++ b/docs/sdk/web/react/hooks/hooks.mdx @@ -0,0 +1,63 @@ +--- +title: React Hooks for Web3Auth Modal +sidebar_label: Overview +description: "@web3auth/modal React Hooks | Documentation - Web3Auth" +--- + +Web3Auth offers a comprehensive suite of React hooks to streamline integration and state management +within your React applications. These hooks abstract away common authentication and wallet +operations, enabling you to implement Web3Auth features with minimal boilerplate. Each hook is +focused on a specific aspect of Web3Auth functionality, making it easy to implement authentication, +wallet operations, and blockchain interactions in your React projects. + +## List of React Hooks + +:::tip + +For detailed usage, configuration options, and code examples, refer to the dedicated documentation +page for each hook. + +::: + +### Web3Auth Hooks + +| Hook Name | Description | +| ------------- | ----------------------------------------------------------- | +| `useWeb3Auth` | Core hook for Web3Auth initialization and state management. | + +### Authentication Hooks + +| Hook Name | Description | +| ----------------------- | -------------------------------------- | +| `useWeb3AuthConnect` | Handles Web3Auth connection processes. | +| `useWeb3AuthDisconnect` | Manages disconnection from Web3Auth. | + +### Identity Hooks + +| Hook Name | Description | +| ------------------ | -------------------------------------------------------- | +| `useIdentityToken` | Retrieves and manages identity tokens. | +| `useWeb3AuthUser` | Provides access to the authenticated user's information. | + +### Blockchain Hooks + +| Hook Name | Description | +| ---------------- | ------------------------------------------------------- | +| `useSwitchChain` | Allows switching between different blockchain networks. | + +### MFA Hooks + +| Hook Name | Description | +| -------------- | ---------------------------------------------------------------- | +| `useEnableMFA` | Enables Multi-Factor Authentication (MFA) for enhanced security. | +| `useManageMFA` | Provides functionality to manage MFA settings. | + +### Wallet Services Plugin Hooks + +| Hook Name | Description | +| ------------------------- | --------------------------------------------------- | +| `useWalletConnectScanner` | Integrates WalletConnect scanner functionality. | +| `useWalletUI` | Manages wallet UI components and user interactions. | +| `useCheckout` | Facilitates cryptocurrency checkout processes. | +| `useSwap` | Enables token swapping capabilities. | +| `useWalletServicesPlugin` | Provides access to wallet service plugins. | diff --git a/docs/sdk/web/react/hooks/useCheckout.mdx b/docs/sdk/web/react/hooks/useCheckout.mdx new file mode 100644 index 000000000..7a677b2a8 --- /dev/null +++ b/docs/sdk/web/react/hooks/useCheckout.mdx @@ -0,0 +1,55 @@ +--- +title: useCheckout +sidebar_label: useCheckout +description: "@web3auth/modal React Hooks useCheckout | Documentation - Web3Auth" +--- + +Hook to show the cryptocurrency checkout modal using Wallet Services Plugin. + +### Import + +```tsx +import { useCheckout } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useCheckout } from "@web3auth/modal/react"; + +function CheckoutButton() { + const { showCheckout, loading, error } = useCheckout(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseCheckout } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the checkout process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the checkout process. + +#### showCheckout + +`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise` + +Function to initiate the checkout modal. Optional `showCheckoutParams` can be passed to customize +the modal. diff --git a/docs/sdk/web/react/hooks/useEnableMFA.mdx b/docs/sdk/web/react/hooks/useEnableMFA.mdx new file mode 100644 index 000000000..d0d4592b4 --- /dev/null +++ b/docs/sdk/web/react/hooks/useEnableMFA.mdx @@ -0,0 +1,55 @@ +--- +title: useEnableMFA +sidebar_label: useEnableMFA +description: "@web3auth/modal React Hooks useEnableMFA | Documentation - Web3Auth" +--- + +Hook to enable Multi-Factor Authentication (MFA) using Web3Auth. + +### Import + +```tsx +import { useEnableMFA } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useEnableMFA } from "@web3auth/modal/react"; + +function EnableMFAButton() { + const { enableMFA, loading, error } = useEnableMFA(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseEnableMFA } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the MFA enabling process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the MFA enabling process. + +#### enableMFA + +`(params?: T) => Promise` + +Function to initiate the MFA enabling process. Accepts optional parameters depending on the MFA +method or configuration required by your implementation. diff --git a/docs/sdk/web/react/hooks/useIdentityToken.mdx b/docs/sdk/web/react/hooks/useIdentityToken.mdx new file mode 100644 index 000000000..c88b71d7f --- /dev/null +++ b/docs/sdk/web/react/hooks/useIdentityToken.mdx @@ -0,0 +1,63 @@ +--- +title: useIdentityToken +sidebar_label: useIdentityToken +description: "@web3auth/modal React Hooks useIdentityToken | Documentation - Web3Auth" +--- + +Hook to retrieve and manage the identity token from Web3Auth. + +### Import + +```tsx +import { useIdentityToken } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useIdentityToken } from "@web3auth/modal/react"; + +function IdentityTokenButton() { + const { authenticateUser, loading, error, token } = useIdentityToken(); + + return ( +
+ + {token &&
Token: {token}
} + {error &&
Error: {error.message}
} +
+ ); +} +``` + +### Return Type + +```tsx +import { type IUseIdentityToken } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the authentication process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the authentication process. + +#### token + +`string | null` + +The identity token returned after successful authentication. + +#### authenticateUser + +`() => Promise` + +Function to initiate the authentication process and retrieve the identity token. diff --git a/docs/sdk/web/react/hooks/useManageMFA.mdx b/docs/sdk/web/react/hooks/useManageMFA.mdx new file mode 100644 index 000000000..a1ec53468 --- /dev/null +++ b/docs/sdk/web/react/hooks/useManageMFA.mdx @@ -0,0 +1,56 @@ +--- +title: useManageMFA +sidebar_label: useManageMFA +description: "@web3auth/modal React Hooks useManageMFA | Documentation - Web3Auth" +--- + +Hook to manage Multi-Factor Authentication (MFA) using Web3Auth. This hook provides a convenient way +to trigger MFA management actions, such as updating or configuring MFA settings for the user. + +### Import + +```tsx +import { useManageMFA } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useManageMFA } from "@web3auth/modal/react"; + +function ManageMFAButton() { + const { manageMFA, loading, error } = useManageMFA(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseManageMFA } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the MFA management process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the MFA management process. + +#### manageMFA + +`(params?: T) => Promise` + +Function to initiate the MFA management process. Accepts optional parameters depending on the MFA +action or configuration required by your implementation. diff --git a/docs/sdk/web/react/hooks/useSwap.mdx b/docs/sdk/web/react/hooks/useSwap.mdx new file mode 100644 index 000000000..3ca23413e --- /dev/null +++ b/docs/sdk/web/react/hooks/useSwap.mdx @@ -0,0 +1,56 @@ +--- +title: useSwap +sidebar_label: useSwap +description: "@web3auth/modal React Hooks useSwap | Documentation - Web3Auth" +--- + +Hook to open the Swap interface using the Wallet Services Plugin. + +### Import + +```tsx +import { useSwap } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useSwap } from "@web3auth/modal/react"; + +function SwapButton() { + const { showSwap, loading, error } = useSwap(); + + return ( + <> + + {error &&
Error: {error.message}
} + + ); +} +``` + +### Return Type + +```tsx +import { type IUseSwap } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the swap interface is being opened. + +#### error + +`Web3AuthError | null` + +Error that occurred while opening the swap interface. + +#### showSwap + +`(showSwapParams?: BaseEmbedControllerState["showSwap"]) => Promise` + +Function to open the swap interface. Accepts optional parameters for customizing the swap view. diff --git a/docs/sdk/web/react/hooks/useSwitchChain.mdx b/docs/sdk/web/react/hooks/useSwitchChain.mdx new file mode 100644 index 000000000..75fba2cbc --- /dev/null +++ b/docs/sdk/web/react/hooks/useSwitchChain.mdx @@ -0,0 +1,91 @@ +--- +title: useSwitchChain +sidebar_label: useSwitchChain +description: "@web3auth/modal React Hooks useSwitchChain | Documentation - Web3Auth" +--- + +Hook to switch blockchain networks with Web3Auth. + +### Import + +```tsx +import { useSwitchChain } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useSwitchChain } from "@web3auth/modal/react"; + +function SwitchChainButton() { + const { switchChain, loading, error } = useSwitchChain(); + + return ( +
+ + {error && Error: {error.message}} +
+ ); +} +``` + +### Return Type + +```tsx +import { type IUseSwitchChain } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the chain switching process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the chain switching process. + +#### switchChain + +`(chainId: string) => Promise` + +Function to initiate the chain switch. Pass the target `chainId` as a string (e.g., "0x1" for +Ethereum Mainnet). + +## Example + +```tsx title="switchChain.tsx" +import { useSwitchChain, useWeb3Auth } from "@web3auth/modal/react"; + +export function SwitchChain() { + const { web3Auth } = useWeb3Auth(); + + const { switchChain, error } = useSwitchChain(); + + return ( +
+

Switch Chain

+

Connected to {web3Auth?.currentChain?.displayName}

+ {web3Auth?.coreOptions.chains?.map((chain) => { + return ( + + ); + })} + + {error?.message} +
+ ); +} +``` diff --git a/docs/sdk/web/react/hooks/useWalletConnectScanner.mdx b/docs/sdk/web/react/hooks/useWalletConnectScanner.mdx new file mode 100644 index 000000000..f3c84af16 --- /dev/null +++ b/docs/sdk/web/react/hooks/useWalletConnectScanner.mdx @@ -0,0 +1,55 @@ +--- +title: useWalletConnectScanner +sidebar_label: useWalletConnectScanner +description: "@web3auth/modal React Hooks useWalletConnectScanner | Documentation - Web3Auth" +--- + +Hook to show the WalletConnect QR scanner using the Wallet Services Plugin. + +### Import + +```tsx +import { useWalletConnectScanner } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWalletConnectScanner } from "@web3auth/modal/react"; + +function WalletConnectScannerButton() { + const { showWalletConnectScanner, loading, error } = useWalletConnectScanner(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseWalletConnectScanner } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the scanner opening process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the scanner opening process. + +#### showWalletConnectScanner + +`(showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise` + +Function to show the WalletConnect QR scanner. Accepts optional parameters for customizing the +scanner behavior. diff --git a/docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx b/docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx new file mode 100644 index 000000000..e915fde36 --- /dev/null +++ b/docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx @@ -0,0 +1,72 @@ +--- +title: useWalletServicesPlugin +sidebar_label: useWalletServicesPlugin +description: "@web3auth/modal React Hooks useWalletServicesPlugin | Documentation - Web3Auth" +--- + +Hook to access the Wallet Services Plugin context, enabling wallet-related features such as +WalletConnect, Checkout, Swap, and Wallet UI. + +### Import + +```tsx +import { useWalletServicesPlugin } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWalletServicesPlugin } from "@web3auth/modal/react"; + +function WalletServicesExample() { + const { isPluginConnected, showWalletConnectScanner, showCheckout, showWalletUI } = + useWalletServicesPlugin(); + + return ( + <> + + + + + ); +} +``` + +### Return Type + +```tsx +import { type IWalletServicesContext } from "@web3auth/modal/react"; +``` + +#### isPluginConnected + +`boolean` + +Whether the Wallet Services Plugin is connected and ready to use. + +#### showWalletConnectScanner + +`(showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise` + +Shows the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner +behavior. + +#### showCheckout + +`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise` + +Shows the TopUp modal for fiat-to-crypto checkout. Accepts optional parameters for customizing the +checkout experience. + +#### showWalletUI + +`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise` + +Shows the Wallet Services modal UI. Accepts optional parameters for customizing the wallet UI +experience. diff --git a/docs/sdk/web/react/hooks/useWalletUI.mdx b/docs/sdk/web/react/hooks/useWalletUI.mdx new file mode 100644 index 000000000..9b1f8d4f9 --- /dev/null +++ b/docs/sdk/web/react/hooks/useWalletUI.mdx @@ -0,0 +1,55 @@ +--- +title: useWalletUI +sidebar_label: useWalletUI +description: "@web3auth/modal React Hooks useWalletUI | Documentation - Web3Auth" +--- + +Hook to show the Wallet Services UI modal using the Wallet Services Plugin. + +### Import + +```tsx +import { useWalletUI } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWalletUI } from "@web3auth/modal/react"; + +function WalletUIButton() { + const { showWalletUI, loading, error } = useWalletUI(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseWalletUI } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the Wallet UI opening process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the Wallet UI opening process. + +#### showWalletUI + +`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise` + +Function to show the Wallet Services modal UI. Accepts optional parameters for customizing the +wallet UI experience. diff --git a/docs/sdk/web/react/hooks/useWeb3Auth.mdx b/docs/sdk/web/react/hooks/useWeb3Auth.mdx new file mode 100644 index 000000000..daf43290a --- /dev/null +++ b/docs/sdk/web/react/hooks/useWeb3Auth.mdx @@ -0,0 +1,98 @@ +--- +title: useWeb3Auth +sidebar_label: useWeb3Auth +description: "@web3auth/modal React Hooks useWeb3Auth | Documentation - Web3Auth" +--- + +Hook to access the Web3Auth context. + +### Import + +```tsx +import { useWeb3Auth } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWeb3Auth } from "@web3auth/modal/react"; + +function App() { + const { web3Auth, isConnected, isInitializing, provider, status, initError } = useWeb3Auth(); + + if (isConnected) { + // User is connected + console.log("Connected with provider:", provider); + } + if (isInitializing) { + // Web3Auth is initializing + console.log("Web3Auth is initializing"); + } + if (provider) { + // Web3Auth provider is connected + console.log("Web3Auth provider is connected"); + } + if (status) { + // Web3Auth status + console.log("Web3Auth status:", status); + } + if (initError) { + // Web3Auth initialization error + console.log("Web3Auth initialization error:", initError); + } +} +``` + +### Return Type + +```tsx +import { type IUseWeb3Auth } from "@web3auth/modal/react"; +``` + +#### initError + +`Error | null` + +Error that occurred during Web3Auth initialization. + +#### isConnected + +`boolean` + +Whether the user is connected to Web3Auth. + +#### isInitialized + +`boolean` + +Whether Web3Auth has completed initialization. + +#### isInitializing + +`boolean` + +Whether Web3Auth is currently initializing. + +#### provider + +`IProvider | null` + +Connected provider from Web3Auth. + +#### status + +`string` + +Current status of the Web3Auth connection. + +#### web3Auth + +`Web3Auth` + +The Web3Auth instance. + +#### getPlugin + +`(pluginName: PLUGIN_NAME) => IPlugin | null` + +Helper function to get a plugin by name. diff --git a/docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx b/docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx new file mode 100644 index 000000000..09e4450b9 --- /dev/null +++ b/docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx @@ -0,0 +1,66 @@ +--- +title: useWeb3AuthConnect +sidebar_label: useWeb3AuthConnect +description: "@web3auth/modal React Hooks useWeb3AuthConnect | Documentation - Web3Auth" +--- + +Hook to connect to Web3Auth. + +### Import + +```tsx +import { useWeb3AuthConnect } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWeb3AuthConnect } from "@web3auth/modal/react"; + +function ConnectButton() { + const { connect, loading, isConnected, error } = useWeb3AuthConnect(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseWeb3AuthConnect } from "@web3auth/modal/react"; +``` + +#### isConnected + +`boolean` + +Whether the user is connected to Web3Auth. + +#### loading + +`boolean` + +Whether the connection process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the connection process. + +#### connectorName + +`WALLET_CONNECTOR_TYPE | null` + +Name of the connected connector. + +#### connect + +`() => Promise` + +Function to initiate the connection process. diff --git a/docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx b/docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx new file mode 100644 index 000000000..1878891a9 --- /dev/null +++ b/docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx @@ -0,0 +1,55 @@ +--- +title: useWeb3AuthDisconnect +sidebar_label: useWeb3AuthDisconnect +description: "@web3auth/modal React Hooks useWeb3AuthDisconnect | Documentation - Web3Auth" +--- + +Hook to disconnect from Web3Auth. + +### Import + +```tsx +import { useWeb3AuthDisconnect } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWeb3AuthDisconnect } from "@web3auth/modal/react"; + +function DisconnectButton() { + const { disconnect, loading, error } = useWeb3AuthDisconnect(); + + return ( + + {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseWeb3AuthDisconnect } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the disconnection process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the disconnection process. + +#### disconnect + +`(options?: { cleanup: boolean }) => Promise` + +Function to initiate the disconnection process. Optional `cleanup` parameter controls whether to +remove all user data. diff --git a/docs/sdk/web/react/hooks/useWeb3AuthUser.mdx b/docs/sdk/web/react/hooks/useWeb3AuthUser.mdx new file mode 100644 index 000000000..dbec1c35f --- /dev/null +++ b/docs/sdk/web/react/hooks/useWeb3AuthUser.mdx @@ -0,0 +1,72 @@ +--- +title: useWeb3AuthUser +sidebar_label: useWeb3AuthUser +description: "@web3auth/modal React Hooks useWeb3AuthUser | Documentation - Web3Auth" +--- + +Hook to fetch and manage the current Web3Auth user information. + +### Import + +```tsx +import { useWeb3AuthUser } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useWeb3AuthUser } from "@web3auth/modal/react"; + +function UserInfo() { + const { userInfo, loading, error, isMFAEnabled, getUserInfo } = useWeb3AuthUser(); + + if (loading) return
Loading user info...
; + if (error) return
Error: {error.message}
; + if (!userInfo) return
No user info available.
; + + return ( +
+ 
{JSON.stringify(userInfo, null, 2)}
+
MFA Enabled: {isMFAEnabled ? "Yes" : "No"}
+ +
+ {error &&
{error.message}
} + ); +} +``` + +### Return Type + +```tsx +import { type IUseWeb3AuthUser } from "@web3auth/modal/react"; +``` + +#### loading + +`boolean` + +Whether the user info fetching process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the user info fetching process. + +#### userInfo + +`Partial | null` + +The current user's information, or null if not available. + +#### isMFAEnabled + +`boolean` + +Whether Multi-Factor Authentication (MFA) is enabled for the user. + +#### getUserInfo + +`() => Promise | null>` + +Function to fetch the latest user information from Web3Auth. diff --git a/docs/sdk/web/react/install.mdx b/docs/sdk/web/react/install.mdx new file mode 100644 index 000000000..aa791f64e --- /dev/null +++ b/docs/sdk/web/react/install.mdx @@ -0,0 +1,66 @@ +--- +title: "Installing PnP Web Modal SDK" +sidebar_label: "Installation" +description: "Installing Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" +--- + +## [`@web3auth/modal`](https://npmjs.com/package/@web3auth/modal) + +```bash npm2yarn +npm install --save @web3auth/modal +``` + +## Troubleshooting + +:::warning SDK Errors & Warnings + +Check out our guide for common **[SDK Errors & Warnings](/troubleshooting/sdk-errors-warnings)** + +::: + +### Bundler Issues: Missing Dependencies + +You might encounter errors related to missing dependencies in the browser environment when +implementing Web3Auth. + +Common error messages include `Buffer is not defined`, `process is not defined`, or other +Node.js-specific modules that aren't available in browsers by default. + +These Node.js dependencies need to be polyfilled in your application to enable Web3Auth +functionality properly. Additionally, your bundler configuration may need adjustments to handle +these dependencies correctly during the build process. + +We've prepared detailed troubleshooting guides for popular bundlers: + +- **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)** +- **[Svelte Troubleshooting Guide](/troubleshooting/svelte-issues)** +- **[Nuxt Troubleshooting Guide](/troubleshooting/nuxt-issues)** +- **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)** + +### JWT Errors + +When configuring Web3Auth's Custom Authentication, you may encounter JWT errors. Below is a list of +common JWT errors and links to their solutions: + +- [**Invalid JWT Verifiers ID field**](/troubleshooting/jwt-errors#invalid-jwt-verifiers-id-field) \ + `Error occurred while verifying params could not verify identity` + +- [**Failed to verify JWS signature**](/troubleshooting/jwt-errors#failed-to-verify-jws-signature) \ + `Error occurred while verifying params unable to verify jwt token` + +- [**Duplicate Token**](/troubleshooting/jwt-errors#duplicate-token) \ + `Could not get result from torus nodes Duplicate token found` + +- [**Expired Token**](/troubleshooting/jwt-errors#expired-token) \ + `Error occurred while verifying params timesigned is more than 1m0s ago` + +- [**Mismatch JWT Validation field**](/troubleshooting/jwt-errors#mismatch-jwt-validation-field) + +- [**Looking for Refresh Tokens?**](/troubleshooting/jwt-errors#looking-for-refresh-tokens) + +### Different Private Keys across integrations + +If you are getting different private keys across integrations, it is likely because you are using +different conflicting projects, SDKs, or configurations. Please refer to our troubleshooting guide +**[Different Private Keys across integrations](/troubleshooting/different-private-key)** to +understand and resolve this issue. diff --git a/docs/sdk/web/react/react.mdx b/docs/sdk/web/react/react.mdx new file mode 100644 index 000000000..2b8e9bb1c --- /dev/null +++ b/docs/sdk/web/react/react.mdx @@ -0,0 +1,57 @@ +--- +title: Web3Auth Plug and Play Web SDK +sidebar_label: Overview +description: "Web3Auth PnP Web SDK | Documentation - Web3Auth" +--- + +import ExampleCards from "@theme/ExampleCards"; +import { pnpModalExamples, QUICK_START } from "@site/src/common/maps"; + +Web3Auth Plug and Play (PnP) provides a comprehensive authentication solution for Web3 applications, +handling everything from social logins to external wallet connections, giving you a simplified +interface to connect to the user's preferred wallet. It serves as a unified connection experience +for all wallet types, simplifying user onboarding and authentication management. + +## Web3Auth SDK [`@web3auth/modal`](/sdk/pnp/web/modal/) + +The Web3Auth SDK provides two main integration approaches: + +### Modal Approach + +- **Complete UI Package**: Includes a ready-to-use modal interface with all authentication options +- **Customizable Appearance**: Extensive whitelabeling options to match your application's branding +- **Simple Integration**: Minimal code required to implement full authentication capabilities + +### No Modal Approach + +The same SDK can be used without the pre-built UI components: + +- **Complete UI Control**: Build your own authentication interface from scratch +- **Invisible Integration**: Can be implemented in a way that's completely transparent to users +- **Core Functionality**: Includes all authentication adapters and wallet connection methods +- **Flexible Implementation**: Can be integrated at any level of your application architecture + +## Requirements + +- This is a frontend SDK and can only run in a browser environment +- Basic knowledge of JavaScipt +- Supports all major JavaScript Frameworks, Libraries and Bundlers + +## Resources + +- [Quick Start](/quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0): Get Started + with an easy to follow integration of Web3Auth + +- [Example Applications](./examples): Explore our example applications and try the SDK yourself. + +- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers. + +- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find + the source code on our GitHub repository. + +- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community + to get support from our team and other developers. + +## Quick Starts + + obj.type === QUICK_START)} /> diff --git a/docs/sdk/web/react/setup.mdx b/docs/sdk/web/react/setup.mdx new file mode 100644 index 000000000..4cb84f5c0 --- /dev/null +++ b/docs/sdk/web/react/setup.mdx @@ -0,0 +1,104 @@ +--- +title: Setting up React Hooks +sidebar_label: Setup +description: "@web3auth/modal React Hooks Setup | Documentation - Web3Auth" +--- + +For a seamless integration in React, Web3Auth provides essential React hooks for Web3Auth Modal SDK. +These hooks, paired with Wagmi or Solana Hooks (our custom implementation), become a powerful +combination for building your dApp quickly and efficiently. + +## Web3Auth Provider + +In your main entry file (generally `index.tsx` or `main.tsx`), import the `Web3AuthProvider` +component and wrap your application with it. + +```tsx title="main.tsx" +import "./index.css"; + +import ReactDOM from "react-dom/client"; +// focus-next-line +import { Web3AuthProvider } from "@web3auth/modal/react"; +import web3AuthContextConfig from "./web3authContext"; + +import App from "./App"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + {/* focus-start */} + + + , + {/* focus-end */} +); +``` + +### Config + +The Web3Auth Provider requires a `config` object to be passed in. This config object contains the +config you setup in the [Configuration Section](/sdk/pnp/web/modal/config). + +```tsx title="web3authContext.tsx" +// focus-next-line +import { type Web3AuthContextConfig } from "@web3auth/modal/react"; +import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal"; + +const web3AuthOptions: Web3AuthOptions = { + clientId: "YOUR_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET +}; + +// focus-start +const web3AuthContextConfig: Web3AuthContextConfig = { + web3AuthOptions, +}; +// focus-end +``` + +## Wagmi Integration + +If you are using Wagmi, you need to install the `wagmi` and `@tanstack/react-query` packages and use +the **Web3Auth implementation of `WagmiProvider`** for configuration. + +:::info + +The Web3Auth implementation of `WagmiProvider` is a custom implementation that is used to integrate +with the Web3Auth Modal SDK. It is a wrapper around the `WagmiProvider` that makes it compatible. + +With this implementation, you can use the Wagmi hooks, however **no external connectors are +supported**. Web3Auth provides a whole suite of connectors which you can use directly for a better +experience with external wallets. + +::: + +```bash npm2yarn +npm install wagmi @tanstack/react-query +``` + +```tsx title="main.tsx" +import "./index.css"; + +import ReactDOM from "react-dom/client"; +import { Web3AuthProvider } from "@web3auth/modal/react"; +import web3AuthContextConfig from "./web3authContext"; +// focus-start +import { WagmiProvider } from "@web3auth/modal/react/wagmi"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +// focus-end + +import App from "./App"; + +// focus-next-line +const queryClient = new QueryClient(); + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + {/* focus-start */} + + + + + + {/* focus-end */} + , +); +``` diff --git a/docs/sdk/web/react/solana-hooks/solana-hooks.mdx b/docs/sdk/web/react/solana-hooks/solana-hooks.mdx new file mode 100644 index 000000000..4a2247310 --- /dev/null +++ b/docs/sdk/web/react/solana-hooks/solana-hooks.mdx @@ -0,0 +1,26 @@ +--- +title: React Hooks for Solana +sidebar_label: Overview +description: "@web3auth/modal Solana React Hooks | Documentation - Web3Auth" +--- + +Web3Auth provides a set of React hooks for basic Solana wallet operations. These hooks are designed +to simplify common Solana interactions in your React app. + +:::info + +For advanced Solana features, you should use +[`@solana/web3.js`](https://solana-labs.github.io/solana-web3.js/) on top of the hooks provided. + +::: + +## Solana Hooks + +| Hook Name | Description | +| --------------------------- | -------------------------------------------- | +| `useSignAndSendTransaction` | Sign and send a Solana transaction. | +| `useSignMessage` | Sign a message with the Solana wallet. | +| `useSignTransaction` | Sign a Solana transaction (without sending). | +| `useSolanaWallet` | Access Solana wallet state and utilities. | + +Further code and advanced usage should be implemented using Solana's web3.js library as needed. diff --git a/docs/sdk/web/react/solana-hooks/useSignAndSendTransaction.mdx b/docs/sdk/web/react/solana-hooks/useSignAndSendTransaction.mdx new file mode 100644 index 000000000..bb7bde892 --- /dev/null +++ b/docs/sdk/web/react/solana-hooks/useSignAndSendTransaction.mdx @@ -0,0 +1,144 @@ +--- +title: useSignAndSendTransaction +sidebar_label: useSignAndSendTransaction +description: "@web3auth/modal React Hook useSignAndSendTransaction | Documentation - Web3Auth" +--- + +Hook to sign and send a Solana transaction using the connected Solana wallet from Web3Auth. + +### Import + +```tsx +import { useSignAndSendTransaction } from "@web3auth/modal/react/solana"; +``` + +### Usage + +```tsx +import { useSignAndSendTransaction } from "@web3auth/modal/react/solana"; +import { TransactionOrVersionedTransaction } from "@web3auth/modal"; + +function SignAndSendTransactionButton({ + transaction, +}: { + transaction: TransactionOrVersionedTransaction; +}) { + const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction(); + + const handleSignAndSend = async () => { + try { + const signature = await signAndSendTransaction(transaction); + // Do something with signature + } catch (e) { + // Handle error + } + }; + + return ( +
+ + {error &&
Error: {error.message}
} + {data &&
Signature: {data}
} +
+ ); +} +``` + +### Return Type + +```ts +export type IUseSignAndSendTransaction = { + loading: boolean; + error: Web3AuthError | null; + data: string | null; + signAndSendTransaction: (transaction: TransactionOrVersionedTransaction) => Promise; +}; +``` + +#### loading + +`boolean` + +Indicates if the transaction signing and sending is in progress. + +#### error + +`Web3AuthError | null` + +Error object if signing or sending fails, otherwise null. + +#### data + +`string | null` + +The transaction signature as a string, or null if not signed yet. + +#### signAndSendTransaction + +`(transaction: TransactionOrVersionedTransaction) => Promise` + +Function to sign and send a transaction. Returns the transaction signature as a string. + +## Example + +```tsx title="sendVersionedTransaction.tsx" +import { FormEvent } from "react"; +import { useSolanaWallet, useSignAndSendTransaction } from "@web3auth/modal/react/solana"; +import { + LAMPORTS_PER_SOL, + PublicKey, + SystemProgram, + TransactionMessage, + VersionedTransaction, +} from "@solana/web3.js"; + +export function SendVersionedTransaction() { + const { + data: hash, + error, + loading: isPending, + signAndSendTransaction, + } = useSignAndSendTransaction(); + const { accounts, connection } = useSolanaWallet(); + + async function submit(e: FormEvent) { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const to = formData.get("address") as string; + const value = formData.get("value") as string; + + const block = await connection!.getLatestBlockhash(); + const TransactionInstruction = SystemProgram.transfer({ + fromPubkey: new PublicKey(accounts![0]), + toPubkey: new PublicKey(to), + lamports: Number(value) * LAMPORTS_PER_SOL, + }); + + const transactionMessage = new TransactionMessage({ + recentBlockhash: block.blockhash, + instructions: [TransactionInstruction], + payerKey: new PublicKey(accounts![0]), + }); + + const transaction = new VersionedTransaction(transactionMessage.compileToV0Message()); + signAndSendTransaction(transaction); + } + + return ( +
+

Send Versioned Transaction

+
+ + + +
+ {hash &&
Transaction Hash: {hash}
} + {error &&
Error: {error.message}
} +
+ ); +} +``` diff --git a/docs/sdk/web/react/solana-hooks/useSignMessage.mdx b/docs/sdk/web/react/solana-hooks/useSignMessage.mdx new file mode 100644 index 000000000..ed2f43423 --- /dev/null +++ b/docs/sdk/web/react/solana-hooks/useSignMessage.mdx @@ -0,0 +1,109 @@ +--- +title: useSignMessage +sidebar_label: useSignMessage +description: "@web3auth/modal React Hook useSignMessage | Documentation - Web3Auth" +--- + +Hook to sign a message using the connected Solana wallet from Web3Auth. + +### Import + +```tsx +import { useSignMessage } from "@web3auth/modal/react/solana"; +``` + +### Usage + +```tsx +import { useSignMessage } from "@web3auth/modal/react/solana"; + +function SignMessageButton({ message }: { message: string }) { + const { signMessage, loading, error, data } = useSignMessage(); + + const handleSign = async () => { + try { + const signature = await signMessage(message); + // Do something with signature + } catch (e) { + // Handle error + } + }; + + return ( +
+ + {error &&
Error: {error.message}
} + {data &&
Signature: {data}
} +
+ ); +} +``` + +### Return Type + +```ts +export type IUseSignMessage = { + loading: boolean; + error: Web3AuthError | null; + data: string | null; + signMessage: (message: string) => Promise; +}; +``` + +#### loading + +`boolean` + +Indicates if the message signing is in progress. + +#### error + +`Web3AuthError | null` + +Error object if signing fails, otherwise null. + +#### data + +`string | null` + +The signature as a string, or null if not signed yet. + +#### signMessage + +`(message: string) => Promise` + +Function to sign a message. Returns the signature as a string. + +## Example + +```tsx title="signMessage.tsx" +import { FormEvent } from "react"; +import { useSignMessage } from "@web3auth/modal/react/solana"; + +export function SignMessage() { + const { data: hash, error, loading: isPending, signMessage } = useSignMessage(); + + async function submit(e: FormEvent) { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const message = formData.get("message"); + signMessage(message!.toString()); + } + + return ( +
+

Sign Message

+
+ + +
+ {hash &&
Message Hash: {hash}
} + {error &&
Error: {error.message}
} +
+ ); +} +``` diff --git a/docs/sdk/web/react/solana-hooks/useSignTransaction.mdx b/docs/sdk/web/react/solana-hooks/useSignTransaction.mdx new file mode 100644 index 000000000..09bad47a1 --- /dev/null +++ b/docs/sdk/web/react/solana-hooks/useSignTransaction.mdx @@ -0,0 +1,136 @@ +--- +title: useSignTransaction +sidebar_label: useSignTransaction +description: "@web3auth/modal React Hook useSignTransaction | Documentation - Web3Auth" +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +Hook to sign a Solana transaction using the connected wallet from Web3Auth. + +### Import + +```tsx +import { useSignTransaction } from "@web3auth/modal/react/solana"; +``` + +### Usage + +```tsx +import { useSignTransaction } from "@web3auth/modal/react/solana"; +import { Transaction } from "@solana/web3.js"; + +function SignTransactionButton({ transaction }: { transaction: Transaction }) { + const { signTransaction, loading, error, data } = useSignTransaction(); + + const handleSign = async () => { + try { + const signedTx = await signTransaction(transaction); + // Do something with signedTx + } catch (e) { + // Handle error + } + }; + + return ( +
+ + {error &&
Error: {error.message}
} + {data &&
Signed Transaction: {data}
} +
+ ); +} +``` + +### Return Type + +```ts +export type IUseSignTransaction = { + loading: boolean; + error: Web3AuthError | null; + data: string | null; + signTransaction: (transaction: TransactionOrVersionedTransaction) => Promise; +}; +``` + +#### loading + +`boolean` + +Indicates if the transaction signing is in progress. + +#### error + +`Web3AuthError | null` + +Error object if signing fails, otherwise null. + +#### data + +`string | null` + +The signed transaction as a string, or null if not signed yet. + +#### signTransaction + +`(transaction: TransactionOrVersionedTransaction) => Promise` + +Function to sign a Solana transaction. Returns the signed transaction as a string. + +## Examples + +```tsx title="signTransaction.tsx" +import { FormEvent } from "react"; +import { useSolanaWallet, useSignTransaction } from "@web3auth/modal/react/solana"; +import { LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from "@solana/web3.js"; + +export function SignTransaction() { + const { + data: signedTransaction, + error, + loading: isPending, + signTransaction, + } = useSignTransaction(); + const { accounts, connection } = useSolanaWallet(); + + async function submit(e: FormEvent) { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const to = formData.get("address") as string; + const value = formData.get("value") as string; + + const block = await connection!.getLatestBlockhash(); + const TransactionInstruction = SystemProgram.transfer({ + fromPubkey: new PublicKey(accounts![0]), + toPubkey: new PublicKey(to), + lamports: Number(value) * LAMPORTS_PER_SOL, + }); + + const transaction = new Transaction({ + blockhash: block.blockhash, + lastValidBlockHeight: block.lastValidBlockHeight, + feePayer: new PublicKey(accounts![0]), + }).add(TransactionInstruction); + + signTransaction(transaction); + } + + return ( +
+

Sign Transaction

+
+ + + +
+ {signedTransaction &&
Signed Trasaction: {signedTransaction}
} + {error &&
Error: {error.message}
} +
+ ); +} +``` diff --git a/docs/sdk/web/react/solana-hooks/useSolanaWallet.mdx b/docs/sdk/web/react/solana-hooks/useSolanaWallet.mdx new file mode 100644 index 000000000..1cf78a38c --- /dev/null +++ b/docs/sdk/web/react/solana-hooks/useSolanaWallet.mdx @@ -0,0 +1,102 @@ +--- +title: useSolanaWallet +sidebar_label: useSolanaWallet +description: "@web3auth/modal React Hooks useSolanaWallet | Documentation - Web3Auth" +--- + +Hook to retrieve and manage Solana wallet, accounts, and connection from Web3Auth. + +### Import + +```tsx +import { useSolanaWallet } from "@web3auth/modal/react"; +``` + +### Usage + +```tsx +import { useSolanaWallet } from "@web3auth/modal/react"; + +function SolanaWalletInfo() { + const { solanaWallet, accounts, connection } = useSolanaWallet(); + + return ( +
+
Accounts: {accounts ? accounts.join(", ") : "No accounts"}
+
SolanaWallet: {solanaWallet ? "Available" : "Not available"}
+
Connection: {connection ? "Connected" : "Not connected"}
+
+ ); +} +``` + +### Return Type + +```tsx +import { type IUseSolanaWallet } from "@web3auth/modal/react"; +``` + +#### accounts + +`string[] | null` + +The list of Solana account addresses, or null if not available. + +#### solanaWallet + +`SolanaWallet | null` + +The SolanaWallet instance for interacting with the Solana blockchain, or null if not available. + +#### connection + +`Connection | null` + +The Solana Connection instance for making RPC calls, or null if not available. + +### Example: Fetching SOL Balance + +```tsx title="getBalance.tsx" +import { useSolanaWallet } from "@web3auth/modal/react/solana"; +import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js"; +import { useEffect, useState } from "react"; + +export function Balance() { + const { accounts, connection } = useSolanaWallet(); + const [balance, setBalance] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + + const fetchBalance = async () => { + if (connection && accounts && accounts.length > 0) { + try { + setIsLoading(true); + setError(null); + const publicKey = new PublicKey(accounts[0]); + const balance = await connection.getBalance(publicKey); + setBalance(balance); + } catch (err) { + setError(err instanceof Error ? err.message : "Unknown error"); + } finally { + setIsLoading(false); + } + } + }; + + useEffect(() => { + fetchBalance(); + }, [connection, accounts]); + + return ( +
+

Balance

+
{balance !== null && `${balance / LAMPORTS_PER_SOL} SOL`}
+ {isLoading && Loading...} + {error && Error: {error}} + +
+ ); +} +``` diff --git a/docs/sdk/web/vue/composables/composables.mdx b/docs/sdk/web/vue/composables/composables.mdx new file mode 100644 index 000000000..0144b5110 --- /dev/null +++ b/docs/sdk/web/vue/composables/composables.mdx @@ -0,0 +1,63 @@ +--- +title: Vue Composables for Web3Auth Modal +sidebar_label: Overview +description: "@web3auth/modal Vue Composables | Documentation - Web3Auth" +--- + +Web3Auth offers a comprehensive suite of Vue composables to streamline integration and state +management within your Vue applications. These composables abstract away common authentication and +wallet operations, enabling you to implement Web3Auth features with minimal boilerplate. Each +composable is focused on a specific aspect of Web3Auth functionality, making it easy to implement +authentication, wallet operations, and blockchain interactions in your Vue projects. + +## List of Vue Composables + +:::tip + +For detailed usage, configuration options, and code examples, refer to the dedicated documentation +page for each composable. + +::: + +### Web3Auth Composables + +| Composable Name | Description | +| --------------- | ----------------------------------------------------------------- | +| `useWeb3Auth` | Core composable for Web3Auth initialization and state management. | + +### Authentication Composables + +| Composable Name | Description | +| ----------------------- | -------------------------------------- | +| `useWeb3AuthConnect` | Handles Web3Auth connection processes. | +| `useWeb3AuthDisconnect` | Manages disconnection from Web3Auth. | + +### Identity Composables + +| Composable Name | Description | +| ------------------ | -------------------------------------------------------- | +| `useIdentityToken` | Retrieves and manages identity tokens. | +| `useWeb3AuthUser` | Provides access to the authenticated user's information. | + +### Blockchain Composables + +| Composable Name | Description | +| ---------------- | ------------------------------------------------------- | +| `useSwitchChain` | Allows switching between different blockchain networks. | + +### MFA Composables + +| Composable Name | Description | +| --------------- | ---------------------------------------------------------------- | +| `useEnableMFA` | Enables Multi-Factor Authentication (MFA) for enhanced security. | +| `useManageMFA` | Provides functionality to manage MFA settings. | + +### Wallet Services Plugin Composables + +| Composable Name | Description | +| ------------------------- | --------------------------------------------------- | +| `useWalletConnectScanner` | Integrates WalletConnect scanner functionality. | +| `useWalletUI` | Manages wallet UI components and user interactions. | +| `useCheckout` | Facilitates cryptocurrency checkout processes. | +| `useSwap` | Enables token swapping capabilities. | +| `useWalletServicesPlugin` | Provides access to wallet service plugins. | diff --git a/docs/sdk/web/vue/composables/useCheckout.mdx b/docs/sdk/web/vue/composables/useCheckout.mdx new file mode 100644 index 000000000..436f72de4 --- /dev/null +++ b/docs/sdk/web/vue/composables/useCheckout.mdx @@ -0,0 +1,55 @@ +--- +title: useCheckout +sidebar_label: useCheckout +description: "@web3auth/modal Vue Composable useCheckout | Documentation - Web3Auth" +--- + +Composable to show the cryptocurrency checkout modal using Wallet Services Plugin. + +### Import + +```ts +import { useCheckout } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import { type IUseCheckout } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the checkout process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the checkout process. + +#### showCheckout + +`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise` + +Function to initiate the checkout modal. Optional `showCheckoutParams` can be passed to customize +the modal. diff --git a/docs/sdk/web/vue/composables/useEnableMFA.mdx b/docs/sdk/web/vue/composables/useEnableMFA.mdx new file mode 100644 index 000000000..67896035c --- /dev/null +++ b/docs/sdk/web/vue/composables/useEnableMFA.mdx @@ -0,0 +1,55 @@ +--- +title: useEnableMFA +sidebar_label: useEnableMFA +description: "@web3auth/modal Vue Composable useEnableMFA | Documentation - Web3Auth" +--- + +Composable to enable Multi-Factor Authentication (MFA) using Web3Auth in Vue. + +### Import + +```ts +import { useEnableMFA } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { UseEnableMFA } from "@web3auth/modal/vue"; +``` + +#### loading + +`Ref` + +Whether the MFA enabling process is in progress. + +#### error + +`Ref` + +Error that occurred during the MFA enabling process. + +#### enableMFA + +`(params?: T) => Promise` + +Function to initiate the MFA enabling process. Accepts optional parameters depending on the MFA +method or configuration required by your implementation. diff --git a/docs/sdk/web/vue/composables/useIdentityToken.mdx b/docs/sdk/web/vue/composables/useIdentityToken.mdx new file mode 100644 index 000000000..af32c02d4 --- /dev/null +++ b/docs/sdk/web/vue/composables/useIdentityToken.mdx @@ -0,0 +1,63 @@ +--- +title: useIdentityToken +sidebar_label: useIdentityToken +description: "@web3auth/modal Vue Composable useIdentityToken | Documentation - Web3Auth" +--- + +Composable to retrieve and manage the identity token from Web3Auth in Vue. + +### Import + +```ts +import { useIdentityToken } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseIdentityToken } from "@web3auth/modal/vue"; +``` + +#### loading + +`Ref` + +Whether the authentication process is in progress. + +#### error + +`Ref` + +Error that occurred during the authentication process. + +#### token + +`Ref` + +The identity token returned after successful authentication. + +#### authenticateUser + +`() => Promise` + +Function to initiate the authentication process and retrieve the identity token. diff --git a/docs/sdk/web/vue/composables/useManageMFA.mdx b/docs/sdk/web/vue/composables/useManageMFA.mdx new file mode 100644 index 000000000..249a86a0f --- /dev/null +++ b/docs/sdk/web/vue/composables/useManageMFA.mdx @@ -0,0 +1,57 @@ +--- +title: useManageMFA +sidebar_label: useManageMFA +description: "@web3auth/modal Vue Composables useManageMFA | Documentation - Web3Auth" +--- + +Hook to manage Multi-Factor Authentication (MFA) using Web3Auth. This composable provides a +convenient way to trigger MFA management actions, such as updating or configuring MFA settings for +the user. + +### Import + +```ts +import { useManageMFA } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseManageMFA } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the MFA management process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the MFA management process. + +#### manageMFA + +`(params?: T) => Promise` + +Function to initiate the MFA management process. Accepts optional parameters depending on the MFA +action or configuration required by your implementation. diff --git a/docs/sdk/web/vue/composables/useSwap.mdx b/docs/sdk/web/vue/composables/useSwap.mdx new file mode 100644 index 000000000..b5b93c63f --- /dev/null +++ b/docs/sdk/web/vue/composables/useSwap.mdx @@ -0,0 +1,54 @@ +--- +title: useSwap +sidebar_label: useSwap +description: "@web3auth/modal Vue Composables useSwap | Documentation - Web3Auth" +--- + +Hook to open the Swap interface using the Wallet Services Plugin. + +### Import + +```ts +import { useSwap } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import { type IUseSwap } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the swap interface is being opened. + +#### error + +`Web3AuthError | null` + +Error that occurred while opening the swap interface. + +#### showSwap + +`(showSwapParams?: BaseEmbedControllerState["showSwap"]) => Promise` + +Function to open the swap interface. Accepts optional parameters for customizing the swap view. diff --git a/docs/sdk/web/vue/composables/useSwitchChain.mdx b/docs/sdk/web/vue/composables/useSwitchChain.mdx new file mode 100644 index 000000000..e186aef3d --- /dev/null +++ b/docs/sdk/web/vue/composables/useSwitchChain.mdx @@ -0,0 +1,87 @@ +--- +title: useSwitchChain +sidebar_label: useSwitchChain +description: "@web3auth/modal Vue Composables useSwitchChain | Documentation - Web3Auth" +--- + +Composable to switch blockchain networks with Web3Auth in Vue. + +### Import + +```ts +import { useSwitchChain } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import { type IUseSwitchChain } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the chain switching process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the chain switching process. + +#### switchChain + +`(chainId: string) => Promise` + +Function to initiate the chain switch. Pass the target `chainId` as a string (e.g., "0x1" for +Ethereum Mainnet). + +## Example + +```html title="switchChain.vue" + + + +``` diff --git a/docs/sdk/web/vue/composables/useWalletConnectScanner.mdx b/docs/sdk/web/vue/composables/useWalletConnectScanner.mdx new file mode 100644 index 000000000..f2297559e --- /dev/null +++ b/docs/sdk/web/vue/composables/useWalletConnectScanner.mdx @@ -0,0 +1,55 @@ +--- +title: useWalletConnectScanner +sidebar_label: useWalletConnectScanner +description: "@web3auth/modal Vue Composable useWalletConnectScanner | Documentation - Web3Auth" +--- + +Composable to show the WalletConnect QR scanner using the Wallet Services Plugin in Vue. + +### Import + +```ts +import { useWalletConnectScanner } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseWalletConnectScanner } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the scanner opening process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the scanner opening process. + +#### showWalletConnectScanner + +`(showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise` + +Function to show the WalletConnect QR scanner. Accepts optional parameters for customizing the +scanner behavior. diff --git a/docs/sdk/web/vue/composables/useWalletServicesPlugin.mdx b/docs/sdk/web/vue/composables/useWalletServicesPlugin.mdx new file mode 100644 index 000000000..c781129c0 --- /dev/null +++ b/docs/sdk/web/vue/composables/useWalletServicesPlugin.mdx @@ -0,0 +1,66 @@ +--- +title: useWalletServicesPlugin +sidebar_label: useWalletServicesPlugin +description: "@web3auth/modal Vue Composables useWalletServicesPlugin | Documentation - Web3Auth" +--- + +Hook to access the Wallet Services Plugin context, enabling wallet-related features such as +WalletConnect, Checkout, Swap, and Wallet UI. + +### Import + +```ts +import { useWalletServicesPlugin } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IWalletServicesContext } from "@web3auth/modal/vue"; +``` + +#### isPluginConnected + +`boolean` + +Whether the Wallet Services Plugin is connected and ready to use. + +#### showWalletConnectScanner + +`(showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise` + +Shows the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner +behavior. + +#### showCheckout + +`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise` + +Shows the TopUp modal for fiat-to-crypto checkout. Accepts optional parameters for customizing the +checkout experience. + +#### showWalletUI + +`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise` + +Shows the Wallet Services modal UI. Accepts optional parameters for customizing the wallet UI +experience. diff --git a/docs/sdk/web/vue/composables/useWalletUI.mdx b/docs/sdk/web/vue/composables/useWalletUI.mdx new file mode 100644 index 000000000..795f0f8da --- /dev/null +++ b/docs/sdk/web/vue/composables/useWalletUI.mdx @@ -0,0 +1,55 @@ +--- +title: useWalletUI +sidebar_label: useWalletUI +description: "@web3auth/modal Vue Composables useWalletUI | Documentation - Web3Auth" +--- + +Hook to show the Wallet Services UI modal using the Wallet Services Plugin. + +### Import + +```ts +import { useWalletUI } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseWalletUI } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the Wallet UI opening process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the Wallet UI opening process. + +#### showWalletUI + +`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise` + +Function to show the Wallet Services modal UI. Accepts optional parameters for customizing the +wallet UI experience. diff --git a/docs/sdk/web/vue/composables/useWeb3Auth.mdx b/docs/sdk/web/vue/composables/useWeb3Auth.mdx new file mode 100644 index 000000000..341c5276d --- /dev/null +++ b/docs/sdk/web/vue/composables/useWeb3Auth.mdx @@ -0,0 +1,100 @@ +--- +title: useWeb3Auth +sidebar_label: useWeb3Auth +description: "@web3auth/modal/vue Composable useWeb3Auth | Documentation - Web3Auth" +--- + +Composable to access the Web3Auth context in Vue. + +### Import + +```ts +import { useWeb3Auth } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + +``` + +### Return Type + +```ts +import type { IUseWeb3Auth } from "@web3auth/modal/vue"; +``` + +#### initError + +`Ref` + +Error that occurred during Web3Auth initialization. + +#### isConnected + +`Ref` + +Whether the user is connected to Web3Auth. + +#### isInitialized + +`Ref` + +Whether Web3Auth has completed initialization. + +#### isInitializing + +`Ref` + +Whether Web3Auth is currently initializing. + +#### provider + +`Ref` + +Connected provider from Web3Auth. + +#### status + +`Ref` + +Current status of the Web3Auth connection. + +#### web3Auth + +`Ref` + +The Web3Auth instance. + +#### getPlugin + +`(pluginName: PLUGIN_NAME) => IPlugin | null` + +Helper function to get a plugin by name. diff --git a/docs/sdk/web/vue/composables/useWeb3AuthConnect.mdx b/docs/sdk/web/vue/composables/useWeb3AuthConnect.mdx new file mode 100644 index 000000000..cfb0a8e35 --- /dev/null +++ b/docs/sdk/web/vue/composables/useWeb3AuthConnect.mdx @@ -0,0 +1,68 @@ +--- +title: useWeb3AuthConnect +sidebar_label: useWeb3AuthConnect +description: "@web3auth/modal Vue Composable useWeb3AuthConnect | Documentation - Web3Auth" +--- + +Composable to connect to Web3Auth in Vue. + +### Import + +```ts +import { useWeb3AuthConnect } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseWeb3AuthConnect } from "@web3auth/modal/vue"; +``` + +#### isConnected + +`boolean` + +Whether the user is connected to Web3Auth. + +#### loading + +`boolean` + +Whether the connection process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the connection process. + +#### connectorName + +`WALLET_CONNECTOR_TYPE | null` + +Name of the connected connector. + +#### connect + +`() => Promise` + +Function to initiate the connection process. diff --git a/docs/sdk/web/vue/composables/useWeb3AuthDisconnect.mdx b/docs/sdk/web/vue/composables/useWeb3AuthDisconnect.mdx new file mode 100644 index 000000000..aab61e977 --- /dev/null +++ b/docs/sdk/web/vue/composables/useWeb3AuthDisconnect.mdx @@ -0,0 +1,55 @@ +--- +title: useWeb3AuthDisconnect +sidebar_label: useWeb3AuthDisconnect +description: "@web3auth/modal Vue Composables useWeb3AuthDisconnect | Documentation - Web3Auth" +--- + +Hook to disconnect from Web3Auth. + +### Import + +```ts +import { useWeb3AuthDisconnect } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseWeb3AuthDisconnect } from "@web3auth/modal/vue"; +``` + +#### loading + +`Ref` + +Whether the disconnection process is in progress. + +#### error + +`Ref` + +Error that occurred during the disconnection process. + +#### disconnect + +`(options?: { cleanup: boolean }) => Promise` + +Function to initiate the disconnection process. Optional `cleanup` parameter controls whether to +remove all user data. diff --git a/docs/sdk/web/vue/composables/useWeb3AuthUser.mdx b/docs/sdk/web/vue/composables/useWeb3AuthUser.mdx new file mode 100644 index 000000000..b4767ebb0 --- /dev/null +++ b/docs/sdk/web/vue/composables/useWeb3AuthUser.mdx @@ -0,0 +1,70 @@ +--- +title: useWeb3AuthUser +sidebar_label: useWeb3AuthUser +description: "@web3auth/modal/vue Composable useWeb3AuthUser | Documentation - Web3Auth" +--- + +Composable to fetch and manage the current Web3Auth user information in Vue. + +### Import + +```ts +import { useWeb3AuthUser } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseWeb3AuthUser } from "@web3auth/modal/vue"; +``` + +#### loading + +`boolean` + +Whether the user info fetching process is in progress. + +#### error + +`Web3AuthError | null` + +Error that occurred during the user info fetching process. + +#### userInfo + +`Partial | null` + +The current user's information, or null if not available. + +#### isMFAEnabled + +`boolean` + +Whether Multi-Factor Authentication (MFA) is enabled for the user. + +#### getUserInfo + +`() => Promise | null>` + +Function to fetch the latest user information from Web3Auth. diff --git a/docs/sdk/web/vue/ethereum-composables.mdx b/docs/sdk/web/vue/ethereum-composables.mdx new file mode 100644 index 000000000..0cb0be3c4 --- /dev/null +++ b/docs/sdk/web/vue/ethereum-composables.mdx @@ -0,0 +1,130 @@ +--- +title: Vue Composables for Ethereum (via Wagmi) +sidebar_label: Ethereum Composables +description: "@web3auth/modal Ethereum Vue Composables | Documentation - Web3Auth" +--- + +Web3Auth supports composable-based Ethereum wallet operations in Vue via [Wagmi](https://wagmi.sh/). +Once you have set up Wagmi using the Web3Auth Modal SDK (see the +[Setup guide](./setup#wagmi-integration)), you can use all Wagmi composables directly in your +application—no additional wrappers or configuration are needed beyond the initial setup. + +:::info + +Wagmi provides a comprehensive set of composables for Ethereum and EVM-compatible chains in Vue. +Web3Auth integrates seamlessly with Wagmi, so you can use composables like `useAccount`, +`useBalance`, `useSendTransaction`, and more, out of the box. + +::: + +## Example Usage + +Below are some examples of using Wagmi composables in your dApp after Web3Auth and Wagmi are set up. +You can note these functions work directly with Wagmi. Once you have set up Wagmi with Web3Auth, you +can use any Wagmi composable as you would in a standard Wagmi application. + +### Get Account Balance + +```html + + + +``` + +### Send Transaction + +```html + + + +``` + +### Switch Chain + +```html + + + +``` diff --git a/docs/sdk/web/vue/examples.mdx b/docs/sdk/web/vue/examples.mdx new file mode 100644 index 000000000..c5558c2b7 --- /dev/null +++ b/docs/sdk/web/vue/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP Web Modal SDK +sidebar_label: Examples +description: "@web3auth/modal Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpModalExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/web/vue/install.mdx b/docs/sdk/web/vue/install.mdx new file mode 100644 index 000000000..aa791f64e --- /dev/null +++ b/docs/sdk/web/vue/install.mdx @@ -0,0 +1,66 @@ +--- +title: "Installing PnP Web Modal SDK" +sidebar_label: "Installation" +description: "Installing Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" +--- + +## [`@web3auth/modal`](https://npmjs.com/package/@web3auth/modal) + +```bash npm2yarn +npm install --save @web3auth/modal +``` + +## Troubleshooting + +:::warning SDK Errors & Warnings + +Check out our guide for common **[SDK Errors & Warnings](/troubleshooting/sdk-errors-warnings)** + +::: + +### Bundler Issues: Missing Dependencies + +You might encounter errors related to missing dependencies in the browser environment when +implementing Web3Auth. + +Common error messages include `Buffer is not defined`, `process is not defined`, or other +Node.js-specific modules that aren't available in browsers by default. + +These Node.js dependencies need to be polyfilled in your application to enable Web3Auth +functionality properly. Additionally, your bundler configuration may need adjustments to handle +these dependencies correctly during the build process. + +We've prepared detailed troubleshooting guides for popular bundlers: + +- **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)** +- **[Svelte Troubleshooting Guide](/troubleshooting/svelte-issues)** +- **[Nuxt Troubleshooting Guide](/troubleshooting/nuxt-issues)** +- **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)** + +### JWT Errors + +When configuring Web3Auth's Custom Authentication, you may encounter JWT errors. Below is a list of +common JWT errors and links to their solutions: + +- [**Invalid JWT Verifiers ID field**](/troubleshooting/jwt-errors#invalid-jwt-verifiers-id-field) \ + `Error occurred while verifying params could not verify identity` + +- [**Failed to verify JWS signature**](/troubleshooting/jwt-errors#failed-to-verify-jws-signature) \ + `Error occurred while verifying params unable to verify jwt token` + +- [**Duplicate Token**](/troubleshooting/jwt-errors#duplicate-token) \ + `Could not get result from torus nodes Duplicate token found` + +- [**Expired Token**](/troubleshooting/jwt-errors#expired-token) \ + `Error occurred while verifying params timesigned is more than 1m0s ago` + +- [**Mismatch JWT Validation field**](/troubleshooting/jwt-errors#mismatch-jwt-validation-field) + +- [**Looking for Refresh Tokens?**](/troubleshooting/jwt-errors#looking-for-refresh-tokens) + +### Different Private Keys across integrations + +If you are getting different private keys across integrations, it is likely because you are using +different conflicting projects, SDKs, or configurations. Please refer to our troubleshooting guide +**[Different Private Keys across integrations](/troubleshooting/different-private-key)** to +understand and resolve this issue. diff --git a/docs/sdk/web/vue/setup.mdx b/docs/sdk/web/vue/setup.mdx new file mode 100644 index 000000000..ea7aa8aed --- /dev/null +++ b/docs/sdk/web/vue/setup.mdx @@ -0,0 +1,111 @@ +--- +title: Setting up Vue Composables +sidebar_label: Setup +description: "@web3auth/modal Vue Composables Setup | Documentation - Web3Auth" +--- + +For a seamless integration in Vue, Web3Auth provides essential composables for the Web3Auth Modal +SDK. These composables, paired with Wagmi or Solana composables (our custom implementation), become +a powerful combination for building your dApp quickly and efficiently. + +## Web3Auth Provider + +Wrap your application with the `Web3AuthProvider` in your root component (e.g., `App.vue`). + +```html title="App.vue" + + + +``` + +### Config + +The Web3Auth Provider requires a `config` object to be passed in. This config object contains the +config you setup in the [Configuration Section](/sdk/pnp/web/modal/config). + +```ts title="web3authContext.ts" +// focus-next-line +import { type Web3AuthContextConfig } from "@web3auth/modal/vue"; +import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal"; + +const web3AuthOptions: Web3AuthOptions = { + clientId: "YOUR_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET +}; + +// focus-start +const web3AuthContextConfig: Web3AuthContextConfig = { + web3AuthOptions, +}; +// focus-end +``` + +## Wagmi Integration + +If you are using Wagmi, you need to install the `wagmi` & `@tanstack/vue-query` packages and use the +**Web3Auth implementation of `WagmiProvider`** for configuration. + +:::info + +The Web3Auth implementation of `WagmiProvider` is a custom implementation that is used to integrate +with the Web3Auth Modal SDK. It is a wrapper around the `WagmiProvider` that makes it compatible. + +With this implementation, you can use the Wagmi composables, however **no external connectors are +supported**. Web3Auth provides a whole suite of connectors which you can use directly for a better +experience with external wallets. + +::: + +```bash +npm install wagmi @tanstack/vue-query +``` + +Update your `main.ts` to use the Vue Query plugin **only if you are using Wagmi**: + +```ts title="main.ts" +// focus-next-line +import { VueQueryPlugin } from "@tanstack/vue-query"; +import { createApp } from "vue"; +import App from "./App.vue"; +import "./style.css"; + +// focus-next-line +createApp(App).use(VueQueryPlugin).mount("#app"); +``` + +Then, in your `App.vue`, wrap your app with both providers: + +```html title="App.vue" + + + +``` diff --git a/docs/sdk/web/vue/solana-composables/solana-composables.mdx b/docs/sdk/web/vue/solana-composables/solana-composables.mdx new file mode 100644 index 000000000..6c59c91e2 --- /dev/null +++ b/docs/sdk/web/vue/solana-composables/solana-composables.mdx @@ -0,0 +1,27 @@ +--- +title: Vue Composables for Solana +sidebar_label: Overview +description: "@web3auth/modal Solana Vue Composables | Documentation - Web3Auth" +--- + +Web3Auth provides a set of Vue composables for basic Solana wallet operations. These composables are +designed to simplify common Solana interactions in your Vue app. + +:::info + +For advanced Solana features, you should use +[`@solana/web3.js`](https://solana-labs.github.io/solana-web3.js/) on top of the composables +provided. + +::: + +## Solana Composables + +| Composable Name | Description | +| --------------------------- | -------------------------------------------- | +| `useSignAndSendTransaction` | Sign and send a Solana transaction. | +| `useSignMessage` | Sign a message with the Solana wallet. | +| `useSignTransaction` | Sign a Solana transaction (without sending). | +| `useSolanaWallet` | Access Solana wallet state and utilities. | + +Further code and advanced usage should be implemented using Solana's web3.js library as needed. diff --git a/docs/sdk/web/vue/solana-composables/useSignAndSendTransaction.mdx b/docs/sdk/web/vue/solana-composables/useSignAndSendTransaction.mdx new file mode 100644 index 000000000..408e2d40b --- /dev/null +++ b/docs/sdk/web/vue/solana-composables/useSignAndSendTransaction.mdx @@ -0,0 +1,151 @@ +--- +title: useSignAndSendTransaction +sidebar_label: useSignAndSendTransaction +description: "@web3auth/modal Vue Composable useSignAndSendTransaction | Documentation - Web3Auth" +--- + +Composable to sign and send a Solana transaction using the connected Solana wallet from Web3Auth in +Vue. + +### Import + +```ts +import { useSignAndSendTransaction } from "@web3auth/modal/vue/solana"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +export type IUseSignAndSendTransaction = { + loading: boolean; + error: Web3AuthError | null; + data: string | null; + signAndSendTransaction: (transaction: TransactionOrVersionedTransaction) => Promise; +}; +``` + +#### loading + +`boolean` + +Indicates if the transaction signing and sending is in progress. + +#### error + +`Web3AuthError | null` + +Error object if signing or sending fails, otherwise null. + +#### data + +`string | null` + +The transaction signature as a string, or null if not signed yet. + +#### signAndSendTransaction + +`(transaction: TransactionOrVersionedTransaction) => Promise` + +Function to sign and send a transaction. Returns the transaction signature as a string. + +## Example + +```html title="SendVersionedTransaction.vue" + + + +``` diff --git a/docs/sdk/web/vue/solana-composables/useSignMessage.mdx b/docs/sdk/web/vue/solana-composables/useSignMessage.mdx new file mode 100644 index 000000000..7e7de2604 --- /dev/null +++ b/docs/sdk/web/vue/solana-composables/useSignMessage.mdx @@ -0,0 +1,109 @@ +--- +title: useSignMessage +sidebar_label: useSignMessage +description: "@web3auth/modal Vue Composable useSignMessage | Documentation - Web3Auth" +--- + +Composable to sign a message using the connected Solana wallet from Web3Auth in Vue. + +### Import + +```ts +import { useSignMessage } from "@web3auth/modal/vue/solana"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +export type IUseSignMessage = { + loading: boolean; + error: Web3AuthError | null; + data: string | null; + signMessage: (message: string) => Promise; +}; +``` + +#### loading + +`boolean` + +Indicates if the message signing is in progress. + +#### error + +`Web3AuthError | null` + +Error object if signing fails, otherwise null. + +#### data + +`string | null` + +The signature as a string, or null if not signed yet. + +#### signMessage + +`(message: string) => Promise` + +Function to sign a message. Returns the signature as a string. + +## Example + +```html title="SignMessage.vue" + + + +``` diff --git a/docs/sdk/web/vue/solana-composables/useSignTransaction.mdx b/docs/sdk/web/vue/solana-composables/useSignTransaction.mdx new file mode 100644 index 000000000..92027476d --- /dev/null +++ b/docs/sdk/web/vue/solana-composables/useSignTransaction.mdx @@ -0,0 +1,140 @@ +--- +title: useSignTransaction +sidebar_label: useSignTransaction +description: "@web3auth/modal Vue Composable useSignTransaction | Documentation - Web3Auth" +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +Composable to sign a Solana transaction using the connected wallet from Web3Auth. + +### Import + +```ts +import { useSignTransaction } from "@web3auth/modal/vue/solana"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +export type IUseSignTransaction = { + loading: Ref; + error: Ref; + data: Ref; + signTransaction: (transaction: TransactionOrVersionedTransaction) => Promise; +}; +``` + +#### loading + +`Ref` + +Indicates if the transaction signing is in progress. + +#### error + +`Ref` + +Error object if signing fails, otherwise null. + +#### data + +`Ref` + +The signed transaction as a string, or null if not signed yet. + +#### signTransaction + +`(transaction: TransactionOrVersionedTransaction) => Promise` + +Function to sign a Solana transaction. Returns the signed transaction as a string. + +## Example + +```html + + + +``` diff --git a/docs/sdk/web/vue/solana-composables/useSolanaWallet.mdx b/docs/sdk/web/vue/solana-composables/useSolanaWallet.mdx new file mode 100644 index 000000000..6a903c00d --- /dev/null +++ b/docs/sdk/web/vue/solana-composables/useSolanaWallet.mdx @@ -0,0 +1,125 @@ +--- +title: useSolanaWallet +sidebar_label: useSolanaWallet +description: "@web3auth/modal Vue Composables useSolanaWallet | Documentation - Web3Auth" +--- + +Composable to retrieve and manage Solana wallet, accounts, and connection from Web3Auth in Vue. + +### Import + +```ts +import { useSolanaWallet } from "@web3auth/modal/vue"; +``` + +### Usage + +```html + + + +``` + +### Return Type + +```ts +import type { IUseSolanaWallet } from "@web3auth/modal/vue"; +``` + +#### accounts + +`string[] | null` + +The list of Solana account addresses, or null if not available. + +#### solanaWallet + +`SolanaWallet | null` + +The SolanaWallet instance for interacting with the Solana blockchain, or null if not available. + +#### connection + +`Connection | null` + +The Solana Connection instance for making RPC calls, or null if not available. + +### Example: Fetching SOL Balance + +```html title="getBalance.vue" + + + +``` diff --git a/docs/sdk/web/vue/vue.mdx b/docs/sdk/web/vue/vue.mdx new file mode 100644 index 000000000..2b8e9bb1c --- /dev/null +++ b/docs/sdk/web/vue/vue.mdx @@ -0,0 +1,57 @@ +--- +title: Web3Auth Plug and Play Web SDK +sidebar_label: Overview +description: "Web3Auth PnP Web SDK | Documentation - Web3Auth" +--- + +import ExampleCards from "@theme/ExampleCards"; +import { pnpModalExamples, QUICK_START } from "@site/src/common/maps"; + +Web3Auth Plug and Play (PnP) provides a comprehensive authentication solution for Web3 applications, +handling everything from social logins to external wallet connections, giving you a simplified +interface to connect to the user's preferred wallet. It serves as a unified connection experience +for all wallet types, simplifying user onboarding and authentication management. + +## Web3Auth SDK [`@web3auth/modal`](/sdk/pnp/web/modal/) + +The Web3Auth SDK provides two main integration approaches: + +### Modal Approach + +- **Complete UI Package**: Includes a ready-to-use modal interface with all authentication options +- **Customizable Appearance**: Extensive whitelabeling options to match your application's branding +- **Simple Integration**: Minimal code required to implement full authentication capabilities + +### No Modal Approach + +The same SDK can be used without the pre-built UI components: + +- **Complete UI Control**: Build your own authentication interface from scratch +- **Invisible Integration**: Can be implemented in a way that's completely transparent to users +- **Core Functionality**: Includes all authentication adapters and wallet connection methods +- **Flexible Implementation**: Can be integrated at any level of your application architecture + +## Requirements + +- This is a frontend SDK and can only run in a browser environment +- Basic knowledge of JavaScipt +- Supports all major JavaScript Frameworks, Libraries and Bundlers + +## Resources + +- [Quick Start](/quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0): Get Started + with an easy to follow integration of Web3Auth + +- [Example Applications](./examples): Explore our example applications and try the SDK yourself. + +- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers. + +- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find + the source code on our GitHub repository. + +- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community + to get support from our team and other developers. + +## Quick Starts + + obj.type === QUICK_START)} /> diff --git a/docs/sdk/web/web.mdx b/docs/sdk/web/web.mdx new file mode 100644 index 000000000..384c7c468 --- /dev/null +++ b/docs/sdk/web/web.mdx @@ -0,0 +1,13 @@ +--- +title: Explore Web3Auth Web SDKs +hide_table_of_contents: true +sidebar_label: Web SDKs +displayed_sidebar: sdk_pnp_react +image: "images/docs-meta-cards/sdk-reference-card.png" +description: "Web SDKs | Documentation - Web3Auth" +--- + +import { pnpweb } from "@site/src/components/SDKReferenceCards"; +import Tiles from "@theme/Tiles"; + +{pnpweb} diff --git a/docs/troubleshooting/different-private-key.mdx b/docs/troubleshooting/different-private-key.mdx index f98c15883..7746797d6 100644 --- a/docs/troubleshooting/different-private-key.mdx +++ b/docs/troubleshooting/different-private-key.mdx @@ -1,7 +1,7 @@ --- title: Different Private Keys/ Wallet Address across Integrations image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Different Private Keys description: "Different Private Keys across Integrations | Documentation - Web3Auth" --- @@ -86,10 +86,11 @@ is set up and how the keys are generated. At large, we can consider 3 different Products: - Plug and Play SDKs: Includes the Plug and Play SDKs across various platforms. The accounts here - are generated from the Single Factor Auth SDKs, however, the keys are different because of the - subkey generation logic. Keys here change according to the verifier and client ID selected. + are generated from the Single Factor Auth Mobile SDKs, however, the keys are different because of + the subkey generation logic. Keys here change according to the verifier and client ID selected. -- Single Factor Auth SDKs: Contain the base key generation logic according to the verifier selected. +- Single Factor Auth Mobile SDKs: Contain the base key generation logic according to the verifier + selected. - MPC Core Kit SDKs: Includes the MPC Core Kit SDKs across various platforms. The accounts here are generated using TSS (Threshold Signature Scheme) and are different from the other products. @@ -119,10 +120,10 @@ the new integration. ##### To Single Factor Auth (SFA) SDKs -If you're migrating to SFA SDKs, you can directly use the SDK with the same Client ID, alongside -authentication and verifier details. Additionally, by setting the `usePnPKey` flag to `true`, you -can get the same key as the Plug and Play SDKs. However, if a user has enabled MFA, they will not be -able to use the SFA SDKs. +If you're migrating to SFA Mobile SDKs, you can directly use the SDK with the same Client ID, +alongside authentication and verifier details. Additionally, by setting the `usePnPKey` flag to +`true`, you can get the same key as the Plug and Play SDKs. However, if a user has enabled MFA, they +will not be able to use the SFA Mobile SDKs. ##### To tKey JS SDK @@ -140,8 +141,8 @@ subkey(PRIVATE_KEY.padStart(64, "0"), Buffer.from(CLIENT_ID, "base64")); :::info Pre-planning Migrations -If you're looking to use Single Factor Auth SDKs in the future, planning the use Plug and Play SDKs -right now, make sure: +If you're looking to use Single Factor Auth Mobile SDKs in the future, planning the use Plug and +Play SDKs right now, make sure: - You're using Custom Authentication with your own login verifiers. - Set the `useCoreKitKey` flag to `true` @@ -153,4 +154,4 @@ right now, make sure: This migration typically occurs when developers want to leverage the prebuilt UI/UX of the Plug and Play SDKs for user MFA. Use the same verifier details from your Single Factor Auth integration in the custom authentication feature of Plug and Play. Set the `useCoreKitKey` flag to `true` to use -the same private key as the Single Factor Auth SDKs. +the same private key as the Single Factor Auth Mobile SDKs. diff --git a/docs/troubleshooting/error-429.mdx b/docs/troubleshooting/error-429.mdx index 100798d43..f3b17468c 100644 --- a/docs/troubleshooting/error-429.mdx +++ b/docs/troubleshooting/error-429.mdx @@ -1,8 +1,8 @@ --- title: Error 429 (Infura RPC Endpoint) image: "images/docs-meta-cards/troubleshoot-card.png" - -description: "Error 429 - Infira RPC Endpoint | Documentation - Web3Auth" +sidebar_label: Error 429 (RPC Issue) +description: "Error 429 - Infura RPC Endpoint | Documentation - Web3Auth" --- import Error429 from "@site/static/images/error-429.png"; diff --git a/docs/troubleshooting/jwt-errors.mdx b/docs/troubleshooting/jwt-errors.mdx index 2d7744651..4b403b76f 100644 --- a/docs/troubleshooting/jwt-errors.mdx +++ b/docs/troubleshooting/jwt-errors.mdx @@ -1,7 +1,7 @@ --- title: JWT Errors image: "images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: JWT Errors description: "JWT Errors | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/metro-issues-mpc.mdx b/docs/troubleshooting/metro-issues-mpc.mdx index fe2563dda..8653c2fa0 100644 --- a/docs/troubleshooting/metro-issues-mpc.mdx +++ b/docs/troubleshooting/metro-issues-mpc.mdx @@ -1,7 +1,7 @@ --- -title: Bundler Polyfill Issues [MPC] - React Native Metro +title: Bundler Polyfill Issues [MPC Core Kit] - React Native Metro image: "/docs/images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: React Native Metro Polyfill Issues [MPC Core Kit] description: "Bundler Polyfill Issues - React Native Metro | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/metro-issues.mdx b/docs/troubleshooting/metro-issues.mdx index 8b6335a5c..2731a14d9 100644 --- a/docs/troubleshooting/metro-issues.mdx +++ b/docs/troubleshooting/metro-issues.mdx @@ -1,7 +1,7 @@ --- title: Bundler Polyfill Issues - React Native Metro image: "/docs/images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: React Native Metro Polyfill Issues description: "Bundler Polyfill Issues - React Native Metro | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/nuxt-issues.mdx b/docs/troubleshooting/nuxt-issues.mdx index 614a3b458..257fafaed 100644 --- a/docs/troubleshooting/nuxt-issues.mdx +++ b/docs/troubleshooting/nuxt-issues.mdx @@ -1,7 +1,7 @@ --- title: Bundler Polyfill Issues - Nuxt image: "/docs/images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: Nuxt Polyfill Issues description: "Bundler Polyfill Issues - Nuxt | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/popup-blocked-issue.mdx b/docs/troubleshooting/popup-blocked-issue.mdx index 1a85da7a5..055749b60 100644 --- a/docs/troubleshooting/popup-blocked-issue.mdx +++ b/docs/troubleshooting/popup-blocked-issue.mdx @@ -1,7 +1,7 @@ --- title: Popup Blocked Issue image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: Popup Blocked Issue description: "Popup blocked issue | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/sdk-errors-warnings.mdx b/docs/troubleshooting/sdk-errors-warnings.mdx index ecac820bc..b92f15969 100644 --- a/docs/troubleshooting/sdk-errors-warnings.mdx +++ b/docs/troubleshooting/sdk-errors-warnings.mdx @@ -1,7 +1,7 @@ --- title: SDK Errors & Warnings image: "/docs/images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: SDK Errors & Warnings description: "SDK Errors & Warnings | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/supported-browsers.mdx b/docs/troubleshooting/supported-browsers.mdx index f716ecb11..92f848cc0 100644 --- a/docs/troubleshooting/supported-browsers.mdx +++ b/docs/troubleshooting/supported-browsers.mdx @@ -1,7 +1,7 @@ --- title: Supported Browsers List image: "images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: Supported Browsers List description: "Supported Browsers List | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/svelte-issues.mdx b/docs/troubleshooting/svelte-issues.mdx index 862cea4a4..2f379c6a2 100644 --- a/docs/troubleshooting/svelte-issues.mdx +++ b/docs/troubleshooting/svelte-issues.mdx @@ -1,7 +1,7 @@ --- title: Bundler Polyfill Issues - Svelte with Vite image: "/docs/images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: Svelte with Vite Polyfill Issues description: "Bundler Polyfill Issues - Svelte with Vite | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/vite-issues.mdx b/docs/troubleshooting/vite-issues.mdx index e47cf8501..9131cff7a 100644 --- a/docs/troubleshooting/vite-issues.mdx +++ b/docs/troubleshooting/vite-issues.mdx @@ -1,7 +1,7 @@ --- title: Bundler Polyfill Issues - Vite image: "/docs/images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: Vite Polyfill Issues description: "Bundler Polyfill Issues - Vite | Documentation - Web3Auth" --- diff --git a/docs/troubleshooting/webpack-issues.mdx b/docs/troubleshooting/webpack-issues.mdx index fa3571be0..cccf10ae3 100644 --- a/docs/troubleshooting/webpack-issues.mdx +++ b/docs/troubleshooting/webpack-issues.mdx @@ -1,7 +1,7 @@ --- title: Bundler Polyfill Issues - Webpack 5 image: "images/docs-meta-cards/troubleshoot-card.png" - +sidebar_label: Webpack 5 Polyfill Issues description: "Bundler Polyfill Issues - Webpack 5 | Documentation - Web3Auth" --- diff --git a/docs/what-is-web3auth.mdx b/docs/what-is-web3auth.mdx index 533cc644b..fc5c2ac93 100644 --- a/docs/what-is-web3auth.mdx +++ b/docs/what-is-web3auth.mdx @@ -1,7 +1,7 @@ --- title: What is Web3Auth? image: "images/docs-meta-cards/documentation-card.png" - +sidebar_label: What is Web3Auth? description: "What is Web3Auth | Documentation - Web3Auth" --- diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 8fd751811..7415d78f6 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -266,14 +266,6 @@ const config: Config = { from: "/developing-with-web3auth/", to: "/quick-start", }, - { - from: "/sdk/web/modal/wagmi-connector", - to: "/sdk/pnp/web/wagmi-connector", - }, - { - from: "/sdk/web/no-modal/wagmi-connector", - to: "/sdk/pnp/web/wagmi-connector", - }, { from: "/sdk/web/choosesdk/", to: "/sdk/pnp/web/", @@ -306,10 +298,6 @@ const config: Config = { from: "/sdk/react-native/choose-workflows", to: "/sdk/pnp/react-native/", }, - { - from: "/sdk/web/customauth", - to: "/sdk/pnp/web/no-modal/custom-authentication", - }, { from: "/overview/what-is-web3auth", to: "/what-is-web3auth", @@ -362,18 +350,6 @@ const config: Config = { from: "/customauth/verifiers", to: "/auth-provider-setup/verifiers", }, - { - from: "/sdk/web/modal/multi-factor-authentication", - to: "/sdk/pnp/web/modal/mfa", - }, - { - from: "/sdk/web/core/multi-factor-authentication", - to: "/sdk/pnp/web/no-modal/mfa", - }, - { - from: "/sdk/web/web3auth/multi-factor-authentication", - to: "/sdk/pnp/web/modal/mfa", - }, { from: "/troubleshooting/different-wallet-address-issue", to: "/troubleshooting/different-private-key", @@ -581,10 +557,6 @@ const config: Config = { existingPath.replace("/sdk/pnp/web/providers/", "/sdk/providers/"), existingPath.replace("/sdk/pnp/web/wallet-services/", "/sdk/wallet-services/"), existingPath.replace("/features/whitelabel", "/pnp/features/whitelabel/"), - existingPath.replace("/sdk/web/no-modal", "/sdk/web/core"), - existingPath.replace("/sdk/web/no-modal", "/sdk/web/customloginui"), - existingPath.replace("/sdk/web/modal", "/sdk/web/web3auth"), - existingPath.replace("/sdk/web/modal", "/sdk/web/plugnplay"), existingPath.replace("/product/core-kit", "/core-kit/"), existingPath.replace("/product/pnp", "/pnp/"), existingPath.replace( diff --git a/package-lock.json b/package-lock.json index 70c5d7692..69a9c5ca1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "lodash": "^4.17.21", "parse-numeric-range": "^1.3.0", "prism-react-renderer": "^2.3.1", + "prismjs": "^1.30.0", "react": "^18.3.1", "react-bookmark": "^0.8.2", "react-dom": "^18.3.1", @@ -25235,9 +25236,9 @@ } }, "node_modules/prismjs": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", - "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", "license": "MIT", "engines": { "node": ">=6" diff --git a/package.json b/package.json index d86e8fba6..4c3d2ec28 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "lodash": "^4.17.21", "parse-numeric-range": "^1.3.0", "prism-react-renderer": "^2.3.1", + "prismjs": "^1.30.0", "react": "^18.3.1", "react-bookmark": "^0.8.2", "react-dom": "^18.3.1", diff --git a/sidebars.ts b/sidebars.ts index b94be981a..b28379acc 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -1,7 +1,8 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; import { - web, + reactJS, + vue, android, ios, reactnative, @@ -11,92 +12,167 @@ import { js, } from "./src/common/SDKOptions"; -import { getPnPVersion, getSFAVersion, getMPCCoreKitVersion } from "./src/common/versions"; +import { + getPnPVersion, + getSFAVersion, + getMPCCoreKitVersion, + pnpWebVersion, +} from "./src/common/versions"; + +function webTopNavButton(selectedSDK: string): string { + const baseUrl = process.env.REACT_APP_BASE_URL || "/docs/"; + + var webSDKs = { + [reactJS]: `${baseUrl}sdk/web/react`, + [vue]: `${baseUrl}sdk/web/vue`, + [js]: `${baseUrl}sdk/web/js`, + }; + if (webSDKs.hasOwnProperty(selectedSDK)) { + delete webSDKs[selectedSDK]; + } + var sdkNames = Object.keys(webSDKs); + var sdkLinks = Object.values(webSDKs); + var sdkVersion = pnpWebVersion; + + return ` +
+
+ Web +
+ + v${sdkVersion} +
+
+ + Mobile + + + Gaming + +
`; +} -function pnpTopNavButton(selectedSDK: string): string { +function gamingTopNavButton(selectedSDK: string): string { const baseUrl = process.env.REACT_APP_BASE_URL || "/docs/"; - var pnpSDKs = { - [web]: `${baseUrl}sdk/pnp/web`, - [android]: `${baseUrl}sdk/pnp/android`, - [ios]: `${baseUrl}sdk/pnp/ios`, - [reactnative]: `${baseUrl}sdk/pnp/react-native`, - [flutter]: `${baseUrl}sdk/pnp/flutter`, - [unity]: `${baseUrl}sdk/pnp/unity`, - [unreal]: `${baseUrl}sdk/pnp/unreal`, + var gamingSDKs = { + [unity]: `${baseUrl}sdk/gaming/unity`, + [unreal]: `${baseUrl}sdk/gaming/unreal`, }; - if (pnpSDKs.hasOwnProperty(selectedSDK)) { - delete pnpSDKs[selectedSDK]; + if (gamingSDKs.hasOwnProperty(selectedSDK)) { + delete gamingSDKs[selectedSDK]; } - var sdkNames = Object.keys(pnpSDKs); - var sdkLinks = Object.values(pnpSDKs); + var sdkNames = Object.keys(gamingSDKs); + var sdkLinks = Object.values(gamingSDKs); var sdkVersion = getPnPVersion(selectedSDK); return `
+ + Web + + + Mobile +
- Plug and Play SDKs + Gaming +
+ + v${sdkVersion} +
+
+
`; +} + +function pnpMobileTopNavButton(selectedSDK: string): string { + const baseUrl = process.env.REACT_APP_BASE_URL || "/docs/"; + + var pnpMobileSDKs = { + [android]: `${baseUrl}sdk/mobile/pnp/android`, + [ios]: `${baseUrl}sdk/mobile/pnp/ios`, + [reactnative]: `${baseUrl}sdk/mobile/pnp/react-native`, + [flutter]: `${baseUrl}sdk/mobile/pnp/flutter`, + }; + if (pnpMobileSDKs.hasOwnProperty(selectedSDK)) { + delete pnpMobileSDKs[selectedSDK]; + } + var sdkNames = Object.keys(pnpMobileSDKs); + var sdkLinks = Object.values(pnpMobileSDKs); + var sdkVersion = getPnPVersion(selectedSDK); + + return ` +
+ + Web + +
+ Plug and Play
v${sdkVersion}
- - Single Factor Auth SDKs - One click login, without redirection, all natively within your app. + + Single Factor Auth + Use native logins of your app, keeping Web3Auth hidden from users. - - MPC Core Kit SDK - Build your own MPC wallet with Web3Auth Infra layer SDK + + Gaming
`; } -function sfaTopNavButton(selectedSDK: string): string { +function sfaMobileTopNavButton(selectedSDK: string): string { const baseUrl = process.env.REACT_APP_BASE_URL || "/docs/"; - var sfaSDKs = { - [js]: `${baseUrl}sdk/sfa/sfa-js`, - [android]: `${baseUrl}sdk/sfa/sfa-android`, - [ios]: `${baseUrl}sdk/sfa/sfa-ios`, - [flutter]: `${baseUrl}sdk/sfa/sfa-flutter`, + var sfaMobileSDKs = { + [android]: `${baseUrl}sdk/mobile/sfa/android`, + [ios]: `${baseUrl}sdk/mobile/sfa/ios`, + [reactnative]: `${baseUrl}sdk/mobile/sfa/react-native`, + [flutter]: `${baseUrl}sdk/mobile/sfa/flutter`, }; - if (sfaSDKs.hasOwnProperty(selectedSDK)) { - delete sfaSDKs[selectedSDK]; + if (sfaMobileSDKs.hasOwnProperty(selectedSDK)) { + delete sfaMobileSDKs[selectedSDK]; } - var sdkNames = Object.keys(sfaSDKs); - var sdkLinks = Object.values(sfaSDKs); + var sdkNames = Object.keys(sfaMobileSDKs); + var sdkLinks = Object.values(sfaMobileSDKs); var sdkVersion = getSFAVersion(selectedSDK); return `
- - Plug and Play SDKs - Integrate Web3Auth with 4 lines of code. + + Web + + + Plug and Play + Integrate the full Web3Auth functionality with just 4 lines of code.
- Single Factor Auth SDKs -
- - v${sdkVersion} -
+ Single Factor Auth +
+ + v${sdkVersion} +
- - MPC Core Kit SDK - Build your own MPC wallet with Web3Auth Infra layer SDK + + Gaming
`; } @@ -117,16 +193,8 @@ function mpcckTopNavButton(selectedSDK: string): string { return `
- - Plug and Play SDKs - Integrate Web3Auth with 4 lines of code. - - - Single Factor Auth SDKs - One click login, without redirection, all natively within your app. -
- MPC Core Kit SDKs + MPC Core Kit