your-project/
├── src/
│   ├── V01DConnectModal/         ←--- Extract here
│   │   ├── CustomConnectModal.tsx
│   │   ├── custom-modal.css
│   │   ├── modal-config.ts
│   │   └── theme-presets.ts
│   └── your-app-files...

import { useState } from 'react'; //add at top with imports

const [isModalOpen, setIsModalOpen] = useState(false); //add in main function, before JSX return

<CustomConnectModal
  open={isModalOpen}
  onOpenChange={setIsModalOpen}
  trigger={
    <button 
      className="my-custom-button"
      onClick={() => setIsModalOpen(true)}
      type="button"
    >
      Launch Wallet Connection
    </button>
  }
/>
                

export const modalConfig: ModalConfig = {
theme: {
preset: "crystalClear",               // Theme preset name here, CaSe SensiTive

// --- variables for "custom" preset here ---

},
content: {
header: {
walletListHeader: "Connect a Wallet",   // Left panel title
contentHeader: "V01D Modal"             // Right panel title
},
body: {         // description is the main content on right side, accepts basic html
description: `
<div style="margin-bottom:12px;">Connect.</div>
<div style="margin-bottom:12px;">Ultimate Freedom.</div>
<div style="opacity:0.8;">10 amazing themes. Also, all code and css is easily accessible. Customize however you see fit.</div>
`
},
buttons: {
connectText: "Connect Wallet",          // Connect button text
mobileContentBtnText: "Instructions"    // Text for bottom button on mobile, reveals right side content
}
},
behavior: {
autoConnect: true,                       // Auto-connect on load
showWalletIcons: true,                   // Show wallet icons
preferredWallets: ["Slush"],             // Sort preferred wallets to top
filterWallets: ["Slush", "Nightly"],     // Show only the wallets listed here
showMobileContentButton: true           // Show/Hide the mobile view content button
}
};