wallet how it works & reorg (#879)

* create architecture page

* mv

* reorder

* requested changes

docs/onboarding/14 Wallet/0 Overview.mdx

@@ -22,12 +22,12 @@ These SDKs provide everything you need to create web3 apps with ease.
   repoUrl="https://github.com/thirdweb-dev/js/tree/main/packages/wallets"
 />
 
-## Popular wallets available out of the box
+## Popular Wallets Available
 
 The Wallet SDK comes out of the box with support for the most popular wallets that are ready to be used with thirdweb SDKs:
 
 - Custodial wallets like [MetaMask](/wallet/metamask), [WalletConnect](/wallet/wallet-connect-v2), and [Coinbase Wallet](/wallet/coinbase-wallet)
-- Non-custodial wallets like [Magic](/wallet/magic) and [Paper](/wallet/paper)
+- Self-custodial wallets like [Magic](/wallet/magic) and [Paper](/wallet/paper)
 - Multi-sig wallets like [Safe (Gnosis)](/wallet/safe)
 - [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) compliant [Smart Wallet](/wallet/smart-wallet)
 - [Local Wallet](/wallet/local-wallet) that allows you to create a "continue as guest" experience

docs/onboarding/14 Wallet/1 Architecture.mdx

@@ -0,0 +1,39 @@
+---
+slug: /wallet/architecture
+title: Architecture
+sidebar_position: 3
+---
+
+# Architecture
+
+The Wallet SDK allows you to create and connect wallets to your app.
+It allows you to easily integrate an existing wallet providers with thirdweb's
+[Typescript](/wallet/usage-with-typescript-sdk),
+[React](/wallet/usage-with-react-sdk),
+[React Native](/wallet/usage-with-react-native-sdk), and
+[Unity](/wallet/usage-with-unity-sdk) SDKs or [create your own custom wallet connectors](/wallet/build-a-wallet).
+
+If you are working in React, React Native, or Unity, you can use the `ConnectWallet` component to
+connect & create wallets. The `ConnectWallet` component is a pre-built component which uses the Wallet SDK
+under the hood. If you'd like to connect wallets in a back-end environment, or if you'd like full control on how
+wallets are created or handled, you can use the Wallet SDK directly.
+
+## Using the Wallet SDK Directly
+
+You can use the Wallet SDK directly in any environment that supports TypeScript.
+The Wallet SDK enables you to connect and create wallets which you can then use in your app to sign transactions as you usually would.
+There are two main instances in which you would use the Wallet SDK directly:
+
+1. Connecting wallets in a back-end environment such as Node.js script to sign transactions without passing a private key.
+   Instead, a browser popup would be initiated to sign the transaction.
+
+2. In projects where you need low-level control of the wallet
+
+- Example: Needing to pass custom configuration options such as specifying a custom `execute` method for `smartWallet` e.g. [in this template](https://github.com/thirdweb-example/unilogin/tree/main).
+
+## ConnectWallet
+
+If you are in a [React](/wallet/usage-with-react-sdk), [React Native](/wallet/usage-with-react-native-sdk), or [Unity](/wallet/usage-with-unity) environment, you can use the `ConnectWallet` component to connect & create wallets.
+This component is a pre-built component which uses the Wallet SDK under the hood and works out of the box!
+
+`ConnectWallet` has a customizable UI and allows you to connect to any of the supported wallets in the Wallet SDK. Read the [`ConnectWallet`](/react/react.connectwallet) documentation to learn more.

docs/onboarding/14 Wallet/1 Getting Started.mdx → docs/onboarding/14 Wallet/2 Getting Started/1 Getting Started.mdx

@@ -25,7 +25,7 @@ To get started, install the [package](https://github.com/thirdweb-dev/js/tree/ma
 
 <br />
 
-Now you&rsquo;re ready to use any of our supported wallets. 
+Now you&rsquo;re ready to use any of our supported wallets.
 
 ```js
 // 1. Import the wallet you want to use from the package