diff --git a/.gitignore b/.gitignore index c0ca5b957..54c580d58 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ yarn-error.log* .integrationBuilderCache yarn.lock +.idea diff --git a/docs/examples.mdx b/docs/examples.mdx index 6c8b8f31c..c92162a4e 100644 --- a/docs/examples.mdx +++ b/docs/examples.mdx @@ -7,5 +7,11 @@ hide_table_of_contents: true --- import Examples from "@site/src/components/Examples"; +import { exampleMap } from "@site/src/common/maps"; - + diff --git a/docs/sdk/core-kit/mpc-core-kit/examples.mdx b/docs/sdk/core-kit/mpc-core-kit/examples.mdx new file mode 100644 index 000000000..cc380f041 --- /dev/null +++ b/docs/sdk/core-kit/mpc-core-kit/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - MPC Core Kot SDK +sidebar_label: Examples +description: "@web3auth/mpc-core-kit Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitMPCWebExamples, coreKitMPCReactNativeExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/core-kit/sfa-android/examples.mdx b/docs/sdk/core-kit/sfa-android/examples.mdx new file mode 100644 index 000000000..2bf054bd5 --- /dev/null +++ b/docs/sdk/core-kit/sfa-android/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - Core Kit SFA Android SDK +sidebar_label: Examples +description: "Core Kit SFA Android Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitSfaAndroidExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/core-kit/sfa-flutter/examples.mdx b/docs/sdk/core-kit/sfa-flutter/examples.mdx new file mode 100644 index 000000000..459d42336 --- /dev/null +++ b/docs/sdk/core-kit/sfa-flutter/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - Core Kit SFA Flutter SDK +sidebar_label: Examples +description: "Core Kit SFA Flutter Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitSfaFlutterExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/core-kit/sfa-ios/examples.mdx b/docs/sdk/core-kit/sfa-ios/examples.mdx new file mode 100644 index 000000000..dc0dd0f61 --- /dev/null +++ b/docs/sdk/core-kit/sfa-ios/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - Core Kit SFA iOS SDK +sidebar_label: Examples +description: "Core Kit SFA iOS Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitSfaiOSExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/core-kit/sfa-node/examples.mdx b/docs/sdk/core-kit/sfa-node/examples.mdx new file mode 100644 index 000000000..a3ba6896b --- /dev/null +++ b/docs/sdk/core-kit/sfa-node/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - Core Kit SFA Node SDK +sidebar_label: Examples +description: " Core Kit SFA Node Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitSfaNodeExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/core-kit/sfa-react-native/examples.mdx b/docs/sdk/core-kit/sfa-react-native/examples.mdx new file mode 100644 index 000000000..6568add40 --- /dev/null +++ b/docs/sdk/core-kit/sfa-react-native/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - Core Kit SFA React Native SDK +sidebar_label: Examples +description: "Core Kit SFA React Native Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitSfaReactNativeExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/core-kit/sfa-web/examples.mdx b/docs/sdk/core-kit/sfa-web/examples.mdx new file mode 100644 index 000000000..08af9f1d3 --- /dev/null +++ b/docs/sdk/core-kit/sfa-web/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - Core Kit SFA Web SDK +sidebar_label: Examples +description: "Core Kit SFA Web Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { coreKitSfaWebExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/android/examples.mdx b/docs/sdk/pnp/android/examples.mdx new file mode 100644 index 000000000..214dafd5f --- /dev/null +++ b/docs/sdk/pnp/android/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP Android SDK +sidebar_label: Examples +description: "PnP Android Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpAndroidExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/flutter/examples.mdx b/docs/sdk/pnp/flutter/examples.mdx new file mode 100644 index 000000000..18c6a3695 --- /dev/null +++ b/docs/sdk/pnp/flutter/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP Flutter SDK +sidebar_label: Examples +description: "PnP Flutter Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpFlutterExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/ios/examples.mdx b/docs/sdk/pnp/ios/examples.mdx new file mode 100644 index 000000000..b6304d09b --- /dev/null +++ b/docs/sdk/pnp/ios/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP iOS SDK +sidebar_label: Examples +description: "PnP iOS Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpiOSExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/react-native/examples.mdx b/docs/sdk/pnp/react-native/examples.mdx new file mode 100644 index 000000000..e1169a056 --- /dev/null +++ b/docs/sdk/pnp/react-native/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP React Native SDK +sidebar_label: Examples +description: "PnP React Native Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpReactNativeExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/unity/examples.mdx b/docs/sdk/pnp/unity/examples.mdx new file mode 100644 index 000000000..38799ecc6 --- /dev/null +++ b/docs/sdk/pnp/unity/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP Unity SDK +sidebar_label: Examples +description: "PnP Unity Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpUnityExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/unreal/examples.mdx b/docs/sdk/pnp/unreal/examples.mdx new file mode 100644 index 000000000..c3b8495cf --- /dev/null +++ b/docs/sdk/pnp/unreal/examples.mdx @@ -0,0 +1,11 @@ +--- +title: Examples - PnP Unreal SDK +sidebar_label: Examples +description: "PnP Web Unreal Examples | Documentation - Web3Auth" +hide_table_of_contents: true +--- + +import Examples from "@site/src/components/Examples"; +import { pnpUnrealExamples } from "@site/src/common/maps"; + + diff --git a/docs/sdk/pnp/web/modal/examples.mdx b/docs/sdk/pnp/web/modal/examples.mdx new file mode 100644 index 000000000..c5558c2b7 --- /dev/null +++ b/docs/sdk/pnp/web/modal/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/pnp/web/modal/initialize.mdx b/docs/sdk/pnp/web/modal/initialize.mdx index 07ac46195..de87084ef 100644 --- a/docs/sdk/pnp/web/modal/initialize.mdx +++ b/docs/sdk/pnp/web/modal/initialize.mdx @@ -6,12 +6,12 @@ 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 SubscribeEvents from "@site/src/common/sdk/pnp/web/_subscribe-events.mdx"; import ExternalWalletAdapters from "@site/src/common/sdk/pnp/web/_external-wallet-adapters.mdx"; import OpenloginAdapterIntro from "@site/src/common/sdk/pnp/web/_openlogin-adapter-intro.mdx"; import CustomAuthenticationWeb3AuthExample from "@site/src/common/sdk/pnp/web/_custom-authentication-web3auth-example.mdx"; @@ -19,8 +19,6 @@ 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 InitiateTopUp from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx"; -import ShowWCScanner from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx"; import WhiteLabelData from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx"; After Installation, the next step to use Web3Auth is to Initialize the SDK. However, the @@ -33,7 +31,8 @@ Initialization is a two-step process, with an additional two steps for customiza 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 and Custom Authentication have to be configured within this step. +Instance, Whitelabeling, Multi Factor Authentication and Custom Authentication have to be configured +within this step. ## Instantiating Web3Auth @@ -57,7 +56,20 @@ This Web3Auth constructor takes an object with `Web3AuthOptions` as input. -### Adding a Private key provider +### 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` @@ -68,100 +80,94 @@ networks. :::note It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more -in-depth about providers, have a look at your [Providers reference](/sdk/pnp/web/providers). +in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers). ::: -```javascript -const chainConfig = { - chainId: "0x1", // Please use 0x1 for Mainnet - rpcTarget: "https://rpc.ankr.com/eth", - displayName: "Ethereum Mainnet", - blockExplorerUrl: "https://etherscan.io/", - ticker: "ETH", - tickerName: "Ethereum", - logo: "https://images.toruswallet.io/eth.svg", -}; - -const ethereumPrivateKeyProvider = EthereumPrivateKeyProvider({ +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 Web3Auth({ +const web3auth = new Web3AuthModal({ clientId: "", // Get your Client ID from the Web3Auth Dashboard web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider: ethereumPrivateKeyProvider, + privateKeyProvider, }); ``` -### Adding a Custom Chain Configuration - -#### `chainConfig` - - - -### 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` + - + -#### `WhiteLabelData` +```ts +import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider"; - +const privateKeyProvider = new SolanaPrivateKeyProvider({ + config: { chainConfig }, +}); -### Returns +const web3auth = new Web3AuthModal({ + clientId: "", // Get your Client ID from the Web3Auth Dashboard + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, +}); +``` -- `Object`: The web3auth instance with all its methods and events. + -### Example + - +```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, +}); +``` - + -```javascript -const chainConfig = { - chainId: "0x1", // Please use 0x1 for Mainnet - rpcTarget: "https://rpc.ankr.com/eth", - displayName: "Ethereum Mainnet", - blockExplorerUrl: "https://etherscan.io/", - ticker: "ETH", - tickerName: "Ethereum", - logo: "https://images.toruswallet.io/eth.svg", -}; - -const ethereumPrivateKeyProvider = EthereumPrivateKeyProvider({ - config: { chainConfig: chainConfig }, +```ts +import { CommonPrivateKeyProvider } from "@web3auth/base-provider"; + +const privateKeyProvider = new CommonPrivateKeyProvider({ + config: { chainConfig }, }); -const web3auth = new Web3Auth({ +const web3auth = new Web3AuthModal({ clientId: "", // Get your Client ID from the Web3Auth Dashboard web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, - privateKeyProvider: ethereumPrivateKeyProvider, + privateKeyProvider, }); ``` @@ -169,6 +175,29 @@ const web3auth = new Web3Auth({ +### 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 @@ -188,11 +217,11 @@ are required to be configured always based on the `authMode` you are using. ::: -### Configuring Openlogin Adapter +### Configuring Openlogin Adapter [Social Logins] -##### Example +##### 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 @@ -205,71 +234,15 @@ logins or remove them using the whitelabeling option. -## Subscribing the Lifecycle Events - - - -#### Login Modal Events - - - - - -| Event | Trigger with `@web3auth/ui` package | Trigger without package | Description | -| ----------------------- | ------------------------------------------ | ------------------------- | --------------------------------------------- | -| `INIT_EXTERNAL_WALLETS` | `LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS` | `"INIT_EXTERNAL_WALLETS"` | External Wallet are initialized | -| `LOGIN` | `LOGIN_MODAL_EVENTS.LOGIN` | `"LOGIN"` | Login is triggered | -| `DISCONNECT` | `LOGIN_MODAL_EVENTS.DISCONNECT` | `"DISCONNECT"` | Disconnection is triggered | -| `MODAL_VISIBILITY` | `LOGIN_MODAL_EVENTS.MODAL_VISIBILITY` | `"MODAL_VISIBILITY"` | Indicates whether the modal is visible or not | - - - - - -```tsx -declare const LOGIN_MODAL_EVENTS: { - readonly INIT_EXTERNAL_WALLETS: "INIT_EXTERNAL_WALLETS"; - readonly LOGIN: "LOGIN"; - readonly DISCONNECT: "DISCONNECT"; - readonly MODAL_VISIBILITY: "MODAL_VISIBILITY"; -}; -``` - - - - - -##### Example - -```tsx -import { LOGIN_MODAL_EVENTS } from "@web3auth/ui"; - -// subscribe to lifecycle events emitted by web3auth -const subscribeAuthEvents = (web3auth: Web3Auth) => { - // emitted when modal visibility changes. - web3auth.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, (isVisible) => { - console.log("is modal visible", isVisible); - }); -}; -``` - ## Configuring Plugins - - -### `showWalletConnectScanner()` +:::info - +This step is totally optional. If you don't want to use any plugins, feel free to skip this section. -### `initiateTopup()` +::: - + ## Initializing Modal @@ -300,7 +273,7 @@ visibility of each adapter within the modal. Each modal config has the following -### Example +### Usage + +## Quick Starts + + obj.type === QUICK_START)} /> diff --git a/docs/sdk/pnp/web/modal/install.mdx b/docs/sdk/pnp/web/modal/install.mdx index ebc77e3de..654da59af 100644 --- a/docs/sdk/pnp/web/modal/install.mdx +++ b/docs/sdk/pnp/web/modal/install.mdx @@ -20,17 +20,66 @@ This package gives access to common types and interfaces for Web3Auth. This come 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 `@web3auth/ethereum-provider` to your project +### 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 ``` -This package gives access to `EthereumPrivateKeyProvider` class, which accepts a secp251k1 private -key and returns an EIP1193 compatible provider. The EIP1193 provider can be used with various wallet -SDKs. This reference guide demonstrates the use of Web3Auth with EVM-compatible blockchains. To use -Web3Auth with different blockchain ecosystems like Solana, XRPL, and others please use their -respective providers. + + + + +```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 diff --git a/docs/sdk/pnp/web/modal/usage.mdx b/docs/sdk/pnp/web/modal/usage.mdx index d53e95025..e0754bcb3 100644 --- a/docs/sdk/pnp/web/modal/usage.mdx +++ b/docs/sdk/pnp/web/modal/usage.mdx @@ -4,13 +4,21 @@ 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 ConnectedAdapterName from "@site/src/common/sdk/pnp/web/_connectedAdapterName.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 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"; +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 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 @@ -20,20 +28,26 @@ Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples following functions: - `connect()` - Showing the Modal and Logging in the User -- `provider()` - Returns the native provider that can be used to make different blockchain - transactions. -- `connected()` - Returns `true` or `false` depending on whether the web3auth instance is available - or not. - `getUserInfo()` - Getting the User's Information +- `enableMFA()` - Enable Multi Factor Authentication for the user - `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. -- `getAdapter()` - Get the connected adapter instance. -- `configureAdapter()` - Configure the adapter instance. -- `clearCache()` - Clear the cache. -- `addPlugin()` - Add a plugin to Web3Auth. - `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: + +- `initiateTopup()` - Initiate Topup for the user. +- `showWalletConnectScanner()` - Show WalletConnect QR Code Scanner. + ## Logging in the User #### `connect()` @@ -51,11 +65,10 @@ await web3auth.connect(); 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. +- 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 @@ -64,43 +77,39 @@ Read more about connecting your users with the selected blockchain in the ::: -## Get a native provider - -`provider()` +### Check if the user is connected -Returns the native provider that can be used to make different blockchain transactions. + -#### Returns +### Check which adapter is connected -```js -get provider(): IProvider | null; -``` - -## Get connected status + -`connected()` +### Get the connected provider -Returns `true` or `false` depending on whether the web3auth instance is available or not. + -#### Returns +### Know the current status of the instance -```js -get connected(): boolean; -``` + ## Get User's Information -## Get idToken +## Enable Multi Factor Authentication (MFA) + + + +## Get idToken for Backend Verification -## Add Chain +## Add EVM Blockchain to Instance -## Switch Chain +## Switch to an EVM Blockchain @@ -112,6 +121,26 @@ get connected(): boolean; -## 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 + +#### `showWalletConnectScanner()` + + + +### Fiat On Ramp + +#### `initiateTopup()` + + diff --git a/docs/sdk/pnp/web/no-modal/examples.mdx b/docs/sdk/pnp/web/no-modal/examples.mdx new file mode 100644 index 000000000..53603359c --- /dev/null +++ b/docs/sdk/pnp/web/no-modal/examples.mdx @@ -0,0 +1,11 @@ +--- +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 index 1a2e76edd..1f4fa8477 100644 --- a/docs/sdk/pnp/web/no-modal/initialize.mdx +++ b/docs/sdk/pnp/web/no-modal/initialize.mdx @@ -4,27 +4,30 @@ sidebar_label: Initialize description: "@web3auth/no-modal initialize | Documentation - Web3Auth" --- -import InstantiatingProvider from "@site/src/common/sdk/core-kit/sfa/_instantiating_provider.mdx"; +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 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 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 OpenloginAdapterIntro from "@site/src/common/sdk/pnp/web/_openlogin-adapter-intro.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"; import PluginsIntro from "@site/src/common/sdk/pnp/web/_plugins-intro.mdx"; -import SubscribeEvents from "@site/src/common/sdk/pnp/web/_subscribe-events.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. However, the -Initialization is a two-step process, with an additional two steps for customizations, ie. +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 and Custom Authentication -have to be configured within this step, if you wish to customize your Web3Auth Instance. +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 @@ -54,86 +57,142 @@ This Web3AuthNoModal constructor takes an object with `Web3AuthNoModalOptions` a -### Returns +:::tip -- `Object`: The web3auth instance with all its methods and events. +Get the **Chain Config** for your preferred Blockchain from the +[Connect Blockchain Reference](/connect-blockchain#reference-guides-for-blockchain-connections). -### Instantiating a Provider +::: - +### Adding a Private Key Provider -### Whitelabeling +#### `privateKeyProvider` -#### `uiConfig` +`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. -For customizing the redirect screens while logging in and constructing the key, you need to pass on -`WhiteLabelData` in the `uiConfig` parameter to the `uiConfig` property of Web3Auth. +:::note -:::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, have a look at our -[Whitelabeling SDK Reference](/features/whitelabel). +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). ::: -##### Example +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, +}); +``` + + -```tsx -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: LANGUAGES.en, - mode: "light", - useLogoLoader: true, - theme: { - primary: "#FF0000", - secondary: "#00FF00", - warning: "#FFA500", - }, - tncLink: "https://example.com/terms", - privacyPolicy: "https://example.com/privacy", -}; + + +```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 - chainConfig, web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, privateKeyProvider, - uiConfig, }); ``` -### Example - -```tsx -const chainConfig: CustomChainConfig = { - chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", - displayName: "Ethereum Mainnet", - blockExplorer: "https://etherscan.io", - ticker: "ETH", - tickerName: "Ethereum", - rpcTarget: "https://rpc.ankr.com/eth", // This is the mainnet RPC we have added, please pass on your own endpoint while creating an app -}; -const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } }); + + + + +```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 - chainConfig, web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, privateKeyProvider, - uiConfig: { - theme: { - primaryColor: "#FF0000", - secondaryColor: "#00FF00", - textColor: "#0000FF", - }, - }, }); ``` + + + + +```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 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 @@ -142,11 +201,7 @@ provider on successful user login that can be used to invoke RPC calls on the wa blockchain. You can configure and use any of the adapters provided by Web3Auth, by just configuring them while initializing Web3AuthNoModal. -### Instantiating a Provider - - - -### Configuring Openlogin Adapter +### Configuring Openlogin Adapter [Social Logins] @@ -164,21 +219,15 @@ providers and further setup their configs while logging the user in and passing -## Subscribing the Lifecycle Events - - - ## Configuring Plugins - - -### `showWalletConnectScanner()` +:::info - +This step is totally optional. If you don't want to use any plugins, feel free to skip this section. -### `initiateTopup()` +::: - + ## Initializing Web3Auth @@ -195,3 +244,7 @@ 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. + +## Quick Starts + + obj.type === QUICK_START)} /> diff --git a/docs/sdk/pnp/web/no-modal/install.mdx b/docs/sdk/pnp/web/no-modal/install.mdx index 3bd0b3cf9..90a7b659a 100644 --- a/docs/sdk/pnp/web/no-modal/install.mdx +++ b/docs/sdk/pnp/web/no-modal/install.mdx @@ -20,6 +20,60 @@ This package gives access to common types and interfaces for Web3Auth. This come 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 diff --git a/docs/sdk/pnp/web/no-modal/usage.mdx b/docs/sdk/pnp/web/no-modal/usage.mdx index 51071cd4d..c464afe24 100644 --- a/docs/sdk/pnp/web/no-modal/usage.mdx +++ b/docs/sdk/pnp/web/no-modal/usage.mdx @@ -8,7 +8,11 @@ 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 ConnectedAdapterName from "@site/src/common/sdk/pnp/web/_connectedAdapterName.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 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"; @@ -16,6 +20,8 @@ import LogOut from "@site/src/common/sdk/pnp/web/_logout.mdx"; import OpenloginLoginParams from "@site/src/common/sdk/pnp/web/_openlogin-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 @@ -25,20 +31,26 @@ Natively, the instance of `Web3AuthNoModal` _(referred to as `web3auth` in our e the following functions: - `connectTo()` - Logging in the User with the given Wallet Adapter and respective Login Parameters -- `provider()` - Returns the native provider that can be used to make different blockchain - transactions. -- `connected()` - Returns `true` or `false` depending on whether the web3auth instance is available - or not. - `getUserInfo()` - Getting the User's Information +- `enableMFA()` - Enable Multi Factor Authentication for the user - `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. -- `getAdapter()` - Get the connected adapter instance. -- `configureAdapter()` - Configure the adapter instance. -- `clearCache()` - Clear the cache. -- `addPlugin()` - Add a plugin to Web3Auth. - `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: + +- `initiateTopup()` - Initiate Topup for the user. +- `showWalletConnectScanner()` - Show WalletConnect QR Code Scanner. + ## Logging in the User @@ -49,13 +61,15 @@ the following functions: 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 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. -On unsuccessful login, this function will return a `null` value. +### Usage -#### Example + :::tip @@ -66,8 +80,6 @@ provider type. ::: - - :::tip Read more about connecting your users with the selected blockchain in the @@ -75,10 +87,14 @@ Read more about connecting your users with the selected blockchain in the ::: +### Wallet Adapter Name + #### `walletName` +### Login Parameters + #### `loginParams` The `loginParams` are specific for each and every function. Please refer to the @@ -94,34 +110,29 @@ options. -## Get a native provider - -`provider()` +## Check if the user is connected -Returns the native provider that can be used to make different blockchain transactions. + -#### Returns - -```js -get provider(): IProvider | null; -``` +## Check which adapter is connected -## Get connected status + -`connected()` +## Get the connected provider -Returns `true` or `false` depending on whether the web3auth instance is available or not. + -#### Returns - -```js -get connected(): boolean; -``` +## Know the current status of the instance + ## Get User's Information +## Enable Multi Factor Authentication (MFA) + + + ## Get idToken @@ -134,51 +145,38 @@ get connected(): boolean; -## Get Adapter +## Logging out the User -Get the adapter connected by passing the name of the adapter. + -```tsx -export declare const WALLET_ADAPTERS: { - OPENLOGIN: string; - WALLET_CONNECT_V2: string; - TORUS_SOLANA: string; - PHANTOM: string; - SOLFLARE: string; - TORUS_EVM: string; - METAMASK: string; - COINBASE: string; -}; -``` +## Connecting to a Blockchain -```tsx -getAdapter(adapterName: WALLET_ADAPTER_TYPE): IAdapter | null; -``` + -## Configure Adapter +## Fetching the Connected Adapter -Configure an adapter instance to Web3Auth. + -```tsx -configureAdapter(adapter: IAdapter): Web3AuthNoModal; -``` +## Wallet Services Plugin Methods -## Clear Cache +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. -Clear the cache. +:::tip -```tsx -clearCache(): void; -``` +Learn more about the Wallet Services Plugin in the +[Wallet Services SDK Reference](../wallet-services/). -## Logging out the User +::: - +### Show WalletConnect Scanner -## Connecting to a Blockchain +#### `showWalletConnectScanner()` - + -## Fetching the Connected Adapter +### Fiat On Ramp - +#### `initiateTopup()` + + diff --git a/sidebars.ts b/sidebars.ts index 49cc709c5..f2741e9c9 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -929,6 +929,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/web/modal/install", "sdk/pnp/web/modal/initialize", "sdk/pnp/web/modal/usage", + "sdk/pnp/web/modal/examples", "sdk/pnp/web/modal/modal-hooks", { type: "category", @@ -953,6 +954,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/web/no-modal/install", "sdk/pnp/web/no-modal/initialize", "sdk/pnp/web/no-modal/usage", + "sdk/pnp/web/no-modal/examples", "sdk/pnp/web/no-modal/no-modal-hooks", { type: "category", @@ -1060,6 +1062,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/android/install", "sdk/pnp/android/initialize", "sdk/pnp/android/usage", + "sdk/pnp/android/examples", { type: "category", collapsible: true, @@ -1111,6 +1114,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/ios/install", "sdk/pnp/ios/initialize", "sdk/pnp/ios/usage", + "sdk/pnp/ios/examples", { type: "category", collapsible: true, @@ -1161,6 +1165,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/react-native/install", "sdk/pnp/react-native/initialize", "sdk/pnp/react-native/usage", + "sdk/pnp/react-native/examples", { type: "category", collapsible: true, @@ -1225,6 +1230,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/flutter/install", "sdk/pnp/flutter/initialize", "sdk/pnp/flutter/usage", + "sdk/pnp/flutter/examples", { type: "category", collapsible: true, @@ -1274,6 +1280,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/unity/install", "sdk/pnp/unity/initialize", "sdk/pnp/unity/usage", + "sdk/pnp/unity/examples", { type: "category", collapsible: true, @@ -1308,6 +1315,7 @@ const sidebars: SidebarsConfig = { "sdk/pnp/unreal/install", "sdk/pnp/unreal/initialize", "sdk/pnp/unreal/usage", + "sdk/pnp/unreal/examples", { type: "category", collapsible: true, @@ -1342,6 +1350,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/sfa-web/initialize", "sdk/core-kit/sfa-web/authentication", "sdk/core-kit/sfa-web/usage", + "sdk/core-kit/sfa-web/examples", "sdk/core-kit/sfa-web/passkeys-sfa", { type: "category", @@ -1356,7 +1365,7 @@ const sidebars: SidebarsConfig = { }, { type: "category", - label: "Wallet Services Plugin", + label: "Plugins", items: [ "sdk/core-kit/sfa-web/wallet-services/wallet-services", "sdk/core-kit/sfa-web/wallet-services/usage", @@ -1391,6 +1400,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/sfa-android/initialize", "sdk/core-kit/sfa-android/authentication", "sdk/core-kit/sfa-android/usage", + "sdk/core-kit/sfa-android/examples", { type: "link", label: "Support Forum", @@ -1419,7 +1429,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/sfa-ios/initialize", "sdk/core-kit/sfa-ios/authentication", "sdk/core-kit/sfa-ios/usage", - + "sdk/core-kit/sfa-ios/examples", { type: "link", label: "Support Forum", @@ -1448,6 +1458,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/sfa-react-native/initialize", "sdk/core-kit/sfa-react-native/authentication", "sdk/core-kit/sfa-react-native/usage", + "sdk/core-kit/sfa-react-native/examples", { type: "category", label: "Providers", @@ -1482,7 +1493,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/sfa-flutter/initialize", "sdk/core-kit/sfa-flutter/authentication", "sdk/core-kit/sfa-flutter/usage", - + "sdk/core-kit/sfa-flutter/examples", { type: "link", label: "Support Forum", @@ -1511,6 +1522,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/sfa-node/initialize", "sdk/core-kit/sfa-node/authentication", "sdk/core-kit/sfa-node/usage", + "sdk/core-kit/sfa-node/examples", { type: "link", label: "Support Forum", @@ -1535,6 +1547,7 @@ const sidebars: SidebarsConfig = { "sdk/core-kit/mpc-core-kit/authentication", "sdk/core-kit/mpc-core-kit/signing", "sdk/core-kit/mpc-core-kit/usage", + "sdk/core-kit/mpc-core-kit/examples", { type: "category", label: "Providers", diff --git a/src/common/maps.tsx b/src/common/maps.tsx index a18615315..57330ec7e 100644 --- a/src/common/maps.tsx +++ b/src/common/maps.tsx @@ -51,23 +51,119 @@ export const quickStartHostedLinks = { MPC_CORE_KIT_REACT_NATIVE: "https://w3a.link/mpc-core-kit-rn-quick-start", }; -export interface Props { +export const quickStartSourceCode = { + // PNP Modal SDK + PNP_MODAL_REACT: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/react-modal-quick-start", + PNP_MODAL_ANGULAR: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/angular-modal-quick-start", + PNP_MODAL_VUE: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vue-modal-quick-start", + PNP_MODAL_NEXTJS: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nextjs-modal-quick-start", + PNP_MODAL_NUXTJS: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nuxt-modal-quick-start", + PNP_MODAL_HTML: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start", + // PNP No Modal SDK + + PNP_NO_MODAL_REACT: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/react-no-modal-quick-start", + PNP_NO_MODAL_ANGULAR: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/angular-no-modal-quick-start", + PNP_NO_MODAL_VUE: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/vue-no-modal-quick-start", + PNP_NO_MODAL_NEXTJS: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/nextjs-no-modal-quick-start", + PNP_NO_MODAL_NUXTJS: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/nuxt-no-modal-quick-start", + PNP_NO_MODAL_HTML: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/vanillajs-no-modal-quick-start", + // PNP Android SDK + PNP_ANDROID: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-quick-start", + // PNP iOS SDK + PNP_IOS: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-quick-start", + // PNP React Native SDK + PNP_REACT_NATIVE: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-quick-start", + // PNP Flutter SDK + PNP_FLUTTER: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-quick-start", + // PNP Unity SDK + PNP_UNITY: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/unity/unity-quick-start", + // PNP Unity SDK + PNP_UNREAL: "https://github.com/Web3Auth/web3auth-unreal-example/tree/master", + // SFA Web SDK + SFA_WEB_REACT: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-react-quick-start", + SFA_WEB_ANGULAR: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-angular-quick-start", + SFA_WEB_VUE: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-vue-quick-start", + SFA_WEB_NEXTJS: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-nextjs-quick-start", + SFA_WEB_HTML: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start", + // SFA React Native SDK + SFA_REACT_NATIVE: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-react-native/sfa-rn-bare-quick-start", + // SFA Android SDK + SFA_ANDROID: + "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-quick-start", + // SFA iOS SDK + SFA_IOS: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-ios/sfa-ios-quick-start", + // SFA Flutter SDK + SFA_FLUTTER: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-flutter/sfa_flutter_quick_start", + // SFA Node SDK + SFA_NODE: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/sfa-node-quick-start", + // MPC Core Kit SDK + MPC_CORE_KIT_REACT: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-react-quick-start", + MPC_CORE_KIT_ANGULAR: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-angular-quick-start", + MPC_CORE_KIT_VUE: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start", + MPC_CORE_KIT_NEXTJS: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-nextjs-quick-start", + + MPC_CORE_KIT_REACT_NATIVE: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-react-native/mpc-core-kit-rn-quick-start", +}; + +export interface GuidesInterface { content: Record< string, { title: string; - description: string; image: string; + description: string; type: string; tags: string[]; - link: string; - githubLink?: string; - qsLink?: string; - guideLink?: string; + date: string; + author: string; + communityPortalTopicId: string; + pinned: string; } >; } +export interface ExamplesInterface { + id: string; + title: string; + description: string; + image: string; + type: string; + tags: string[]; + link: string; + githubLink: string; + qsLink?: string; + guideLink?: string; +} + export const tags = { pnp: "pnp", coreKit: "core kit", @@ -80,6 +176,7 @@ export const tags = { ios: "ios", reactNative: "react native", flutter: "flutter", + node: "node", unity: "unity", unreal: "unreal engine", evm: "evm", @@ -140,6 +237,10 @@ export const platformMap = [ label: "Unreal Engine", value: tags.unreal, }, + { + label: "Node.js", + value: tags.node, + }, ]; export const blockchainMap = [ @@ -209,9 +310,9 @@ export const blockchainMap = [ }, ]; -const PLAYGROUND = "PLAYGROUND"; -const QUICK_START = "QUICK START"; -const SAMPLE_APP = "SAMPLE APP"; +export const PLAYGROUND = "PLAYGROUND"; +export const QUICK_START = "QUICK START"; +export const SAMPLE_APP = "SAMPLE APP"; export const typeMap = [ { @@ -228,7 +329,7 @@ export const typeMap = [ }, ]; -export const pnpModalExamples = [ +export const pnpModalExamples: ExamplesInterface[] = [ { title: "PnP Modal SDK React Quick Start", description: "A quick integration of Plug and Play Modal SDK in React", @@ -236,8 +337,8 @@ export const pnpModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "react"], link: quickStartHostedLinks.PNP_MODAL_REACT, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/react-modal-quick-start", + githubLink: quickStartSourceCode.PNP_MODAL_REACT, + id: "react-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0", }, { @@ -247,8 +348,8 @@ export const pnpModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "angular"], link: quickStartHostedLinks.PNP_MODAL_ANGULAR, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/angular-modal-quick-start", + githubLink: quickStartSourceCode.PNP_MODAL_ANGULAR, + id: "angular-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_MODAL&framework=ANGULAR&stepIndex=0", }, { @@ -258,8 +359,8 @@ export const pnpModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "vue"], link: quickStartHostedLinks.PNP_MODAL_VUE, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vue-modal-quick-start", + githubLink: quickStartSourceCode.PNP_MODAL_VUE, + id: "vue-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_MODAL&framework=VUE&stepIndex=0", }, { @@ -269,8 +370,8 @@ export const pnpModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "nextjs"], link: quickStartHostedLinks.PNP_MODAL_NEXTJS, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nextjs-modal-quick-start", + githubLink: quickStartSourceCode.PNP_MODAL_NEXTJS, + id: "nextjs-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_MODAL&framework=NEXTJS&stepIndex=0", }, { @@ -280,8 +381,8 @@ export const pnpModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "nuxt"], link: "https://nuxt-modal-quick-start.vercel.app/", - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nuxt-modal-quick-start", + githubLink: quickStartSourceCode.PNP_MODAL_NUXTJS, + id: "nuxt-modal-quick-start", }, { title: "PnP Modal SDK Vanilla JS Quick Start", @@ -290,8 +391,8 @@ export const pnpModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.modal, tags.evm, "javascript"], link: quickStartHostedLinks.PNP_MODAL_HTML, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start", + githubLink: quickStartSourceCode.PNP_MODAL_HTML, + id: "vanillajs-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_MODAL&framework=HTML&stepIndex=0&stepIndex=0", }, { @@ -317,6 +418,7 @@ export const pnpModalExamples = [ link: "https://custom-authentication-modal-example.vercel.app/", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/custom-authentication-modal-example", + id: "custom-authentication-modal-example", guideLink: "/sdk/pnp/web/modal/custom-authentication", }, { @@ -327,6 +429,7 @@ export const pnpModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm], link: "https://evm-modal-example.vercel.app/", + id: "evm-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/blockchain-connection-examples/evm-modal-example", guideLink: "/connect-blockchain/evm/", @@ -338,6 +441,7 @@ export const pnpModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.solana, "ed25519"], link: "https://solana-modal-example.vercel.app/", + id: "solana-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/blockchain-connection-examples/solana-modal-example", guideLink: "/connect-blockchain/solana/", @@ -349,6 +453,7 @@ export const pnpModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.xrpl], link: "https://xrpl-modal-example.vercel.app/", + id: "xrpl-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/blockchain-connection-examples/xrpl-modal-example", guideLink: "/connect-blockchain/xrpl/", @@ -360,6 +465,7 @@ export const pnpModalExamples = [ type: PLAYGROUND, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "react", "hooks"], link: "https://pnp-modal-playground.vercel.app/", + id: "pnp-modal-playground", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/react-modal-playground", }, @@ -370,6 +476,7 @@ export const pnpModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.modal, "javascript", tags.evm, "wagmi"], link: "https://wagmi-modal-example.vercel.app/", + id: "wagmi-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/wagmi-examples/wagmi-modal-example", }, @@ -380,11 +487,12 @@ export const pnpModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.modal, "javascript", "wagmi", tags.evm, "rainbow"], link: "https://rainbowkit-modal-example.vercel.app/", + id: "rainbowkit-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/wagmi-examples/rainbowkit-modal-example", }, ]; -export const pnpNoModalExamples = [ +export const pnpNoModalExamples: ExamplesInterface[] = [ { title: "PnP No Modal SDK React Quick Start", description: "A quick integration of Plug and Play No Modal SDK in React", @@ -392,8 +500,8 @@ export const pnpNoModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "react"], link: quickStartHostedLinks.PNP_NO_MODAL_REACT, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/react-no-modal-quick-start", + githubLink: quickStartSourceCode.PNP_NO_MODAL_REACT, + id: "react-no-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=REACT&stepIndex=0", }, { @@ -403,8 +511,8 @@ export const pnpNoModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "angular"], link: quickStartHostedLinks.PNP_NO_MODAL_ANGULAR, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/angular-no-modal-quick-start", + githubLink: quickStartSourceCode.PNP_NO_MODAL_ANGULAR, + id: "angular-no-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=ANGULAR&stepIndex=0", }, { @@ -414,8 +522,8 @@ export const pnpNoModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "vue"], link: quickStartHostedLinks.PNP_NO_MODAL_VUE, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/vue-no-modal-quick-start", + githubLink: quickStartSourceCode.PNP_NO_MODAL_VUE, + id: "vue-no-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=VUE&stepIndex=0", }, { @@ -425,8 +533,8 @@ export const pnpNoModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "nextjs"], link: quickStartHostedLinks.PNP_NO_MODAL_NEXTJS, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/nextjs-no-modal-quick-start", + githubLink: quickStartSourceCode.PNP_NO_MODAL_NEXTJS, + id: "nextjs-no-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=NEXTJS&stepIndex=0", }, { @@ -436,8 +544,8 @@ export const pnpNoModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "nuxt"], link: "https://nuxt-no-modal-quick-start.vercel.app/", - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/nuxt-no-modal-quick-start", + githubLink: quickStartSourceCode.PNP_NO_MODAL_NUXTJS, + id: "nuxt-no-modal-quick-start", }, { title: "PnP No Modal SDK Vanilla JS Quick Start", @@ -446,8 +554,8 @@ export const pnpNoModalExamples = [ type: QUICK_START, tags: [tags.pnp, tags.web, tags.noModal, tags.evm, "javascript"], link: quickStartHostedLinks.PNP_NO_MODAL_HTML, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/quick-starts/vanillajs-no-modal-quick-start", + githubLink: quickStartSourceCode.PNP_NO_MODAL_HTML, + id: "vanillajs-no-modal-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=HTML&stepIndex=0&stepIndex=0", }, { @@ -458,6 +566,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm], link: "https://evm-no-modal-example.vercel.app/", + id: "evm-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/evm-no-modal-example", guideLink: "/connect-blockchain/evm/", @@ -469,6 +578,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.solana, "ed25519"], link: "https://solana-no-modal-example.vercel.app/", + id: "solana-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/solana-no-modal-example", guideLink: "/connect-blockchain/solana/", @@ -480,6 +590,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.xrpl], link: "https://xrpl-no-modal-example.vercel.app/", + id: "xrpl-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/xrpl-no-modal-example", guideLink: "/connect-blockchain/xrpl/", @@ -491,6 +602,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.algorand], link: "https://algorand-no-modal-example.vercel.app/", + id: "algorand-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/algorand-no-modal-example", guideLink: "/connect-blockchain/other/algorand/", @@ -502,6 +614,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.aptos, "ed25519"], link: "https://aptos-no-modal-example.vercel.app/", + id: "aptos-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/aptos-no-modal-example", guideLink: "/connect-blockchain/other/aptos/", @@ -513,6 +626,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.cosmos], link: "https://cosmos-no-modal-example.vercel.app/", + id: "cosmos-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/cosmos-no-modal-example", guideLink: "/connect-blockchain/other/cosmos/", @@ -524,6 +638,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.immutablex], link: "https://immutablex-no-modal-example.vercel.app/", + id: "immutablex-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/immutablex-no-modal-example", guideLink: "/connect-blockchain/other/immutablex/", @@ -546,6 +661,7 @@ export const pnpNoModalExamples = [ tags.polkadot, ], link: "https://multi-chain-no-modal-example.vercel.app/", + id: "multi-chain-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/multi-chain-no-modal-example", guideLink: "/guides/pnp-no-modal-multichain", @@ -557,6 +673,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.polkadot], link: "https://polkadot-no-modal-example.vercel.app/", + id: "polkadot-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/polkadot-no-modal-example", guideLink: "/connect-blockchain/other/polkadot/", @@ -568,6 +685,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.polymesh], link: "https://polymesh-no-modal-example.vercel.app/", + id: "polymesh-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/polymesh-no-modal-example", guideLink: "/connect-blockchain/other/polymesh/", @@ -579,6 +697,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.starkex], link: "https://starkex-no-modal-example.vercel.app/", + id: "starkex-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/starkex-no-modal-example", guideLink: "/connect-blockchain/other/starkex/", @@ -590,6 +709,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.starknet], link: "https://starknet-no-modal-example.vercel.app/", + id: "starknet-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/starknet-no-modal-example", guideLink: "/connect-blockchain/other/starknet/", @@ -601,6 +721,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.sui], link: "https://sui-no-modal-example.vercel.app/", + id: "sui-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/sui-no-modal-example", guideLink: "/connect-blockchain/other/sui/", @@ -612,6 +733,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.tezos], link: "https://tezos-no-modal-example.vercel.app/", + id: "tezos-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/blockchain-connection-examples/tezos-no-modal-example", guideLink: "/connect-blockchain/other/tezos/", @@ -623,6 +745,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", tags.evm, "chrome extension"], link: "/guides/browser-extension", + id: "chrome-extension-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/chrome-extension-no-modal-example", guideLink: "/guides/browser-extension", @@ -645,6 +768,7 @@ export const pnpNoModalExamples = [ tags.evm, ], link: "https://firebase-google-aggregate-no-modal-example.vercel.app/", + id: "firebase-google-aggregate-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/aggregate-verifier-examples/firebase-google-aggregate-no-modal-example", guideLink: "/auth-provider-setup/aggregate-verifier", @@ -669,6 +793,7 @@ export const pnpNoModalExamples = [ tags.evm, ], link: "https://auth0-google-aggregate-no-modal-example.vercel.app/", + id: "auth0-google-aggregate-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/aggregate-verifier-examples/auth0-google-aggregate-no-modal-example", guideLink: "/auth-provider-setup/aggregate-verifier", @@ -688,6 +813,7 @@ export const pnpNoModalExamples = [ "implicit mode", ], link: "https://auth0-no-modal-example.vercel.app/", + id: "auth0-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/auth0-no-modal-example", guideLink: "/guides/auth0", @@ -707,6 +833,7 @@ export const pnpNoModalExamples = [ "implicit mode", ], link: "https://cognito-no-modal-example.vercel.app/", + id: "cognito-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/cognito-no-modal-example", guideLink: "/guides/cognito", @@ -727,6 +854,7 @@ export const pnpNoModalExamples = [ "express", ], link: "https://custom-jwt-no-modal-example.vercel.app/", + id: "custom-jwt-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/custom-jwt-no-modal-example", guideLink: "/auth-provider-setup/byo-jwt-provider", @@ -738,6 +866,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "discord", tags.evm, "implicit mode"], link: "https://discord-no-modal-example.vercel.app/", + id: "discord-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/discord-no-modal-example", guideLink: "/guides/discord", @@ -749,6 +878,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "facebook", tags.evm, "implicit mode"], link: "https://facebook-no-modal-example.vercel.app/", + id: "facebook-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/facebook-no-modal-example", guideLink: "/guides/facebook", @@ -760,6 +890,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "google", tags.evm, "implicit mode"], link: "https://google-no-modal-example.vercel.app/", + id: "google-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/google-no-modal-example", guideLink: "/guides/google", @@ -771,6 +902,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "telegram", tags.evm, "implicit mode"], link: "https://telegram-no-modal-example.vercel.app/", + id: "telegram-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/telegram-no-modal-example", guideLink: "/guides/telegram", @@ -782,6 +914,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "twitch", tags.evm, "implicit mode"], link: "https://twitch-no-modal-example.vercel.app/", + id: "twitch-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/twitch-no-modal-example", guideLink: "/guides/twitch", @@ -793,6 +926,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "worldcoin", tags.evm, "implicit mode"], link: "https://worldcoin-no-modal-example.vercel.app/", + id: "worldcoin-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/worldcoin-no-modal-example", }, @@ -803,6 +937,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.noModal, "javascript", "firebase", tags.evm, "id token login"], link: "https://firebase-no-modal-example.vercel.app/", + id: "firebase-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/single-verifier-examples/firebase-no-modal-example", guideLink: "/guides/firebase", @@ -822,6 +957,7 @@ export const pnpNoModalExamples = [ "nextjs", ], link: "https://server-side-verification-no-modal-example.vercel.app/", + id: "server-side-verification-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/server-side-verification-no-modal-example", guideLink: "/features/server-side-verification", @@ -833,6 +969,7 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "wagmi", "react"], link: "https://wagmi-no-modal-example.vercel.app/", + id: "wagmi-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/wagmi/wagmi-no-modal-example", }, @@ -843,11 +980,12 @@ export const pnpNoModalExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.web, tags.noModal, "javascript", tags.evm, "wagmi", "react", "rainbow"], link: "https://rainbowkit-no-modal-example.vercel.app/", + id: "rainbowkit-no-modal-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/wagmi/rainbowkit-no-modal-example", }, ]; -export const pnpiOSExamples = [ +export const pnpiOSExamples: ExamplesInterface[] = [ { title: "Web3Auth PnP iOS SDK Quick Start", description: "A quick integration of Web3Auth Plug and Play iOS SDK", @@ -855,7 +993,8 @@ export const pnpiOSExamples = [ type: QUICK_START, tags: [tags.pnp, tags.ios, tags.evm, "swift"], link: quickStartHostedLinks.PNP_IOS_IOS, - githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-quick-start", + id: "ios-quick-start", + githubLink: quickStartSourceCode.PNP_IOS, qsLink: "/quick-start?product=PNP&sdk=PNP_IOS&framework=IOS&stepIndex=0", }, { @@ -865,6 +1004,7 @@ export const pnpiOSExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.ios, "swift", tags.solana, "ed25519"], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-solana-example", + id: "ios-solana-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-solana-example", guideLink: "/connect-blockchain/solana/ios", @@ -876,6 +1016,7 @@ export const pnpiOSExamples = [ type: PLAYGROUND, tags: [tags.pnp, tags.ios, "swift", tags.solana, tags.evm, "secp256k1"], link: "https://w3a.link/pnp-ios-playground", + id: "pnp-ios-playground", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-playground", }, { @@ -885,6 +1026,7 @@ export const pnpiOSExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.ios, "swift", "firebase", tags.evm, "id token login"], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-firebase-example", + id: "ios-firebase-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-firebase-example", }, @@ -895,6 +1037,7 @@ export const pnpiOSExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.ios, "swift", "auth0", "email passwordless", tags.evm, "implicit mode"], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-auth0-example", + id: "ios-auth0-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-auth0-example", guideLink: "/guides/ios-auth0", }, @@ -917,12 +1060,13 @@ export const pnpiOSExamples = [ tags.evm, ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-aggregate-verifier-example", + id: "ios-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/ios/ios-aggregate-verifier-example", guideLink: "/sdk/pnp/ios/custom-authentication", }, ]; -export const pnpAndroidExamples = [ +export const pnpAndroidExamples: ExamplesInterface[] = [ { title: "Web3Auth PnP Android SDK Quick Start", description: "A quick integration of Web3Auth Plug and Play Android SDK", @@ -930,8 +1074,8 @@ export const pnpAndroidExamples = [ type: QUICK_START, tags: [tags.pnp, tags.android, tags.evm, "kotlin"], link: quickStartHostedLinks.PNP_ANDROID_ANDROID, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-quick-start", + githubLink: quickStartSourceCode.PNP_ANDROID, + id: "android-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_ANDROID&framework=ANDROID&stepIndex=0&stepIndex=0", }, { @@ -943,6 +1087,7 @@ export const pnpAndroidExamples = [ link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-solana-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-solana-example", + id: "android-solana-example", guideLink: "/connect-blockchain/solana/android", }, { @@ -954,6 +1099,7 @@ export const pnpAndroidExamples = [ link: "https://w3a.link/pnp-android-playground", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-playground", + id: "android-playground", }, { title: "Integrate Firebase based Login in PnP Android SDK", @@ -962,6 +1108,7 @@ export const pnpAndroidExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.android, "kotlin", "firebase", tags.evm, "id token login"], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-firebase-example", + id: "android-firebase-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-firebase-example", }, @@ -980,6 +1127,7 @@ export const pnpAndroidExamples = [ "implicit mode", ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-auth0-example", + id: "android-auth0-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-auth0-example", guideLink: "/guides/android-auth0", @@ -1003,12 +1151,13 @@ export const pnpAndroidExamples = [ "facebook", ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-aggregate-verifier-example", + id: "android-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-aggregate-verifier-example", guideLink: "/sdk/pnp/android/custom-authentication", }, ]; -export const pnpReactNativeExamples = [ +export const pnpReactNativeExamples: ExamplesInterface[] = [ { title: "Web3Auth PnP React Native SDK Quick Start", description: @@ -1017,8 +1166,8 @@ export const pnpReactNativeExamples = [ type: QUICK_START, tags: [tags.pnp, "javascript", tags.android, tags.ios, tags.evm, tags.reactNative], link: quickStartHostedLinks.PNP_REACT_NATIVE_IOS, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-quick-start", + githubLink: quickStartSourceCode.PNP_REACT_NATIVE, + id: "rn-bare-quick-start", qsLink: "/quick-start?product=PNP&sdk=PNP_REACT_NATIVE&framework=IOS&stepIndex=0", }, { @@ -1038,6 +1187,7 @@ export const pnpReactNativeExamples = [ "implicit mode", ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-auth0-example", + id: "rn-bare-auth0-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-auth0-example", guideLink: "/guides/react-native-auth0", @@ -1063,6 +1213,7 @@ export const pnpReactNativeExamples = [ "facebook", ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-aggregate-verifier-example", + id: "rn-bare-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-aggregate-verifier-example", guideLink: "/sdk/pnp/react-native/custom-authentication", @@ -1074,12 +1225,13 @@ export const pnpReactNativeExamples = [ type: SAMPLE_APP, tags: [tags.pnp, "javascript", tags.android, tags.ios, tags.evm, tags.reactNative, "expo"], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-expo-example", + id: "rn-expo-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-expo-example", guideLink: "/guides/react-native-expo", }, ]; -export const pnpFlutterExamples = [ +export const pnpFlutterExamples: ExamplesInterface[] = [ { title: "Web3Auth PnP Flutter SDK Quick Start", description: "A quick integration of Web3Auth Plug and Play Flutter SDK for Android and iOS", @@ -1087,8 +1239,8 @@ export const pnpFlutterExamples = [ type: QUICK_START, tags: [tags.pnp, tags.flutter, tags.ios, tags.android, tags.evm, "dart"], link: quickStartHostedLinks.PNP_FLUTTER_ANDROID, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-quick-start", + id: "flutter-quick-start", + githubLink: quickStartSourceCode.PNP_FLUTTER, qsLink: "/quick-start?product=PNP&sdk=PNP_ANDROID&framework=ANDROID&stepIndex=0&stepIndex=0", }, { @@ -1098,6 +1250,7 @@ export const pnpFlutterExamples = [ type: SAMPLE_APP, tags: [tags.pnp, tags.flutter, tags.ios, tags.android, "dart", tags.solana, "ed25519"], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-solana-example", + id: "flutter-solana-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-solana-example", guideLink: "/connect-blockchain/solana/flutter", @@ -1119,8 +1272,8 @@ export const pnpFlutterExamples = [ "secp256k1", ], link: "https://w3a.link/pnp-flutter-ios-playground", - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-playground", + githubLink: "https://w3a.link/pnp-flutter-ios-playground", + id: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-playground", }, { title: "Integrate Firebase based Login in PnP Flutter SDK", @@ -1139,6 +1292,7 @@ export const pnpFlutterExamples = [ "id token login", ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-firebase-example", + id: "flutter-firebase-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-firebase-example", }, @@ -1160,6 +1314,7 @@ export const pnpFlutterExamples = [ tags.evm, ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-auth0-example", + id: "flutter-auth0-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-auth0-example", guideLink: "/guides/flutter-auth0", @@ -1185,12 +1340,13 @@ export const pnpFlutterExamples = [ tags.evm, ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-aggregate-verifier-example", + id: "flutter-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-aggregate-verifier-example", guideLink: "/sdk/pnp/flutter/custom-authentication", }, ]; -export const pnpUnityExamples = [ +export const pnpUnityExamples: ExamplesInterface[] = [ { title: "Web3Auth PnP Unity SDK Quick Start", description: @@ -1199,8 +1355,8 @@ export const pnpUnityExamples = [ type: QUICK_START, tags: [tags.pnp, tags.unity, "csharp", tags.android, tags.ios, tags.evm, "webgl"], link: quickStartHostedLinks.PNP_UNITY_ANDROID, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/unity/unity-quick-start", + id: "unity-quick-start", + githubLink: quickStartSourceCode.PNP_UNITY, qsLink: "/quick-start?product=PNP&sdk=PNP_UNITY&framework=ANDROID&stepIndex=0", }, { @@ -1221,6 +1377,7 @@ export const pnpUnityExamples = [ tags.evm, ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/unity/unity-auth0-example", + id: "unity-auth0-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/unity/unity-auth0-example", guideLink: "/sdk/pnp/unity/custom-authentication", @@ -1247,13 +1404,13 @@ export const pnpUnityExamples = [ tags.evm, ], link: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/unity/unity-aggregate-verifier-example", + id: "unity-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/unity/unity-aggregate-verifier-example", guideLink: "/sdk/pnp/unity/custom-authentication", }, ]; - -export const pnpUnrealExamples = [ +export const pnpUnrealExamples: ExamplesInterface[] = [ { title: "Web3Auth PnP Unreal Engine SDK Quick Start", description: "A quick integration of Web3Auth Plug and Play Unreal Engine SDK in Android & iOS", @@ -1261,9 +1418,11 @@ export const pnpUnrealExamples = [ type: QUICK_START, tags: [tags.pnp, tags.unreal, "csharp", tags.android, tags.evm, tags.ios], link: "https://github.com/Web3Auth/web3auth-unreal-example/tree/master", - githubLink: "https://github.com/Web3Auth/web3auth-unreal-example/tree/master", + id: "unreal-quick-start", + githubLink: quickStartSourceCode.PNP_UNREAL, }, { + id: "unreal-auth0-example", title: "Using Auth0 with Web3Auth PnP Unreal Engine SDK", description: "Using Auth0 Single Page App (Implicit Mode) in Web3Auth Plug and Play Unreal Engine SDK in Android & iOS", @@ -1275,6 +1434,7 @@ export const pnpUnrealExamples = [ guideLink: "/sdk/pnp/unreal/custom-authentication", }, { + id: "unreal-google-example", title: "Using Google in Web3Auth PnP Unreal Engine SDK", description: "Using Google Custom Authentication in Web3Auth Plug and Play Unreal Engine SDK for Android & iOS", @@ -1298,8 +1458,7 @@ export const pnpUnrealExamples = [ guideLink: "/sdk/pnp/unreal/custom-authentication", }, ]; - -export const coreKitSfaWebExamples = [ +export const coreKitSfaWebExamples: ExamplesInterface[] = [ { title: "Single Factor Auth React Quick Start", description: "A quick integration of Core Kit Single Factor Auth SDK in React", @@ -1316,8 +1475,8 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: quickStartHostedLinks.SFA_WEB_REACT, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-react-quick-start", + githubLink: quickStartSourceCode.SFA_WEB_REACT, + id: "sfa-react-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_WEB&framework=REACT&stepIndex=0", }, { @@ -1336,8 +1495,8 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: quickStartHostedLinks.SFA_WEB_ANGULAR, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-angular-quick-start", + githubLink: quickStartSourceCode.SFA_WEB_ANGULAR, + id: "sfa-angular-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_WEB&framework=ANGULAR&stepIndex=0", }, { @@ -1356,8 +1515,8 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: quickStartHostedLinks.SFA_WEB_VUE, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-vue-quick-start", + githubLink: quickStartSourceCode.SFA_WEB_VUE, + id: "sfa-vue-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_WEB&framework=VUE&stepIndex=0", }, { @@ -1376,8 +1535,8 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: quickStartHostedLinks.SFA_WEB_NEXTJS, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-nextjs-quick-start", + githubLink: quickStartSourceCode.SFA_WEB_NEXTJS, + id: "sfa-nextjs-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_WEB&framework=NEXTJS&stepIndex=0", }, { @@ -1387,8 +1546,8 @@ export const coreKitSfaWebExamples = [ type: QUICK_START, tags: [tags.coreKit, "sfa", tags.web, tags.sfa, "javascript", tags.evm, "id token login"], link: quickStartHostedLinks.SFA_WEB_HTML, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start", + githubLink: quickStartSourceCode.SFA_WEB_HTML, + id: "sfa-vanillajs-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_WEB&framework=HTML&stepIndex=0", }, { @@ -1410,6 +1569,7 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: "https://sfa-web-aggregate-verifier-example.vercel.app/", + id: "sfa-web-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/blob/main/single-factor-auth-web/sfa-web-aggregate-verifier-example", guideLink: "/auth-provider-setup/aggregate-verifier", @@ -1430,6 +1590,7 @@ export const coreKitSfaWebExamples = [ "secp256k1", ], link: "https://sfa-web-bitcoin-example.vercel.app/", + id: "sfa-web-bitcoin-example", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/sfa-web-bitcoin-example", guideLink: "/connect-blockchain/other/bitcoin/", @@ -1453,6 +1614,7 @@ export const coreKitSfaWebExamples = [ "express", ], link: "https://sfa-web-custom-jwt-example.vercel.app/", + id: "sfa-web-custom-jwt-example", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/sfa-web-custom-jwt-example", guideLink: "/auth-provider-setup/byo-jwt-provider", @@ -1473,6 +1635,7 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: "https://sfa-web-google-example.vercel.app/", + id: "sfa-web-google-example", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/sfa-web-google-example", guideLink: "/guides/sfa-web-google", @@ -1493,6 +1656,7 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: "https://sfa-web-farcaster.vercel.app/", + id: "sfa-web-farcaster", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/sfa-web-farcaster", guideLink: "/guides/farcaster-sfa-web", @@ -1514,12 +1678,13 @@ export const coreKitSfaWebExamples = [ "id token login", ], link: "https://sfa-web-passwordless-example.vercel.app/", + id: "sfa-web-passwordless-example", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/sfa-web-passwordless-example", guideLink: "/auth-provider-setup/authentication-service-providers/firebase-service-provider", }, ]; -export const coreKitSfaiOSExamples = [ +export const coreKitSfaiOSExamples: ExamplesInterface[] = [ { title: "Web3Auth Core Kit SFA iOS SDK Quick Start", description: "A quick integration of Core Kit Single Factor Auth iOS SDK", @@ -1527,12 +1692,12 @@ export const coreKitSfaiOSExamples = [ type: QUICK_START, tags: [tags.coreKit, "sfa", tags.ios, tags.evm, "swift"], link: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-ios/sfa-ios-quick-start", - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-ios/sfa-ios-quick-start", + id: "sfa-ios-quick-start", + githubLink: quickStartSourceCode.SFA_IOS, qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_IOS&framework=IOS&stepIndex=0", }, ]; -export const coreKitSfaAndroidExamples = [ +export const coreKitSfaAndroidExamples: ExamplesInterface[] = [ { title: "Web3Auth Core Kit SFA Android SDK Quick Start", description: "A quick integration of Web3Auth Core Kit Single Factor Auth Android SDK", @@ -1540,13 +1705,60 @@ export const coreKitSfaAndroidExamples = [ type: QUICK_START, tags: [tags.coreKit, "sfa", tags.android, tags.evm, "kotlin"], link: quickStartHostedLinks.SFA_ANDROID_ANDROID, - githubLink: - "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-quick-start", + id: "sfa-ios-quick-start", + githubLink: quickStartSourceCode.SFA_ANDROID, qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_ANDROID&framework=ANDROID&stepIndex=0", }, ]; -export const coreKitSfaReactNativeExamples = [ +export const coreKitSfaNodeExamples: ExamplesInterface[] = [ + { + id: "sfa-node-quick-start", + title: "Web3Auth Core Kit SFA Node SDK Quick Start", + description: "A quick integration of Web3Auth Core Kit Single Factor Auth Node SDK", + image: "banners/nodejs.png", + type: QUICK_START, + tags: [tags.coreKit, "sfa", tags.node, tags.evm], + link: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/sfa-node-quick-start", + githubLink: quickStartSourceCode.SFA_NODE, + qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_NODE&framework=NODE&stepIndex=0", + }, + { + id: "sfa-telegram-oauth-server", + title: "Using Telegram Login with Web3Auth Core Kit SFA Node SDK", + description: "Use Telegram Login in your backend with Core Kit Single Factor Auth Node SDK", + image: "banners/telegram.png", + type: SAMPLE_APP, + tags: [tags.coreKit, "sfa", tags.node, tags.evm, "telegram"], + link: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/sfa-telegram-oauth-server", + githubLink: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/sfa-telegram-oauth-server", + }, { + id: "microsoft-oauth-connection", + title: "Using Microsoft Login with Web3Auth Core Kit SFA Node SDK", + description: "Use Microsoft Login in your backend with Core Kit Single Factor Auth Node SDK", + image: "banners/microsoft.png", + type: SAMPLE_APP, + tags: [tags.coreKit, "sfa", tags.node, tags.evm, "microsoft"], + link: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/microsoft-oauth-connection", + githubLink: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/microsoft-oauth-connection", + }, + { + id: "github-oauth-connection", + title: "Using GitHub Login with Web3Auth Core Kit SFA Node SDK", + description: "Use GitHub Login in your backend with Core Kit Single Factor Auth Node SDK", + image: "banners/github.png", + type: SAMPLE_APP, + tags: [tags.coreKit, "sfa", tags.node, tags.evm, "github"], + link: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/github-oauth-connection", + githubLink: + "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-node/github-oauth-connection", + }, +]; +export const coreKitSfaReactNativeExamples: ExamplesInterface[] = [ + { + id: "sfa-rn-bare-quick-start", title: "Web3Auth Core Kit SFA React Native SDK Quick Start", description: "A quick integration of Web3Auth Core Kit Single Factor Auth React Native SDK in Android and iOS", @@ -1554,11 +1766,11 @@ export const coreKitSfaReactNativeExamples = [ type: QUICK_START, tags: [tags.coreKit, "sfa", "javascript", tags.android, tags.ios, tags.evm, tags.reactNative], link: quickStartHostedLinks.SFA_REACT_NATIVE_IOS, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-react-native/sfa-rn-bare-quick-start", + githubLink: quickStartSourceCode.SFA_REACT_NATIVE, qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_REACT_NATIVE&framework=IOS&stepIndex=0", }, { + id: "sfa-rn-expo-auth0-example", title: "Using Web3Auth Core Kit SFA React Native SDK in Expo", description: "Using Web3Auth Core Kit Single Factor Auth React Native SDK in an Expo App", image: "banners/expo.png", @@ -1569,8 +1781,9 @@ export const coreKitSfaReactNativeExamples = [ "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-react-native/sfa-rn-expo-auth0-example", }, ]; -export const coreKitSfaFlutterExamples = [ +export const coreKitSfaFlutterExamples: ExamplesInterface[] = [ { + id: "sfa_flutter_quick_start", title: "Web3Auth Core Kit SFA Flutter SDK Quick Start", description: "A quick integration of Web3Auth Core Kit Single Factor Auth Flutter SDK for Android and iOS", @@ -1578,11 +1791,11 @@ export const coreKitSfaFlutterExamples = [ type: QUICK_START, tags: [tags.coreKit, "sfa", tags.flutter, tags.ios, tags.android, tags.evm, "dart"], link: quickStartHostedLinks.SFA_FLUTTER_ANDROID, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-flutter/sfa_flutter_quick_start", + githubLink: quickStartSourceCode.SFA_FLUTTER, qsLink: "/quick-start?product=CORE_KIT&sdk=SFA_FLUTTER&framework=ANDROID&stepIndex=0", }, { + id: "sfa_flutter_solana", title: "Integrate Web3Auth Core Kit SFA Flutter SDK with Solana Blockchain", description: "Use Solana Blockchain with Core Kit Single Factor Auth Flutter SDK for Android and iOS", @@ -1604,8 +1817,7 @@ export const coreKitSfaFlutterExamples = [ guideLink: "/connect-blockchain/solana/flutter", }, ]; - -export const coreKitMPCWebExamples = [ +export const coreKitMPCWebExamples: ExamplesInterface[] = [ { title: "MPC Core Kit React Quick Start", description: "A quick integration of Multi Party Computation Core Kit SDK in React", @@ -1622,8 +1834,8 @@ export const coreKitMPCWebExamples = [ "id token login", ], link: quickStartHostedLinks.MPC_CORE_KIT_REACT, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-react-quick-start", + githubLink: quickStartSourceCode.MPC_CORE_KIT_REACT, + id: "mpc-core-kit-react-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=MPC_CORE_KIT&framework=REACT&stepIndex=0&stepIndex=0", }, @@ -1643,8 +1855,8 @@ export const coreKitMPCWebExamples = [ "id token login", ], link: quickStartHostedLinks.MPC_CORE_KIT_ANGULAR, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-angular-quick-start", + githubLink: quickStartSourceCode.MPC_CORE_KIT_ANGULAR, + id: "mpc-core-kit-angular-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=MPC_CORE_KIT&framework=ANGULAR&stepIndex=0&stepIndex=0", }, @@ -1664,8 +1876,8 @@ export const coreKitMPCWebExamples = [ "id token login", ], link: quickStartHostedLinks.MPC_CORE_KIT_VUE, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start", + githubLink: quickStartSourceCode.MPC_CORE_KIT_VUE, + id: "mpc-core-kit-vue-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=MPC_CORE_KIT&framework=VUE&stepIndex=0&stepIndex=0", }, { @@ -1684,8 +1896,8 @@ export const coreKitMPCWebExamples = [ "id token login", ], link: quickStartHostedLinks.MPC_CORE_KIT_NEXTJS, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-nextjs-quick-start", + githubLink: quickStartSourceCode.MPC_CORE_KIT_NEXTJS, + id: "mpc-core-kit-nextjs-quick-start", qsLink: "/quick-start?product=CORE_KIT&sdk=MPC_CORE_KIT&framework=NEXTJS&stepIndex=0&stepIndex=0", }, @@ -1710,6 +1922,7 @@ export const coreKitMPCWebExamples = [ "id token login", ], link: "https://mpc-core-kit-aggregate-verifier-example.vercel.app/", + id: "mpc-core-kit-aggregate-verifier-example", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/blob/main/mpc-core-kit-web/mpc-core-kit-aggregate-verifier-example/", guideLink: "/auth-provider-setup/aggregate-verifier", @@ -1730,6 +1943,7 @@ export const coreKitMPCWebExamples = [ "id token login", ], link: "https://mpc-core-kit-farcaster.vercel.app/", + id: "mpc-core-kit-farcaster", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/mpc-core-kit-farcaster", guideLink: "/guides/farcaster-mpc-core-kit-web", @@ -1741,13 +1955,15 @@ export const coreKitMPCWebExamples = [ type: SAMPLE_APP, tags: [tags.coreKit, tags.web, tags.mpc, tags.evm, "javascript", tags.solana, "ed25519"], link: "https://mpc-core-kit-solana.vercel.app/", + id: "mpc-core-kit-solana", githubLink: "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/mpc-core-kit-solana", guideLink: "https://web3auth.io/docs/sdk/core-kit/mpc-core-kit/signing#solana", }, ]; -export const coreKitMPCReactNativeExamples = [ +export const coreKitMPCReactNativeExamples: ExamplesInterface[] = [ { + id: "mpc-core-kit-rn-quick-start", title: "Web3Auth MPC Core Kit SDK Quick Start in React Native", description: "A quick integration of Web3Auth Multi Party Computation Core Kit in React Native for Android and iOS", @@ -1755,11 +1971,10 @@ export const coreKitMPCReactNativeExamples = [ type: QUICK_START, tags: [tags.coreKit, "mpc", "javascript", tags.android, tags.evm, tags.ios, tags.reactNative], link: quickStartHostedLinks.MPC_CORE_KIT_REACT_NATIVE, - githubLink: - "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-react-native/mpc-core-kit-rn-quick-start", - qsLink: "/quick-start?product=CORE_KIT&sdk=MPC_CORE_KIT&framework=REACT_NATIVE&stepIndex=0", + githubLink: quickStartSourceCode.MPC_CORE_KIT_REACT_NATIVE, }, { + id: "mpc-core-kit-rn-auth0", title: "Using Auth0 with MPC Core Kit SDK Quick Start in React Native", description: "Integrate Auth0 with Web3Auth Multi Party Computation Core Kit in React Native for Android and iOS", @@ -1782,7 +1997,7 @@ export const coreKitMPCReactNativeExamples = [ }, ]; -export const exampleMap = [ +export const exampleMap: ExamplesInterface[] = [ ...pnpModalExamples, ...pnpNoModalExamples, ...pnpiOSExamples, @@ -1798,4 +2013,29 @@ export const exampleMap = [ ...coreKitSfaFlutterExamples, ...coreKitMPCWebExamples, ...coreKitMPCReactNativeExamples, + ...coreKitSfaNodeExamples, ]; + +function arrayToObjectById(array) { + return array.reduce((acc, obj) => { + acc[obj.id] = obj; + return acc; + }, {}); +} + +export const pnpModalExamplesMap = arrayToObjectById(pnpModalExamples); +export const pnpNoModalExamplesMap = arrayToObjectById(pnpNoModalExamples); +export const pnpiOSExamplesMap = arrayToObjectById(pnpiOSExamples); +export const pnpAndroidExamplesMap = arrayToObjectById(pnpAndroidExamples); +export const pnpReactNativeExamplesMap = arrayToObjectById(pnpReactNativeExamples); +export const pnpFlutterExamplesMap = arrayToObjectById(pnpFlutterExamples); +export const pnpUnityExamplesMap = arrayToObjectById(pnpUnityExamples); +export const pnpUnrealExamplesMap = arrayToObjectById(pnpUnrealExamples); +export const coreKitSfaWebExamplesMap = arrayToObjectById(coreKitSfaWebExamples); +export const coreKitSfaiOSExamplesMap = arrayToObjectById(coreKitSfaiOSExamples); +export const coreKitSfaAndroidExamplesMap = arrayToObjectById(coreKitSfaAndroidExamples); +export const coreKitSfaNodeExamplesMap = arrayToObjectById(coreKitSfaNodeExamples); +export const coreKitSfaReactNativeExamplesMap = arrayToObjectById(coreKitSfaReactNativeExamples); +export const coreKitSfaFlutterExamplesMap = arrayToObjectById(coreKitSfaFlutterExamples); +export const coreKitMPCWebExamplesMap = arrayToObjectById(coreKitMPCWebExamples); +export const coreKitMPCReactNativeExamplesMap = arrayToObjectById(coreKitMPCReactNativeExamples); diff --git a/src/common/sdk/core-kit/sfa/_instantiating_provider.mdx b/src/common/sdk/core-kit/sfa/_instantiating_provider.mdx index 5d93f657a..91aaab662 100644 --- a/src/common/sdk/core-kit/sfa/_instantiating_provider.mdx +++ b/src/common/sdk/core-kit/sfa/_instantiating_provider.mdx @@ -1,17 +1,25 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -For getting the appropriate key for your selected chain, you need to instantiate a provider. This -provider is used to make calls to the selected blockchain. Currently, Web3Auth exposes the following -provider packages to be integrated within the SDKs: - -- [EthereumPrivateKeyProvider](/sdk/pnp/web/providers/evm): For Ethereum and EVM compatible chains - (secp256k1 private key) -- [SolanaPrivateKeyProvider](/sdk/pnp/web/providers/solana): For the Solana Blockchain (ed25519 - private key) -- [XRPLPrivateKeyProvider](/sdk/pnp/web/providers/xrpl): For XRP Ledger -- [CommonPrivateKeyProvider](/sdk/pnp/web/providers/common): For other blockchains (secp256k1 - private key) +#### `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](./providers). + +::: + +You can choose between the following providers based on your usecase. + +- [EIP1193 Private Key Provider for EVM Compatible Chains](./providers/evm) +- [Solana Private Key Provider for Solana Blockchain](./providers/solana) +- [XRPL Private Key Provider for XRPL Blockchain](./providers/xrpl) +- [Common Private Key Provider for Connecting to any Blockchain](./providers/common) (loginParams?: T): Promise; +``` diff --git a/src/common/sdk/pnp/web/_external-wallet-adapters.mdx b/src/common/sdk/pnp/web/_external-wallet-adapters.mdx index 52f8c1223..6417dd97b 100644 --- a/src/common/sdk/pnp/web/_external-wallet-adapters.mdx +++ b/src/common/sdk/pnp/web/_external-wallet-adapters.mdx @@ -1,5 +1,8 @@ #### `configureAdapter(ADAPTER)` +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + To configure an adapter, create the instance of the adapter by using its corresponding package and pass the returned `adapter` instance in the `configureAdapter` function. @@ -10,25 +13,65 @@ are available and how to configure them. ::: -#### Example + + + + +If you want to support All EVM External Wallets, your should use the Default External Adapter for +EVM. This adapter supports MIPD (EIP6163) so all available wallets in the browser will automatically +be detected as well. + +- Import the `getDefaultExternalAdapters` from `@web3auth/default-evm-adapter` package +- Get all the adapters in the `adapters` variable as an array of `IAdapter`. +- Iterate over the `adapters` array and configure each adapter using `configureAdapter` function. + +```javascript +import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter"; + +const adapters = await getDefaultExternalAdapters({ + options: { + clientId, + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, + }, +}); + +adapters.forEach((adapter) => { + web3auth.configureAdapter(adapter); +}); +``` + + + -If you want to configure the Default External Adapter for Solana +If you want to support All Solana External Wallets, your should use the Default External Adapter for +Solana. - Import the `getDefaultExternalAdapters` from `@web3auth/default-solana-adapter` package - Get all the adapters in the `adapters` variable as an array of `IAdapter`. - Iterate over the `adapters` array and configure each adapter using `configureAdapter` function. ```javascript -import { getDefaultExternalAdapters } from "@web3auth/default-solana-adapter"; // All default Solana Adapters +import { getDefaultExternalAdapters } from "@web3auth/default-solana-adapter"; -// Setup external adapters const adapters = await getDefaultExternalAdapters({ options: { clientId, - chainConfig, + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, }, }); + adapters.forEach((adapter) => { web3auth.configureAdapter(adapter); }); ``` + + + diff --git a/src/common/sdk/pnp/web/_openlogin-adapter-intro.mdx b/src/common/sdk/pnp/web/_openlogin-adapter-intro.mdx index d448b8d84..89ab220e6 100644 --- a/src/common/sdk/pnp/web/_openlogin-adapter-intro.mdx +++ b/src/common/sdk/pnp/web/_openlogin-adapter-intro.mdx @@ -1,14 +1,15 @@ import OpenloginWhiteLabelExample from "./_openlogin-whitelabel-example.mdx"; -The default adapter of Web3Auth is the [`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin). This adapter is a wrapper around the -[`openlogin`](/sdk/pnp/web/adapters/openlogin) library from Web3Auth and enables the social login features. For customising features of the main -Web3Auth flow, like [Whitelabel](/features/whitelabel), [Custom Authentication](/features/custom-authentication), etc. you need to customise the -Openlogin Adapter. +The default adapter of Web3Auth is the [`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin). This +adapter is a wrapper around the [`openlogin`](/sdk/pnp/web/adapters/openlogin) library from Web3Auth +and enables the social login features. For customising features of the main Web3Auth flow, like +[Whitelabel](/features/whitelabel), [Custom Authentication](/features/custom-authentication), etc. +you need to customise the Openlogin Adapter. :::tip -Checkout the [`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin) SDK Reference for more details on different configurations you can pass for -customisations. +Checkout the [`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin) SDK Reference for more details +on different configurations you can pass for customisations. ::: @@ -16,33 +17,112 @@ customisations. ##### `whiteLabel` -For customising the redirect screens while logging in and constructing the key, you need to pass on `whiteLabel` configurations to the -`adapterSettings` property of the [`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin). +For customising the redirect screens while logging in and constructing the key, you need to pass on +`whiteLabel` configurations to the `adapterSettings` property of the +[`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin). :::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, have a look at our [Whitelabeling SDK Reference](/features/whitelabel). +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, have a look at our +[Whitelabeling SDK Reference](/features/whitelabel). ::: -##### Example - +#### Multi Factor Authentication + +##### `mfaLevel` + +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 + +```tsx +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; + +const openloginAdapter = new OpenloginAdapter({ + loginSettings: { + //highlight-start + mfaLevel: "mandatory", // default, optional, mandatory, none + //highlight-end + }, +}); +``` + +:::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. + +::: + +##### `mfaSettings` + +For customising the MFA settings, you need to pass on `mfaSettings` configurations to the +`adapterSettings` property of the `OpenloginAdapter`. + +:::tip + +Read more about `mfaSettings` in the [Multi Factor Authentication Section](./mfa) SDK Reference. + +::: + +```tsx +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; + +const openloginAdapter = new OpenloginAdapter({ + adapterSettings: { + //highlight-start + // 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, + }, + }, + //highlight-end + }, +}); +``` + #### Custom Authentication ##### `loginConfig` -With Web3Auth, you have the option to configure logins using your own authentication services. For adding your own authentication, you have to first -configure your verifiers in the Web3Auth Dashboard. Have a look at our [Custom Authentication Documentation](/features/custom-authentication/) for -configuring that first. +With Web3Auth, you have the option to configure logins using your own authentication services. For +adding your own authentication, you have to first configure your verifiers in the Web3Auth +Dashboard. -Custom Authentication in Web3Auth is supported by the Openlogin Adapter, which is the default adapter for the Web3Auth SDK. For this, you need to -configure the `loginConfig` parameter in the `adapterSettings` of the `openlogin-adapter` package. +Custom Authentication in Web3Auth is supported by the Openlogin Adapter, which is the default +adapter for the Web3Auth SDK. For this, you need to configure the `loginConfig` parameter in the +`adapterSettings` of the `openlogin-adapter` package. :::tip -Refer to the [Custom Authentication Documentation](/features/custom-authentication) for more information. +Refer to the [Custom Authentication Documentation](./custom-authentication) for more information. ::: diff --git a/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx b/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx index dd7962fe7..78be2012a 100644 --- a/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx +++ b/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx @@ -1,7 +1,5 @@ Shows the TopUp modal to select local currency and amount to top up the wallet. -#### Example - ```javascript import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; diff --git a/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx b/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx index 3b6b798d7..9b0834f13 100644 --- a/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx +++ b/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx @@ -1,7 +1,5 @@ -Shows the Wallet Connect Scanner to connect with dApps having Wallet Connect login option. This is useful for interoperability with dApps having -Wallet Connect login option. - -#### Example +Shows the Wallet Connect Scanner to connect with dApps having Wallet Connect login option. This is +useful for interoperability with dApps having Wallet Connect login option. ```javascript import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; diff --git a/src/common/sdk/pnp/web/_plugins-intro.mdx b/src/common/sdk/pnp/web/_plugins-intro.mdx index b16bb1d30..7b28ba1b3 100644 --- a/src/common/sdk/pnp/web/_plugins-intro.mdx +++ b/src/common/sdk/pnp/web/_plugins-intro.mdx @@ -3,8 +3,17 @@ additional features to your dApp. These features can be used to extend the UI fu making your integration more interoperable, and a lot more, even having the functionality to be customised extremely and to your liking. -:::info +:::tip -This step is totally optional. If you don't want to use any plugins, feel free to skip this section. +Refer to the [Wallet Services Plugin Documentation](/sdk/pnp/web/wallet-services/) to know more +deeply about how you utilise our plugins to extend the functionality of your dApp. ::: + +```javascript +import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; + +const walletServicesPlugin = new WalletServicesPlugin(); + +web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth +``` diff --git a/src/common/sdk/pnp/web/_provider-method.mdx b/src/common/sdk/pnp/web/_provider-method.mdx new file mode 100644 index 000000000..0d855afe1 --- /dev/null +++ b/src/common/sdk/pnp/web/_provider-method.mdx @@ -0,0 +1,22 @@ +#### `provider` + +Returns the private key provider connected to the `web3auth` instance. + +#### Returns + +```js +provider: IProvider | null; +``` + +- If a user is connected, it will return the provider instance connected to the user. +- If no user is connected, however, the initialisation of the `web3auth` instance is done, it will + return the provider instance, however the provider cannot be used for any operations. +- If no user is connected and the `web3auth` instance is not initialised, it will return a `null` + value. + +:::note + +To know more in-depth about providers, have a look at the +[Providers reference](/sdk/pnp/web/providers). + +::: diff --git a/src/common/sdk/pnp/web/_status-method.mdx b/src/common/sdk/pnp/web/_status-method.mdx new file mode 100644 index 000000000..be9abf310 --- /dev/null +++ b/src/common/sdk/pnp/web/_status-method.mdx @@ -0,0 +1,55 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +#### `status` + +Returns the current status of the `web3auth` instance. + +```javascript +const status = web3auth.status; +``` + +An adapter emits certain events like `CONNECTED`, `CONNECTING` and `DISCONNECTED` etc during login +lifecycle of a user. Knowing to events help you trigger responses based on the status of the +connection of the user. For example, you can use this to show an error message, if the user is not +connected to the network. + +Web3Auth provides the following lifecycle event to check the login status: + + + + + +| Event | Description | +| -------------- | ---------------------------------------------------------- | +| `NOT_READY` | Triggered when the adapter is not ready. | +| `READY` | Triggered when the adapter is ready. | +| `CONNECTING` | Triggered when the user is connecting to the wallet. | +| `CONNECTED` | Triggered when the user is connected to the wallet. | +| `DISCONNECTED` | Triggered when the user is disconnected from the wallet. | +| `ERRORED` | Triggered when an error occurs during the login lifecycle. | + + + + + +```tsx +export declare const ADAPTER_STATUS: { + readonly NOT_READY: "not_ready"; + readonly READY: "ready"; + readonly CONNECTING: "connecting"; + readonly CONNECTED: "connected"; + readonly DISCONNECTED: "disconnected"; + readonly ERRORED: "errored"; +}; +``` + + + + diff --git a/src/common/sdk/pnp/web/_subscribe-events.mdx b/src/common/sdk/pnp/web/_subscribe-events.mdx deleted file mode 100644 index c33b23142..000000000 --- a/src/common/sdk/pnp/web/_subscribe-events.mdx +++ /dev/null @@ -1,101 +0,0 @@ -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; - -Subscribing to events help you trigger responses based on the status of the connection of the user. -An adapter emits certain events like `CONNECTED`, `CONNECTING` and `DISCONNECTED` etc during login -lifecycle of a user. For example, you can use this to show an error message, if the user is not -connected to the network. Generally, this is not a required step and should be done only if needed -in particular cases. - -:::info - -This step is totally optional. If you don't want to use any plugins, feel free to skip this section. - -::: - -:::tip - -If you're using the `uxMode: "redirect"` option within your -[`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin) configuration, you need to subscribe to the -event to handle the logging in implicitly. This is because, when redirected to a different -application, the app state is not updated as per the login status. Using a lifecycle method to check -this, one can easily handle the login status within the constructor function. - -::: - -#### `on(EVENT, CALLBACK)` - -Web3Auth provides the following lifecycle event to check the login status: - -#### Adapter Events - - - - - -| Event | Trigger with `@web3auth/base` package | Trigger without package | Description | -| ---------------------- | ------------------------------------- | ----------------------- | ---------------------------------------------------------- | -| `CONNECTED` | `CONNECTED_EVENT_DATA` | `CONNECTED_EVENT_DATA` | Triggered when the user is connected to the wallet. | -| `CONNECTING` | `void` | `void` | Triggered when the user is connecting to the wallet. | -| `DISCONNECTED` | `void` | `void` | Triggered when the user is disconnected from the wallet. | -| `ERRORED` | `Error` | `Error` | Triggered when an error occurs during the login lifecycle. | -| `NOT_READY` | `void` | `void` | Triggered when the adapter is not ready. | -| `READY` | `void` | `void` | Triggered when the adapter is ready. | -| `CACHE_CLEAR` | `void` | `void` | Triggered when the cache is cleared. | -| `ADAPTER_DATA_UPDATED` | `void` | `void` | Triggered when the adapter data is updated. | - - - - - -```tsx -export declare const ADAPTER_EVENTS: { - readonly ADAPTER_DATA_UPDATED: "adapter_data_updated"; - readonly CACHE_CLEAR: "cache_clear"; - readonly NOT_READY: "not_ready"; - readonly READY: "ready"; - readonly CONNECTING: "connecting"; - readonly CONNECTED: "connected"; - readonly DISCONNECTED: "disconnected"; - readonly ERRORED: "errored"; -}; -``` - - - - - -##### Example - -```tsx -import { ADAPTER_EVENTS } from "@web3auth/base"; - -// subscribe to lifecycle events emitted by web3auth -const subscribeAuthEvents = (web3auth: Web3Auth) => { - web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => { - console.log("connected to wallet", data); - // web3auth.provider will be available here after the user is connected - }); - web3auth.on(ADAPTER_EVENTS.CONNECTING, () => { - console.log("connecting"); - }); - web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => { - console.log("disconnected"); - }); - web3auth.on(ADAPTER_EVENTS.READY, () => { - console.log("ready"); - }); - web3auth.on(ADAPTER_EVENTS.NOT_READY, () => { - console.log("not ready"); - }); - web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => { - console.log("error", error); - }); -}; -``` diff --git a/src/common/sdk/pnp/web/_switch-chain.mdx b/src/common/sdk/pnp/web/_switch-chain.mdx index 7cad989e2..592d1df4c 100644 --- a/src/common/sdk/pnp/web/_switch-chain.mdx +++ b/src/common/sdk/pnp/web/_switch-chain.mdx @@ -1,9 +1,10 @@ import TabItem from "@theme/TabItem"; import Tabs from "@theme/Tabs"; -### `switchChain()` +#### `switchChain()` -To switch the Chain to the added chain config, you need to call `switchChain()` function. This function takes the following parameter: +To switch the Chain to the added chain config, you need to call `switchChain()` function. This +function takes the following parameter: -| Parameter | Description | -| ---------------------- | ----------------------------------------------------- | -| `loginMethodsOrder` | order of how login methods are shown | -| `modalZIndex` | Z-index of the modal and iframe | -| `displayErrorsOnModal` | Whether to show errors on Web3Auth modal. | -| `loginGridCol` | number of columns to display the Social Login buttons | -| `primaryButton` | Decides which button will be the focus of the modal | -| `uxMode` | UX Mode for the openlogin adapter | +| Parameter | Description | +| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `loginMethodsOrder` | order of how login methods are shown | +| `modalZIndex` | Z-index of the modal and iframe | +| `displayErrorsOnModal` | Whether to show errors on Web3Auth modal. | +| `loginGridCol` | number of columns to display the Social Login buttons | +| `primaryButton` | Decides which button will be the focus of the modal | +| `uxMode` | UX Mode for the openlogin adapter | +| `appName?` | App name to be displayed in the User Flow Screens. It accepts `string` as a value. | +| `appUrl?` | App URL to be displayed in the User Flow Screens. It accepts `string` as a value. | +| `logoLight?` | App logo to be shown on the light background (light theme). It accepts `string` as a value. | +| `logoDark?` | App logo to be shown on the dark background (dark theme). It accepts `string` as a value. | +| `defaultLanguage?` | Default Language to use.
Choose from:
  • `en` - English
  • `de` - German
  • `ja` - Japanese
  • `ko` - Korean
  • `zh` - Mandarin
  • `es` - Spanish
  • `fr` - French
  • `pt` - Portuguese
  • `nl` - Dutch
  • `tr` - Turkish
. Default language is `en` | +| `mode?` | Choose between `auto`, `light` or `dark` background modes. Default is `auto`. | +| `theme?` | Used to customize the theme of the login modal with the following options
`'primary'` - To customize the primary color of the modal's content. It accepts `Record` as a value. | +| `tncLink?` | Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure e.g. tncLink: `{en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja"}` | +| `privacyPolicy?` | Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure e.g. `privacyPolicy: { en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja", }` | @@ -62,6 +71,84 @@ export interface UIConfig extends WhiteLabelData { */ uxMode?: UX_MODE_TYPE; } +export type WhiteLabelData = { + /** + * App name to display in the UI + */ + appName?: string; + /** + * App url + */ + appUrl?: string; + /** + * App logo to use in light mode + */ + logoLight?: string; + /** + * App logo to use in dark mode + */ + logoDark?: string; + /** + * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en" + * en: english + * de: german + * ja: japanese + * ko: korean + * zh: mandarin + * es: spanish + * fr: french + * pt: portuguese + * nl: dutch + * + * @defaultValue en + */ + defaultLanguage?: LANGUAGE_TYPE; + /** + theme + * + * @defaultValue auto + */ + mode?: THEME_MODE_TYPE; + /** + * Use logo loader + * + * @defaultValue false + */ + useLogoLoader?: boolean; + /** + * Used to customize theme of the login modal with following options + * `'primary'` - To customize primary color of modal's content. + */ + theme?: { + primary?: string; + gray?: string; + red?: string; + green?: string; + success?: string; + warning?: string; + error?: string; + info?: string; + white?: string; + }; + /** + * Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure + * e.g. + * tncLink: { + * en: "http://example.com/tnc/en", + * ja: "http://example.com/tnc/ja", + * } + */ + tncLink?: Partial>; + /** + * Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure + * e.g. + * privacyPolicy: { + * en: "http://example.com/tnc/en", + * ja: "http://example.com/tnc/ja", + * } + */ + privacyPolicy?: Partial>; +}; ``` diff --git a/src/components/Examples/coreKitExamples.tsx b/src/components/Examples/coreKitExamples.tsx deleted file mode 100644 index f4d275b5a..000000000 --- a/src/components/Examples/coreKitExamples.tsx +++ /dev/null @@ -1,236 +0,0 @@ -export const baseURL = "https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/"; -export const baseURLtKey = "https://github.com/tkey/tkey-examples/tree/main/"; - -export const CKTkey = [ - { - name: "", - description: "", - tiles: [ - { - key: "tkey-react-redirect-example", - title: "tKey in Redirect Flow", - icon: "logo-react.png", - path: `${baseURLtKey}tkey-web/tkey-redirect-flow-example`, - }, - { - key: "tkey-react-popup-example", - title: "tKey in Popup Flow", - icon: "logo-react.png", - path: `${baseURLtKey}tkey-web/tkey-popup-flow-example`, - }, - ], - }, -]; - -export const MPCCK = [ - { - name: "", - description: "", - tiles: [ - { - key: "mpc-core-kit-react-popup-example", - title: "MPC Core Kit Popup Flow", - icon: "logo-react.png", - path: `${baseURL}mpc-core-kit-web/intrinsic-flow-examples/mpc-core-kit-popup-flow-example`, - }, - { - key: "mpc-core-kit-react-redirect-example", - title: "MPC Core Kit Redirect Flow", - icon: "logo-react.png", - path: `${baseURL}mpc-core-kit-web/intrinsic-flow-examples/mpc-core-kit-redirect-flow-example`, - }, - { - key: "mpc-core-kit-aggregate-verifier-example", - title: "MPC Core Kit Aggregate Example", - icon: "logo-react.png", - path: `${baseURL}mpc-core-kit-web/mpc-core-kit-aggregate-verifier-example`, - }, - { - key: "mpc-core-kit-rn-auth0", - title: "MPC Core Kit React Native Auth0 Example", - icon: "logo-react.png", - path: `${baseURL}mpc-core-kit-react-native/mpc-core-kit-rn-auth0`, - }, - { - key: "mpc-core-kit-rn-quick-start", - title: "MPC Core Kit React Native Firebase Quick Start", - icon: "logo-react.png", - path: `${baseURL}mpc-core-kit-react-native/mpc-core-kit-rn-quick-start`, - }, - ], - }, -]; - -export const CKSFA = [ - { - name: "", - description: "", - tiles: [ - { - key: "sfa-web-google-example", - title: "SFA Web Google Example", - icon: "logo-react.png", - path: `${baseURL}single-factor-auth-web/sfa-web-google-example`, - }, - { - key: "sfa-web-auth0-example", - title: "SFA Web Auth0 Example", - icon: "logo-react.png", - path: `${baseURL}single-factor-auth-web/sfa-web-auth0-example`, - }, - { - key: "sfa-web-custom-jwt-example", - title: "SFA Web Custom JWT Example", - icon: "logo-react.png", - path: `${baseURL}single-factor-auth-web/sfa-web-custom-jwt-example`, - }, - { - key: "sfa-web-passwordless-example", - title: "SFA Web Passwordless Example", - icon: "logo-react.png", - path: `${baseURL}single-factor-auth-web/sfa-web-passwordless-example`, - }, - { - key: "sfa-web-aggregate-verifier-example", - title: "SFA Web Aggregate Example", - icon: "logo-react.png", - path: `${baseURL}single-factor-auth-web/sfa-web-aggregate-verifier-example`, - }, - ], - }, -]; - -export const CKSFAAndroid = [ - { - name: "", - description: "", - tiles: [ - { - key: "android-sfa-example", - title: "SFA Android Example", - icon: "logo-android.png", - path: `${baseURL}single-factor-auth-android/sfa-android-quick-start`, - }, - ], - }, -]; - -export const CKSFAiOS = [ - { - name: "", - description: "", - tiles: [ - { - key: "ios-sfa-example", - title: "SFA iOS Example", - icon: "logo-apple.png", - path: `${baseURL}single-factor-auth-ios/sfa-ios-quick-start`, - }, - ], - }, -]; - -export const CKSFARN = [ - { - name: "", - description: "", - tiles: [ - { - key: "sfa-react-native-firebase-example", - title: "SFA React Native QuickStart", - icon: "logo-firebase.png", - path: `${baseURL}single-factor-auth-react-native/sfa-rn-bare-quick-start`, - }, - { - key: "sfa-rn-expo-auth0-example", - title: "SFA React Native Expo with Auth0", - icon: "logo-auth0.png", - path: `${baseURL}single-factor-auth-react-native/sfa-rn-expo-auth0-example`, - }, - ], - }, -]; - -export const CKSFAFlutter = [ - { - name: "", - description: "", - tiles: [ - { - key: "flutter-sfa-example", - title: "SFA Flutter Example", - icon: "logo-flutter.png", - path: "https://github.com/Web3Auth/single-factor-auth-flutter/tree/master/example", - }, - ], - }, -]; - -export const CKTkeyiOS = [ - { - name: "", - description: "", - tiles: [ - { - key: "tkey-ios-example", - title: "tKey iOS Example", - icon: "logo-google.png", - path: `${baseURL}tkey-ios/tkey-ios-quick-start`, - }, - { - key: "tkey-ios-aggregate-example", - title: "tKey iOS Aggregate Example", - icon: "logo-apple.png", - path: `${baseURL}tkey-ios/tkey-ios-aggregate-verifier-example`, - }, - { - key: "tkey-ios-auth0-example", - title: "tKey iOS Auth0 Example", - icon: "logo-auth0.png", - path: `${baseURL}tkey-ios/tkey-ios-auth0-example`, - }, - { - key: "tkey-ios-firebase-example", - title: "tKey iOS Firebase Example", - icon: "logo-firebase.png", - path: `${baseURL}tkey-ios/tkey-ios-firebase-example`, - }, - ], - }, -]; - -export const CKTkeyAndroid = [ - { - name: "", - description: "", - tiles: [ - { - key: "tkey-android-example", - title: "tKey Android Example", - icon: "logo-google.png", - path: `${baseURL}tkey-android/tkey-android-auth0-example`, - }, - { - key: "tkey-android-aggregate-example", - title: "tKey Android QuickStart Example", - icon: "logo-android.png", - path: `${baseURL}tkey-android/tkey-android-quick-start`, - }, - ], - }, -]; - -export const CKNode = [ - { - name: "", - description: "", - tiles: [ - { - key: "sfa-node-example", - title: "SFA Node Example", - icon: "logo-nodejs.png", - path: `${baseURL}single-factor-auth-node/sfa-node-quick-start`, - }, - ], - }, -]; diff --git a/src/components/Examples/index.tsx b/src/components/Examples/index.tsx index 993a32bc1..2e85067c4 100644 --- a/src/components/Examples/index.tsx +++ b/src/components/Examples/index.tsx @@ -1,24 +1,41 @@ import Link from "@docusaurus/Link"; import { useEffect, useState } from "react"; -import { blockchainMap, platformMap, exampleMap, typeMap, productMap } from "../../common/maps"; +import { + blockchainMap, + platformMap, + typeMap, + productMap, + ExamplesInterface, +} from "../../common/maps"; + import styles from "./styles.module.css"; import Select, { StylesConfig } from "react-select"; +import useBaseUrl from "@docusaurus/useBaseUrl"; -export default function Examples() { - const completeExampleMap = exampleMap; +export default function Examples(props: { + exampleMap: ExamplesInterface[]; + showProductFilter: boolean; + showPlatformFilter: boolean; + showBlockchainFilter: boolean; +}) { + const { showProductFilter, showPlatformFilter, showBlockchainFilter } = props; + const sortedExamples: ExamplesInterface[] = props.exampleMap.sort( + (a, b) => + typeMap.find((obj) => obj.type === a.type).id - typeMap.find((obj) => obj.type === b.type).id, + ); + sortedExamples.forEach((example) => { + example.image = useBaseUrl(example.image); + return example; + }); const [searchInput, setSearchInput] = useState(""); const [tags, setTags] = useState([]); const [productFilter, setProductFilter] = useState([]); const [platformFilter, setPlatformFilter] = useState([]); const [blockchainFilter, setBlockchainFilter] = useState([]); - - const [sortedExampleMap, setSortedExampleMap] = useState( - completeExampleMap.sort( - (a, b) => - typeMap.find((obj) => obj.type === a.type).id - - typeMap.find((obj) => obj.type === b.type).id, - ), - ); + const [tagFilteredExampleMap, setTagFilteredExampleMap] = + useState(sortedExamples); + const [searchFilteredExampleMap, setSearchFilteredExampleMap] = + useState(tagFilteredExampleMap); const chevron = ( @@ -35,7 +52,12 @@ export default function Examples() { useEffect(() => { function filterByTags() { let examples; - examples = completeExampleMap.filter((item) => { + if (searchInput.length === 0) { + examples = sortedExamples; + } else { + examples = searchFilteredExampleMap; + } + examples = examples.filter((item) => { const prodFil = productFilter.length === 0 || productFilter.some((tag) => item.tags.includes(tag)); const platFil = @@ -45,11 +67,10 @@ export default function Examples() { return [prodFil, platFil, blockFil].every((result) => result === true); }); - - setSortedExampleMap(examples); + setTagFilteredExampleMap(examples); } filterByTags(); - }, [productFilter, platformFilter, blockchainFilter]); + }, [productFilter, platformFilter, blockchainFilter, searchFilteredExampleMap]); const onChangeProduct = (e) => { const filterValue = e.map((item) => item.value); @@ -112,17 +133,17 @@ export default function Examples() { if (input === "") { let examples; if (tags.length === 0) { - examples = exampleMap; + examples = sortedExamples; } else { - examples = completeExampleMap.filter((item) => { + examples = tagFilteredExampleMap.filter((item) => { return tags.some((tag) => item.tags.includes(tag)); }); } - setSortedExampleMap(examples); + setSearchFilteredExampleMap(examples); } else { - const finalSortedExampleMap = completeExampleMap.filter((item) => searchFilter(item)); - setSortedExampleMap(finalSortedExampleMap); + const examples = sortedExamples.filter((item) => searchFilter(item)); + setSearchFilteredExampleMap(examples); } } @@ -234,32 +255,38 @@ export default function Examples() { )) ||
}
- - + )} + {showPlatformFilter && ( + + )}
- {sortedExampleMap.map((item) => renderArticle(item))} - {sortedExampleMap.length === 0 && ( + {tagFilteredExampleMap.map((item) => renderArticle(item))} + {tagFilteredExampleMap.length === 0 && (

No Results Found

diff --git a/src/components/Examples/pnpGamingExamples.tsx b/src/components/Examples/pnpGamingExamples.tsx deleted file mode 100644 index 1e63d3e70..000000000 --- a/src/components/Examples/pnpGamingExamples.tsx +++ /dev/null @@ -1,55 +0,0 @@ -export const baseURL = "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/"; - -export const PNPUnity = [ - { - name: "", - description: "", - tiles: [ - { - key: "unity-quick-start", - title: "Unity QuickStart Example", - icon: "logo-unity.png", - path: `${baseURL}unity/unity-quick-start`, - }, - { - key: "unity-auth0-example", - title: "Unity + Auth0", - icon: "logo-auth0.png", - path: `${baseURL}unity/unity-auth0-example`, - }, - { - key: "unity-aggregate-verifier-example", - title: "Unity + Aggregate Verifier", - icon: "logo-google.png", - path: `${baseURL}unity/unity-aggregate-verifier-example`, - }, - ], - }, -]; - -export const PNPUnreal = [ - { - name: "", - description: "", - tiles: [ - { - key: "unreal-example", - title: "Unreal Basic Example", - icon: "logo-unreal.png", - path: "https://github.com/Web3Auth/web3auth-unreal-example/tree/master", - }, - { - key: "unreal-auth0-example", - title: "Unreal + Auth0", - icon: "logo-auth0.png", - path: "https://github.com/Web3Auth/web3auth-unreal-example/tree/auth0-example", - }, - { - key: "unreal-google-example", - title: "Unreal + Custom Google", - icon: "logo-google.png", - path: "https://github.com/Web3Auth/web3auth-unreal-example/tree/custom-google", - }, - ], - }, -]; diff --git a/src/components/Examples/pnpMobileExamples.tsx b/src/components/Examples/pnpMobileExamples.tsx deleted file mode 100644 index 431ce3706..000000000 --- a/src/components/Examples/pnpMobileExamples.tsx +++ /dev/null @@ -1,139 +0,0 @@ -export const baseURL = "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/"; - -export const PNPAndroid = [ - { - name: "", - description: "", - tiles: [ - { - key: "android-quick-start", - title: "Android QuickStart Example", - icon: "logo-android.png", - path: `${baseURL}android/android-quick-start`, - }, - { - key: "android-auth0-example", - title: "Android + Auth0", - icon: "logo-auth0.png", - path: `${baseURL}android/android-auth0-example`, - }, - { - key: "android-firebase-example", - title: "Android + Firebase", - icon: "logo-firebase.png", - path: `${baseURL}android/android-firebase-example`, - }, - { - key: "android-android-aggregate-verifier-example", - title: "Android + Aggregate Verifier", - icon: "logo-google.png", - path: `${baseURL}android/android-aggregate-verifier-example`, - }, - ], - }, -]; - -export const PNPIos = [ - { - name: "", - description: "", - tiles: [ - { - key: "ios-quick-start", - title: "iOS QuickStart Example", - icon: "logo-apple.png", - path: `${baseURL}ios/ios-quick-start`, - }, - { - key: "ios-auth0-example", - title: "iOS + Auth0", - icon: "logo-auth0.png", - path: `${baseURL}ios/ios-auth0-example`, - }, - { - key: "ios-firebase-example", - title: "iOS + Firebase", - icon: "logo-firebase.png", - path: `${baseURL}ios/ios-firebase-example`, - }, - { - key: "ios-aggregate-verifier-example", - title: "iOS + Aggregate Verifier", - icon: "logo-google.png", - path: `${baseURL}ios/ios-aggregate-verifier-example`, - }, - ], - }, -]; - -export const PNPRN = [ - { - name: "", - description: "", - tiles: [ - { - key: "rn-bare-quick-start", - title: "React Native Bare QuickStart Example", - icon: "logo-react.png", - path: `${baseURL}react-native/rn-bare-quick-start`, - }, - { - key: "rn-bare-auth0-example", - title: "React Native Bare + Auth0", - icon: "logo-auth0.png", - path: `${baseURL}react-native/rn-bare-auth0-example`, - }, - { - key: "rn-bare-firebase-example", - title: "React Native Bare + Firebase", - icon: "logo-firebase.png", - path: `${baseURL}react-native/rn-bare-firebase-example`, - }, - { - key: "rn-bare-aggregate-verifier-example", - title: "React Native Bare + Aggregate Verifier", - icon: "logo-google.png", - path: `${baseURL}react-native/rn-bare-aggregate-verifier-example`, - }, - { - key: "rn-expo-example", - title: "React Native Expo Basic Example", - icon: "logo-react.png", - path: `${baseURL}react-native/rn-expo-example`, - }, - ], - }, -]; - -export const PNPFlutter = [ - { - name: "", - description: "", - tiles: [ - { - key: "flutter-quick-start", - title: "Flutter QuickStart Example", - icon: "logo-flutter.png", - path: `${baseURL}flutter/flutter-quick-start`, - }, - { - key: "flutter-auth0-example", - title: "Flutter + Auth0", - icon: "logo-auth0.png", - path: `${baseURL}flutter/flutter-auth0-example`, - }, - { - key: "flutter-firebase-example", - title: "Flutter + Firebase", - icon: "logo-firebase.png", - path: `${baseURL}flutter/flutter-firebase-example`, - }, - { - key: "flutter-aggregate-verifier-example", - title: "Flutter + Aggregate Verifier", - icon: "logo-google.png", - path: `${baseURL}flutter/flutter-aggregate-verifier-example`, - }, - ], - }, -]; diff --git a/src/components/Examples/pnpModalExamples.tsx b/src/components/Examples/pnpModalExamples.tsx deleted file mode 100644 index 9cdcda107..000000000 --- a/src/components/Examples/pnpModalExamples.tsx +++ /dev/null @@ -1,28 +0,0 @@ -export const baseURL = "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/"; - -export const PNPModalWebExample = [ - { - name: "", - description: "", - tiles: [ - { - key: "react-evm-modal-example", - title: "Ethereum in React", - icon: "logo-ethereum.png", - path: `${baseURL}blockchain-connection-examples/evm-modal-example`, - }, - { - key: "react-solana-modal-example", - title: "Solana in React", - icon: "logo-solana.png", - path: `${baseURL}blockchain-connection-examples/solana-modal-example`, - }, - { - key: "react-xrpl-modal-example", - title: "XRPL in React", - icon: "logo-xrpl.png", - path: `${baseURL}blockchain-connection-examples/xrpl-modal-example`, - }, - ], - }, -]; diff --git a/src/components/Examples/pnpNoModalExamples.tsx b/src/components/Examples/pnpNoModalExamples.tsx deleted file mode 100644 index a290fa336..000000000 --- a/src/components/Examples/pnpNoModalExamples.tsx +++ /dev/null @@ -1,88 +0,0 @@ -export const baseURL = "https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/"; - -export const PNPNoModalWebExample = [ - { - name: "", - description: "", - tiles: [ - { - key: "react-evm-no-modal-example", - title: "Ethereum in React", - icon: "logo-ethereum.png", - path: `${baseURL}blockchain-connection-examples/evm-no-modal-example`, - }, - { - key: "react-solana-no-modal-example", - title: "Solana in React", - icon: "logo-solana.png", - path: `${baseURL}blockchain-connection-examples/solana-no-modal-example`, - }, - { - key: "react-xrpl-no-modal-example", - title: "XRPL in React", - icon: "logo-xrpl.png", - path: `${baseURL}blockchain-connection-examples/xrpl-no-modal-example`, - }, - { - key: "react-algorand-no-modal-example", - title: "Algorand in React", - icon: "logo-algorand.png", - path: `${baseURL}blockchain-connection-examples/algorand-no-modal-example`, - }, - { - key: "react-aptos-no-modal-example", - title: "Aptos in React", - icon: "logo-aptos.png", - path: `${baseURL}blockchain-connection-examples/aptos-no-modal-example`, - }, - { - key: "react-cosmos-no-modal-example", - title: "Cosmos in React", - icon: "logo-cosmos.png", - path: `${baseURL}blockchain-connection-examples/cosmos-no-modal-example`, - }, - { - key: "react-immutablex-no-modal-example", - title: "Immutablex in React", - icon: "logo-immutablex.png", - path: `${baseURL}blockchain-connection-examples/immutablex-no-modal-example`, - }, - { - key: "react-multichain-no-modal-example", - title: "Multi Chain in React", - icon: "logo-react.png", - path: `${baseURL}blockchain-connection-examples/multi-chain-no-modal-example`, - }, - { - key: "react-polkadot-no-modal-example", - title: "Polkadot in React", - icon: "logo-polkadot.png", - path: `${baseURL}blockchain-connection-examples/polkadot-no-modal-example`, - }, - { - key: "react-polymesh-no-modal-example", - title: "Polymesh in React", - icon: "logo-polymesh.png", - path: `${baseURL}blockchain-connection-examples/polymesh-no-modal-example`, - }, - { - key: "react-starkex-no-modal-example", - title: "StarkEX in React", - icon: "logo-starkex.png", - path: `${baseURL}blockchain-connection-examples/starkex-no-modal-example`, - }, - { - key: "react-starknet-no-modal-example", - title: "StarkNet in React", - icon: "logo-starknet.png", - path: `${baseURL}blockchain-connection-examples/starknet-no-modal-example`, - }, - { - key: "react-tezos-no-modal-example", - title: "Tezos in React", - icon: "logo-tezos.png", - path: `${baseURL}blockchain-connection-examples/tezos-no-modal-example`, - }, - ], - }, -]; diff --git a/src/pages/guides/index.tsx b/src/pages/guides/index.tsx index 1861d7174..8d1c9ca3f 100644 --- a/src/pages/guides/index.tsx +++ b/src/pages/guides/index.tsx @@ -6,7 +6,7 @@ import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import { Props, blockchainMap, platformMap, productMap } from "../../common/maps"; +import { GuidesInterface, platformMap, productMap } from "../../common/maps"; import Select, { StylesConfig } from "react-select"; // import { request } from "graphql-request"; @@ -14,7 +14,7 @@ import { useState, useEffect } from "react"; import SEO from "../../components/SEO"; import styles from "./styles.module.css"; -export default function Guides({ content }: Props) { +export default function Guides({ content }: GuidesInterface) { const completeGuides = Object.entries(content).map(([key, value]) => { if (value.type === "guide") return { ...value, link: `/guides/${key}` }; return {}; diff --git a/src/pages/quick-start/builder/index.ts b/src/pages/quick-start/builder/index.ts index 74c780f09..a996d45c8 100644 --- a/src/pages/quick-start/builder/index.ts +++ b/src/pages/quick-start/builder/index.ts @@ -1,6 +1,6 @@ /* eslint-disable camelcase */ import { IntegrationBuilder, IntegrationStep } from "../interfaces"; -import { quickStartHostedLinks } from "../../../common/maps"; +import { quickStartHostedLinks, quickStartSourceCode } from "../../../common/maps"; import { LANGS_ANDROID, LANGS_FLUTTER, @@ -25,6 +25,7 @@ import { SFA_FLUTTER, SFA_NODE, SFA_REACT_NATIVE, + REACT_NATIVE, } from "./choices"; import mpc_core_kit_angular from "./core_kit/mpc_core_kit/angular"; import mpc_core_kit_nextjs from "./core_kit/mpc_core_kit/nextjs"; @@ -223,6 +224,16 @@ const builder: IntegrationBuilder = { selectedSDK = `${finalValues.sdk}_${finalValues.framework}`; + let sourceCodeLink; + + if (LANGS_WEB.map((it) => it.key).includes(finalValues.framework)) { + sourceCodeLink = quickStartSourceCode[selectedSDK]; + } else if (finalValues.sdk === MPC_CORE_KIT && finalValues.framework === REACT_NATIVE) { + sourceCodeLink = quickStartSourceCode[selectedSDK]; + } else { + sourceCodeLink = quickStartSourceCode[finalValues.sdk]; + } + sdks[selectedSDK].build({ ...finalValues, filenames, files: newFiles, steps }); if (stepIndex >= steps.length) { @@ -241,6 +252,7 @@ const builder: IntegrationBuilder = { })), stepIndex, embedLink: quickStartHostedLinks[selectedSDK], + sourceCodeLink, }; }, }; diff --git a/src/pages/quick-start/index.tsx b/src/pages/quick-start/index.tsx index 4ca1b5206..f8a070848 100644 --- a/src/pages/quick-start/index.tsx +++ b/src/pages/quick-start/index.tsx @@ -351,6 +351,13 @@ export default function IntegrationBuilderPage({ files }: { files: Record )} +