---
© 2025 Cordy StackX (@cordystackx)
Licensed under the MIT License.
Unauthorized removal of this notice violates the license terms.
---

🧩 Cordy MiniKit — Web3 Toolkit by CordyStackX


A lightweight, production-ready Web3 toolkit for building wallet UIs, controllers, and provider wrappers — designed for modern frameworks like Next.js and Vite.
Built with Wagmi, Viem, Ethers, and TypeScript.

📦 NPM Package | 📂 GitHub Repository

---

🚀 Features

- 🔗 Wallet Connect/Disconnect — Simple hooks and buttons for EVM-based wallets
- 🧰 Prebuilt UI Components — Ready-to-use ConnectWalletBT, UI_Comp, and more
- ⚙️ Smart Controllers — Manage wallet actions, balances, and transactions effortlessly
- 💸 Transaction Helpers — Built-in ERC20 and native token transfer functions
- 🎨 Themeable CSS — CSS Modules with variables for easy dark/light mode support
- 📦 Tree-shakable & Typed — Optimized bundle size with full TypeScript definitions
- 🧩 Framework-Agnostic — Works seamlessly with Next.js, Vite, and more
- 🌐 Multi-Chain Support — Custom chain configuration support

---

📦 Installation

``bash
npm install @cordystackx/cordy_minikit@latest


or

pnpm add @cordystackx/cordy_minikit@latest

or

yarn add @cordystackx/cordy_minikit@latest
`

---

🛠️ Quick Start

$3

Create a .env.local file in your project root:

`bash
NEXT_PUBLIC_RPC_ENDPOINT=https://your-rpc-endpoint.com
NEXT_PUBLIC_TOKENADDRESS=0x...
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
`

$3

Create a providers file at /app/providers.tsx or /services/minikit/providers.tsx:

`tsx
"use client";
import { ReactNode } from "react";
import { ProvidersClientWrapper } from "@cordystackx/cordy_minikit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function Providers({ children }: { children: ReactNode }) {
return (


{children}


);
}
`

> Note: Install @tanstack/react-query as a peer dependency:
> `bash
> npm install @tanstack/react-query
> `

$3

Import the providers and CSS in your /app/layout.tsx:

`tsx
import Providers from "@/app/providers";
import "@cordystackx/cordy_minikit/dist/css/UI_Comp/styles.module.css";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (



{children}



);
}
`

---

📚 Usage Examples

$3

The ConnectWalletBT component provides a plug-and-play wallet connection button.

`tsx
import { ConnectWalletBT } from "@cordystackx/cordy_minikit";

export default function Header() {
return (



);
}
`

Features:
- Automatically shows "Connect Wallet" when disconnected
- Displays wallet address when connected
- Fully customizable with className prop

---

$3

Use the useWalletModal hook to trigger the wallet modal programmatically:

`tsx
import { useWalletModal } from "@cordystackx/cordy_minikit";

function CustomButton() {
const { openModal, closeModal } = useWalletModal();

return (

Open Wallet

);
}
`

---

$3

The CordyStackTrans function handles ERC20 and native token transfers:

`tsx
import { CordyStackTrans } from "@cordystackx/cordy_minikit";

async function handlePayment() {
const recipientAddress = "0x...";
const amount = 10; // Token amount

const success = await CordyStackTrans(recipientAddress, amount);

if (success) {
console.log("Transaction successful!");
} else {
console.log("Transaction failed or rejected");
}
}
`

---

$3

Configure custom chains for your dApp:

`tsx
import { getConfig, ProvidersClientWrapper } from "@cordystackx/cordy_minikit";
import { defineChain } from "viem";

// Define your custom chain
const myCustomChain = defineChain({
id: 1114,
name: "Core Blockchain Testnet",
network: "core-testnet",
nativeCurrency: { name: "tCORE", symbol: "tCORE", decimals: 18 },
rpcUrls: {
default: { http: ["https://rpc.test.btcs.network"] },
public: { http: ["https://rpc.test.btcs.network"] },
},
blockExplorers: {
default: { name: "Core Scan", url: "https://scan.test.btcs.network" },
},
});

// Get config with custom chain
const customConfig = getConfig({ myCustomChain });

// Use in provider
export default function Providers({ children }: { children: ReactNode }) {
return (

{children}

);
}
`

---

🏗️ Architecture Overview

$3

`
cordy_minikit/
├── assets/ # Image Sources for logo
├── components/ # UI components (ConnectWalletBT, UI_Comp)
├── controllers/ # Transaction logic and wallet operations
├── config/ # ABIs and static configurations
├── css/ # CSS Modules and theming
├── dist/ # Compiled output (published to npm)
├── index.ts # Main export entry point
└── package.json
`

$3

| File/Folder | Description |
|-------------|-------------|
| assets/ | Image Sources for logo |
| client__provider.tsx | React provider wrapper for Wagmi/Viem |
| components/ | Reusable UI components for wallet interactions |
| controllers/ | Business logic for Web3 operations |
| config/ | ERC20 ABI and configuration files |
| css/ | Scoped CSS Modules with theming support |
| dist/ | Compiled JavaScript + TypeScript declarations |

---

🧭 System Architecture — Cordy Minikit

@cordystackx/cordy_minikit is built as a modular Web3 toolkit that sits on top of Wagmi, Viem, Ethers, and Coinbase Wallet SDK, providing developers with prebuilt UI components, controllers, and configuration files for seamless wallet and transaction management.


`mermaid
flowchart TD
%% Layer 1 - External Dependencies
subgraph External_Libraries["🔌 External Libraries"]
A1["wagmi (Wallet & Hooks)"]
A2["viem (RPC / EVM Utils)"]
A3["ethers.js (Tx + ABI Handling)"]
A4["Coinbase Wallet SDK (Wallet Provider)"]
end

%% Layer 2 - Core Logic
subgraph Core["⚙️ Core Logic Layer"]
B1["client__provider.tsx (Wagmi & Viem Client Context)"]
B2["controllers/ (Balance, Tx, WagmiButton)"]
B3["config/ (ERC20_ABI, walletConfig, links.json)"]
end

%% Layer 3 - UI Components
subgraph UI["🧩 UI Components"]
C1["Connect_wallet_bt.tsx (Connect/Disconnect Button)"]
C2["UI_Comp.tsx (Visual/Interactive UI Elements)"]
C3["CSS Modules (Dark/Light Theme Styles)"]
end

%% Layer 4 - Assets & Static Files
subgraph Assets["🖼️ Assets"]
D1["Wallet Logos (Coinbase, Metamask, WalletConnect)"]
D2["Static Config Files (Image.json, etc.)"]
end

%% Layer 5 - Output
subgraph Output["📦 Build & Distribution"]
E1["dist/ (Compiled JS + .d.ts Types)"]
E2["index.ts (Library Entry Point)"]
E3["NPM Registry (Public Package)"]
end

%% Connections
A1 & A2 & A3 & A4 --> B1
B1 --> B2
B2 --> B3
B2 --> C1
C1 --> C2
C2 --> C3
B3 --> C1
C3 --> D1
D1 --> E1
E1 --> E2
E2 --> E3

`

🔧 API Reference

$3

#### ConnectWalletBT
`tsx

`
- Props: className (optional) - Custom CSS class




$3

#### useWalletModal()
`tsx
const { openModal, closeModal } = useWalletModal();
`
- Returns: { openModal: () => void, closeModal: () => void }

$3

#### CordyStackTrans(address, amount)
`tsx
const success = await CordyStackTrans(recipientAddress: string, amount: number);
`
- Returns: Promise - Transaction success status

#### getConfig(customChains?)
`tsx
const config = getConfig({ myChain: customChainDefinition });
`
- Returns: Wagmi configuration with custom chains

---

🎨 Customization

$3

`tsx

`

`css
.my-custom-button {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
}
`

---

📋 Requirements

- React: ^18.3.1
- Next.js: ^14.2.33 (for Next.js projects)
- @tanstack/react-query: ^5.90.3
- wagmi: ^2.18.1
- viem: Latest version
- ethers: ^6.15.0

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature`)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🔗 Links

- NPM Package: https://www.npmjs.com/package/@cordystackx/cordy_minikit
- GitHub Repository: https://github.com/cordyStackX/cordy_minikit_official
- Official Website: https://cordy-stack-x.vercel.app/

---

💬 Support

For issues, questions, or feature requests:
- Open an issue on GitHub
- Visit our website

---

Built with ❤️ by CordyStackX

---