dope

site/docs/components/WalletComponents.tsx

@@ -9,7 +9,7 @@ type WalletComponentsReact = {
 export default function WalletComponents({ children }: WalletComponentsReact) {
   return (
     <App>
-      <div className="mt-10 mb-28 flex justify-center">{children}</div>
+      <div className="my-10 flex justify-center">{children}</div>
     </App>
   );
 }

site/docs/pages/transaction/transaction.mdx

@@ -297,7 +297,7 @@ The components are designed to work together hierarchically. For each component,
 - `<TransactionToastLabel />` - Displays the label text in the transaction toast notification.
 - `<TransactionToastAction />` - Provides additional actions within the transaction toast notification.
 
-## Props
+## Component types
 
 - [`TransactionButtonReact`](/transaction/types#transactionbuttonreact)
 - [`TransactionError`](/transaction/types#transactionerror)

site/docs/pages/wallet/wallet.mdx

@@ -5,6 +5,7 @@ description: The `<Wallet />` components provides an interface for users to conn
 
 import { 
   ConnectWallet,
+  ConnectWalletText,
   Wallet,
   WalletDropdown,
   WalletDropdownBasename,
@@ -72,10 +73,7 @@ function App({ children }: { children: ReactNode }) {
 
 Experience the magic by simply dropping in the `<Wallet />` component 
 and watch it seamlessly come to life.
-
-In the example below, we've enhanced the experience with some extra Tailwind CSS classes, 
-but you can customize it to your liking.
-
+<br />
 Additionally, you can see the [`<Identity>`](/identity/identity) components 
 like [`<Avatar>`](/identity/avatar), [`<Name>`](/identity/name), 
 and [`<Address>`](/identity/address) are used in a composable way. 
@@ -140,10 +138,8 @@ export function WalletComponents() {
 Expand the user experience with pre-made components like [`<WalletDropdownLink>`](/wallet/wallet-dropdown-link),
 [`<WalletDropdownBasename>`](/wallet/wallet-dropdown-basename),
  [`<WalletDropdownFundLink>`](/wallet/wallet-dropdown-fund-link), 
- or `<EthBalance>`.
-
-Each component is crafted to help you build a seamless wallet experience for your users.
-
+ or `<EthBalance>`, to help you build a seamless wallet experience for your users.
+<br />
 The `<WalletDropdownLink>` is highly versatile and will likely be your go-to choice 
 for adding more links to the dropdown, connecting your users to various pages of your onchain app.
 
@@ -152,20 +148,19 @@ import {
   ConnectWallet,
   Wallet,
   WalletDropdown,
-  WalletDropdownBasename,
-  WalletDropdownFundLink,
-  WalletDropdownLink,
+  WalletDropdownBasename, // [!code focus]
+  WalletDropdownFundLink, // [!code focus]
+  WalletDropdownLink, // [!code focus]
   WalletDropdownDisconnect,
 } from '@coinbase/onchainkit/wallet';
 import {
   Address,
   Avatar,
   Name,
   Identity,
-  EthBalance,
+  EthBalance, // [!code focus]
 } from '@coinbase/onchainkit/identity';
-import { color } from '@coinbase/onchainkit/theme';
-// ---cut-before---
+
 // omitted for brevity
 
 <Wallet>
@@ -224,20 +219,8 @@ import { color } from '@coinbase/onchainkit/theme';
 
 ### Customize Connect button text and style
 
-### Use RainbowKit for wallet aggregation
-
-::::
-
-
-
-
-
-
-
-
-### Override styles
-
-You can override component styles using `className`.
+Each OnchainKit component offers the flexibility to customize `className` 
+and adjust the style of the React components it represents.
 
 ```tsx twoslash
 import {
@@ -288,6 +271,7 @@ import { color } from '@coinbase/onchainkit/theme';
 <WalletComponents>
   <Wallet>
     <ConnectWallet className='bg-blue-800'>
+      <ConnectWalletText>Log In</ConnectWalletText>
       <Avatar className="h-6 w-6" />
       <Name className='text-white' />
     </ConnectWallet>
@@ -310,52 +294,7 @@ import { color } from '@coinbase/onchainkit/theme';
   </Wallet>
 </WalletComponents>
 
-### Override text
-
-You can override component text using `text`.
-
-```tsx twoslash
-import {
-  ConnectWallet,
-  Wallet,
-} from '@coinbase/onchainkit/wallet';
-import {
-  Avatar,
-  Name,
-} from '@coinbase/onchainkit/identity';
-// ---cut-before---
-// omitted for brevity
-
-<Wallet>
-  <ConnectWallet text="Log In"> // [!code focus]
-    <Avatar/>
-    <Name/>
-  </ConnectWallet>
-</Wallet>
-```
-
-<WalletComponents>
-  <Wallet>
-    <ConnectWallet text="Log In">
-      <Avatar className="h-6 w-6" />
-      <Name />
-    </ConnectWallet>
-    <WalletDropdown>
-      <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
-        <Avatar />
-        <Name />
-        <Address className={color.foregroundMuted} />
-        <EthBalance />
-      </Identity>
-      <WalletDropdownLink icon="wallet" href="https://keys.coinbase.com">
-        Wallet
-      </WalletDropdownLink>
-      <WalletDropdownDisconnect />
-    </WalletDropdown>
-  </Wallet>
-</WalletComponents>
-
-## Use wallet aggregator
+### Use RainbowKit for wallet aggregation
 
 You can expand the wallet connection options by using the `withWalletAggregator` prop in the `<ConnectWallet />` component. This will present users with a list of recommended and other wallets to choose from.
 
@@ -479,7 +418,7 @@ export default OnchainProviders;
 :::
 
 <AppWithRK>
-  <div className="mt-10 mb-28 flex justify-center">
+  <div className="my-10 flex justify-center">
     <Wallet>
       <ConnectWallet withWalletAggregator>
         <Avatar className="h-6 w-6" />
@@ -504,6 +443,8 @@ export default OnchainProviders;
   </div>
 </AppWithRK>
 
+::::
+
 ## Components
 
 The components are designed to work together hierarchically. For each component, ensure the following:
@@ -524,9 +465,11 @@ Additional components for customizing the wallet interface include:
 - `<Address />` - Shows the user's wallet address.
 - `<EthBalance />` - Displays the user's ETH balance.
 
-The Wallet component automatically handles the wallet connection state and updates the UI accordingly. You need to wrap your application or relevant part of it with these components to provide a complete wallet interaction experience.
+The Wallet component automatically handles the wallet connection state and updates the UI accordingly. 
+You need to wrap your application or relevant part of it with these components 
+to provide a complete wallet interaction experience.
 
-## Props
+## Component types
 
 - [`WalletReact`](/wallet/types#walletreact)
 - [`ConnectWalletReact`](/wallet/types#connectwalletreact)