Add Crypto.com Defi wallet

docs/onboarding/12 Wallet/0 Overview.mdx

@@ -188,6 +188,15 @@ The Wallet SDK comes out of the box with support for the most popular wallets th
       description="Connect with Rabby Wallet"
     />
   </div>
+
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Defi Wallet"
+      link="/wallet/defi-wallet"
+      image="/assets/wallets/defiwallet.png"
+      description="Connect with Defi Wallet"
+    />
+  </div>
 </div>
 
 <br />

docs/onboarding/12 Wallet/4 Wallets/Defi Wallet.mdx

@@ -0,0 +1,68 @@
+---
+slug: /wallet/defi-wallet
+title: Crypto.com Defi Wallet
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+Prompt users to connect to their [Defi wallet](https://crypto.com/defi-wallet).
+
+## Usage
+
+```javascript
+import { CryptoDefiWallet } from "@thirdweb-dev/wallets";
+
+const wallet = new CryptoDefiWallet();
+
+wallet.connect();
+```
+
+## Configuration
+
+Optionally, provide a configuration object when instantiating the `CryptoDefiWallet` class.
+
+<details>
+  <summary>projectId (recommended) </summary>
+  <div>
+
+This is only relevant if you want to use [WalletConnect](https://walletconnect.com/) for connecting to Defi wallet mobile app when MetaMask is not injected.
+
+This `projectId` can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com/). It is highly recommended to use your own project id and only use the default one for testing purposes.
+
+```javascript
+import { CryptoDefiWallet } from "@thirdweb-dev/wallets";
+
+const wallet = new CryptoDefiWallet(
+  // highlight-start
+  {
+    projectId: "YOUR_WALLET_CONNECT_PROJECT_ID",
+  },
+  // highlight-end
+);
+```
+
+</div>
+</details>
+
+<details>
+  <summary>recommended (optional) </summary>
+  <div>
+
+Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet).
+
+```ts
+CryptoDefiWallet({
+  // highlight-start
+  recommended: true,
+  // highlight-end
+});
+```
+
+</div>
+</details>
+
+## Methods
+
+Inherits all the public methods from the [`AbstractClientWallet`](interfaces/abstract-client-wallet) class.

docs/onboarding/20 Connect/3 Connect Wallet Component/3 Supported Wallets.mdx

@@ -159,6 +159,14 @@ The following wallets are supported by the SDKs:
           description="Connect with Rabby Wallet"
         />
       </div>
+      <div className="col col--4" style={{ padding: 8 }}>
+        <QuickstartCard
+          name="Defi wallet"
+          link="/react/react.defiwallet"
+          image="/assets/wallets/defiwallet.png"
+          description="Connect with Defi Wallet"
+        />
+      </div>
     </div>
   </TabItem>
   <TabItem value="react-native" label="React Native">

docs/react/Connecting Wallets.mdx

@@ -36,6 +36,7 @@ There are two ways you connect user's wallet to your application using thirdweb'
 | Core Wallet       | [`coreWallet`](/react/react.core)               |
 | Coin98 Wallet     | [`coin98Wallet`](/react/react.coin98)           |
 | Rabby Wallet      | [`rabbyWallet`](/react/react.rabby)             |
+| Defi Wallet       | [`cryptoDefiWallet`](/react/react.defiwallet)   |
 
 <br />
 

docs/react/wallets/defiWallet.mdx

@@ -0,0 +1,91 @@
+---
+title: cryptoDefiWallet
+slug: /react.defiwallet
+displayed_sidebar: react
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import { CustomizeWalletConfigurator } from "@components/build-wallet/CustomizeWalletConfigurator";
+
+A wallet configurator for [Defi Wallet](/wallet/defi-wallet) which allows integrating the wallet with React.
+
+```tsx
+import { cryptoDefiWallet } from "@thirdweb-dev/react";
+
+const cryptoDefiWalletConfig = cryptoDefiWallet(options);
+```
+
+## options
+
+<details>
+  <summary>projectId (recommended) </summary>
+  <div>
+
+Your project's unique identifier that can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com).
+
+Defaults to a common thirdweb projectId. We recommend getting your own projectId at
+[cloud.walletconnect.com](https://cloud.walletconnect.com) when launching your project.
+
+```javascript
+import { cryptoDefiWallet } from "@thirdweb-dev/react";
+
+cryptoDefiWallet(
+  // highlight-start
+  {
+    projectId: "<PROJECT_ID>",
+  },
+  // highlight-end
+);
+```
+
+</div>
+</details>
+
+<details>
+  <summary>recommended (optional) </summary>
+  <div>
+
+Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet).
+
+```ts
+cryptoDefiWallet({
+  // highlight-start
+  recommended: true,
+  // highlight-end
+});
+```
+
+</div>
+</details>
+
+## Usage with `ConnectWallet`
+
+To allow users to connect to this wallet using the [ConnectWallet](/react/react.connectwallet) component, you can add it to [ThirdwebProvider's supportedWallets](/react/react.thirdwebprovider#supportedwallets-optional) prop.
+
+```tsx
+<ThirdwebProvider supportedWallets={[cryptoDefiWallet()]} clientId="your-client-id">
+  <YourApp />
+</ThirdwebProvider>
+```
+
+## Usage with `useConnect`
+
+you can use the `useConnect` hook to programmatically connect to the wallet without using the [ConnectWallet](/react/react.connectwallet) component.
+
+The wallet also needs to be added in [ThirdwebProvider's supportedWallets](/react/react.thirdwebprovider#supportedwallets-optional) if you want the wallet to auto-connect on next page load.
+
+```tsx
+const cryptoDefiWalletConfig = cryptoDefiWallet();
+
+function App() {
+  const connect = useConnect();
+
+  const handleConnect = async () => {
+    await connect(cryptoDefiWalletConfig, connectOptions);
+  };
+
+  return <div> ... </div>;
+}
+```