From 640d503a4c78eacb921208bf73a8b20187d1ce51 Mon Sep 17 00:00:00 2001 From: Yash <67926590+Yash094@users.noreply.github.com> Date: Tue, 2 Jan 2024 23:24:12 +0530 Subject: [PATCH] Add Customisations for ConnectWallet Component --- .../Customizations/10 Supported Tokens.mdx | 29 +++++++++++++++ .../11 Display Token Balance.mdx | 24 +++++++++++++ .../12 Switch To Personal Wallet.mdx | 13 +++++++ .../Customizations/index.mdx | 36 ++++++++++--------- 4 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/10 Supported Tokens.mdx create mode 100644 docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/11 Display Token Balance.mdx create mode 100644 docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/12 Switch To Personal Wallet.mdx diff --git a/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/10 Supported Tokens.mdx b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/10 Supported Tokens.mdx new file mode 100644 index 000000000..158160be6 --- /dev/null +++ b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/10 Supported Tokens.mdx @@ -0,0 +1,29 @@ +--- +slug: /connect/connect-wallet/supported-tokens +title: Customize Supported Tokens +--- + +Customize the tokens shown in the "Send Funds" screen for various networks. + +By default, The "Send Funds" screen shows a few popular tokens for default chains and the native token. For other chains it only shows the native token. + + +```jsx +import { Base } from "@thirdweb-dev/chains"; + +// Show "Dai Stablecoin" when connected to the "Base" mainnet + +``` diff --git a/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/11 Display Token Balance.mdx b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/11 Display Token Balance.mdx new file mode 100644 index 000000000..ed47e83d5 --- /dev/null +++ b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/11 Display Token Balance.mdx @@ -0,0 +1,24 @@ +--- +slug: /connect/connect-wallet/display-token-balance +title: Display Token Balance +--- + +Display the balance of a token instead of the native token in ConnectWallet details button. + +```jsx +import { Base } from "@thirdweb-dev/chains"; + +// show Wrapped BTC balance when connected to Ethereum mainnet +// Show Dai Stablecoin balance when connected to the Base mainnet + + +``` diff --git a/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/12 Switch To Personal Wallet.mdx b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/12 Switch To Personal Wallet.mdx new file mode 100644 index 000000000..269720c79 --- /dev/null +++ b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/12 Switch To Personal Wallet.mdx @@ -0,0 +1,13 @@ +--- +slug: /connect/connect-wallet/hide-switch-to-personal-wallet +title: Switch To Personal Wallet +--- + +Hide the "Switch to Personal wallet" option in the wallet modal which is shown when wallet is connected to either Smart Wallet or Safe + +Default is `false` + + +```jsx + +``` diff --git a/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/index.mdx b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/index.mdx index 6e1eb879f..33cc433fc 100644 --- a/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/index.mdx +++ b/docs/onboarding/20 Connect/3 Connect Wallet Component/Customizations/index.mdx @@ -5,19 +5,23 @@ title: Customizations The following customizations are available for the Connect Wallet component: -| Prop Name | Description | -| ---------------------------------------------------------------------- | ------------------------------------------------------------------ | -| [Displayed Wallet Providers](/connect/connect-wallet/wallet-providers) | Customize the wallets that are displayed. | -| [Modal Size](/connect/connect-wallet/modal-size) | The size of the Connect Wallet modal. | -| [Theme](/connect/connect-wallet/theme) | The theme of the Connect Wallet component. The default is "light". | -| [Button Title](/connect/connect-wallet/button-title) | The title of the Connect Wallet button. | -| [Modal Title](/connect/connect-wallet/modal-title) | The title of the Connect Wallet modal. | -| [Modal Size](/connect/connect-wallet/modal-size) | The size of the Connect Wallet modal. "compact" or "wide" | -| [Welcome Screen](/connect/connect-wallet/welcome-screen) | Customize the welcome screen on wide modal. | -| [Custom CSS](/connect/connect-wallet/class-name) | Apply custom CSS styles to the Connect Wallet button. | -| [Button UI](/connect/connect-wallet/custom-button) | Customize the details button. | -| [Modal Drop-Down Position](/connect/connect-wallet/drop-down-position) | Specify where should the dropdown menu open. | -| [Authorization](/connect/connect-wallet/auth) | Enforce that users must sign in with their wallet. | -| [Switch To Active Chain](/connect/connect-wallet/switch-chain) | Automatically switch to the active chain when connecting a wallet. | -| [Terms Of Service URL](/connect/connect-wallet/terms-of-service) | The URL to the terms of service page. | -| [Privacy Policy URL](/connect/connect-wallet/privacy-policy) | The URL to the privacy policy page. | +| Prop Name | Description | +| ------------------------------------------------------------------------------------|--------------------------------------------------------------------| +| [Displayed Wallet Providers](/connect/connect-wallet/wallet-providers) | Customize the wallets that are displayed. | +| [Modal Size](/connect/connect-wallet/modal-size) | The size of the Connect Wallet modal. | +| [Theme](/connect/connect-wallet/theme) | The theme of the Connect Wallet component. The default is "light". | +| [Button Title](/connect/connect-wallet/button-title) | The title of the Connect Wallet button. | +| [Modal Title](/connect/connect-wallet/modal-title) | The title of the Connect Wallet modal. | +| [Modal Size](/connect/connect-wallet/modal-size) | The size of the Connect Wallet modal. "compact" or "wide" | +| [Welcome Screen](/connect/connect-wallet/welcome-screen) | Customize the welcome screen on wide modal. | +| [Custom CSS](/connect/connect-wallet/class-name) | Apply custom CSS styles to the Connect Wallet button. | +| [Button UI](/connect/connect-wallet/custom-button) | Customize the details button. | +| [Modal Drop-Down Position](/connect/connect-wallet/drop-down-position) | Specify where should the dropdown menu open. | +| [Authorization](/connect/connect-wallet/auth) | Enforce that users must sign in with their wallet. | +| [Switch To Active Chain](/connect/connect-wallet/switch-chain) | Automatically switch to the active chain when connecting a wallet. | +| [Terms Of Service URL](/connect/connect-wallet/terms-of-service) | The URL to the terms of service page. | +| [Privacy Policy URL](/connect/connect-wallet/privacy-policy) | The URL to the privacy policy page. | +| [Hide Testnet Faucet](/connect/connect-wallet/hide-testnet-faucet) | Hide request testnet funds option when connected to testnets | +| [Customize Supported Tokens](/connect/connect-wallet/supported-tokens) | Customize the tokens shown in the "Send Funds" screen | +| [Display Token Balance](/connect/connect-wallet/display-token-balance) | Display the balance of a token instead of the native token | +| [Switch To Personal Wallet](/connect/connect-wallet/hide-switch-to-personal-wallet) | Hide the "Switch to Personal wallet" option in the wallet modal | \ No newline at end of file