Skip to content

Commit 4b95edb

Browse files
macalinaomacalinao
committed
prepare for releae, update docs and clean up lint
1 parent dce0b8d commit 4b95edb

File tree

13 files changed

+440
-86
lines changed

13 files changed

+440
-86
lines changed

‎.github/workflows/release.yml‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
workflow_dispatch:
8+
9+
concurrency:
10+
group: ${{ github.workflow }}-${{ github.ref }}
11+
cancel-in-progress: true
12+
13+
jobs:
14+
release:
15+
name: Release
16+
runs-on: ubuntu-latest
17+
if: github.repository_owner == 'macalinao'
18+
19+
permissions:
20+
contents: write
21+
packages: write
22+
pull-requests: write
23+
24+
steps:
25+
- name: Checkout Repo
26+
uses: actions/checkout@v4
27+
with:
28+
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
29+
fetch-depth: 0
30+
31+
- name: Cache JS dependencies
32+
uses: actions/cache@v3
33+
with:
34+
path: |
35+
node_modules/
36+
~/.bun/
37+
.turbo/
38+
key: turbo-${{ runner.os }}-bun-${{ hashFiles('turbo.json', '**/bun.lock') }}
39+
restore-keys: |
40+
turbo-${{ runner.os }}-bun-
41+
42+
- uses: actions/setup-node@v4
43+
with:
44+
node-version: 22
45+
46+
- name: Install Bun
47+
uses: oven-sh/setup-bun@v2
48+
with:
49+
bun-version: latest
50+
51+
- name: Install Dependencies
52+
run: bun install --frozen-lockfile
53+
54+
- name: Build packages
55+
run: bun run build
56+
57+
- name: Setup NPM authentication
58+
run: |
59+
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
60+
61+
- name: Create Release Pull Request or Publish to npm
62+
id: changesets
63+
uses: changesets/action@v1
64+
with:
65+
# This expects you to have a script called release which does a build for your packages and calls changeset publish
66+
publish: bun run ci:publish
67+
version: bun run ci:version
68+
commit: "chore: release packages"
69+
title: "chore: release packages"
70+
env:
71+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
72+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
73+
74+
- name: Send notification on release
75+
if: steps.changesets.outputs.published == 'true'
76+
run: |
77+
echo "Published packages:"
78+
echo "${{ steps.changesets.outputs.publishedPackages }}"

‎CLAUDE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ The repository includes vendor documentation at `/docs/vendor/`:
157157

158158
## CI/CD
159159

160-
GitHub Actions workflow runs on push/PR to master:
160+
GitHub Actions workflow runs on push/PR to main:
161161
- Installs dependencies with frozen lockfile
162162
- Builds all packages
163163
- Runs linting (biome + eslint)

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,25 @@ React provider for Solana account management with automatic batching and caching
1111
bun add @macalinao/grill gill-react gill
1212
```
1313

14-
### [@macalinao/mast](./packages/mast)
15-
Complete toolkit that exports wallet-adapter functionality and re-exports gill-react hooks.
14+
### [@macalinao/solana-batch-accounts-loader](./packages/solana-batch-accounts-loader)
15+
DataLoader implementation for batching Solana account fetches.
1616

1717
```bash
18-
bun add @macalinao/mast
18+
bun add @macalinao/solana-batch-accounts-loader
1919
```
2020

21-
### [@macalinao/mast-query](./packages/mast-query)
22-
Account caching and batched loading for React-based Solana applications, inspired by [@saberhq/sail](https://github.com/saber-hq/sail) but built for @solana/kit.
21+
### [@macalinao/wallet-adapter-compat](./packages/wallet-adapter-compat)
22+
Compatibility layer between @solana/wallet-adapter and @solana/kit.
2323

2424
```bash
25-
bun add @macalinao/mast-query
25+
bun add @macalinao/wallet-adapter-compat
2626
```
2727

28-
### [@macalinao/wallet-adapter](./packages/wallet-adapter)
29-
Solana wallet adapter integration for @solana/kit with modern transaction handling.
28+
### [@macalinao/dataloader-es](./packages/dataloader-es)
29+
ES module compatible DataLoader implementation.
3030

3131
```bash
32-
bun add @macalinao/wallet-adapter
32+
bun add @macalinao/dataloader-es
3333
```
3434

3535
## Quick Start

‎apps/example-dapp/README.md‎

Lines changed: 165 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
1-
# Mast Example DApp
1+
# Grill Example DApp
22

3-
This example demonstrates how to use the Mast library with DataLoader integration for efficient Solana blockchain interactions.
3+
A modern Solana application demonstrating the Grill toolkit's capabilities for efficient blockchain interactions with automatic account batching and caching.
4+
5+
## Overview
6+
7+
This example showcases how to build a Solana dApp using:
8+
- **Grill** - React provider for automatic account batching with DataLoader
9+
- **Gill** - Modern Solana client library
10+
- **React Query** - Powerful data fetching and caching
11+
- **Tailwind CSS v4** - Utility-first styling with shadcn/ui components
12+
- **TanStack Router** - Type-safe routing
413

514
## Features
615

7-
- **SolanaClientProvider**: Uses gill's `createSolanaClient` for RPC connections
8-
- **MastProvider**: Provides a DataLoader for batched account fetching
9-
- **Wallet Integration**: Supports Phantom, Solflare, and Backpack wallets
10-
- **UI Components**: Built with Tailwind CSS v4 and shadcn components
11-
- **React Query**: Integrated for data fetching and caching
16+
- 🚀 **Automatic Account Batching** - Multiple account requests are automatically batched into single RPC calls
17+
- 💾 **Smart Caching** - React Query integration for intelligent data caching
18+
- 🔐 **Wallet Integration** - Support for all major Solana wallets via @solana/wallet-adapter
19+
- 🎨 **Modern UI** - Beautiful interface with dark mode support
20+
- ⚡ **Fast Development** - Vite + Bun for lightning-fast builds
21+
22+
## Getting Started
1223

13-
## Running the Example
24+
### Prerequisites
25+
- [Bun](https://bun.sh) v1.2.19 or higher
26+
- Node.js 18+ (for compatibility)
27+
28+
### Installation
1429

1530
```bash
1631
# From the monorepo root
@@ -22,35 +37,153 @@ cd apps/example-dapp
2237
bun run dev
2338
```
2439

25-
## Key Components
40+
Open [http://localhost:5173](http://localhost:5173) to view the app.
41+
42+
## Architecture
43+
44+
### Provider Setup
45+
46+
The app uses a carefully orchestrated provider hierarchy in `App.tsx`:
47+
48+
```tsx
49+
QueryClientProvider // React Query for caching
50+
→ SolanaProvider // Gill client for RPC
51+
→ ConnectionProvider // Wallet adapter connection
52+
→ WalletProvider // Wallet management
53+
→ WalletModalProvider
54+
→ GrillProvider // Account batching with DataLoader
55+
```
56+
57+
### Key Components
2658

27-
### App.tsx
28-
Sets up the provider hierarchy:
29-
1. QueryClientProvider (React Query)
30-
2. SolanaClientProvider (RPC connection via gill)
31-
3. ConnectionProvider (Wallet adapter compatibility)
32-
4. WalletProvider (Wallet connections)
33-
5. MastProvider (DataLoader for accounts)
59+
#### GrillProvider
60+
Creates a DataLoader instance for batching account fetches. When multiple components request account data simultaneously, these requests are automatically batched into efficient RPC calls.
61+
62+
#### SimpleDashboard
63+
Demonstrates core functionality:
64+
- Wallet connection and balance display
65+
- Account data fetching with automatic batching
66+
- Direct RPC calls using the gill client
67+
- Real-time balance updates
68+
69+
## Usage Examples
70+
71+
### Fetching Account Data
72+
73+
```typescript
74+
import { useAccount } from "@macalinao/grill";
75+
76+
function MyComponent() {
77+
// Automatically batched with other account requests
78+
const { data: account, isLoading, refetch } = useAccount(publicKey);
79+
80+
if (isLoading) return <div>Loading...</div>;
81+
if (!account) return <div>Account not found</div>;
82+
83+
return (
84+
<div>
85+
<p>Balance: {Number(account.lamports) / 1e9} SOL</p>
86+
<button onClick={() => refetch()}>Refresh</button>
87+
</div>
88+
);
89+
}
90+
```
91+
92+
### Using the Wallet
93+
94+
```typescript
95+
import { useKitWallet } from "@macalinao/grill";
3496

35-
### SimpleDashboard.tsx
36-
Demonstrates:
37-
- Wallet connection with WalletMultiButton
38-
- Fetching account balance using the DataLoader
39-
- Making RPC calls to get the current slot
40-
- Toast notifications for user feedback
97+
function WalletInfo() {
98+
const { signer, rpc } = useKitWallet();
99+
100+
if (!signer) {
101+
return <div>Please connect your wallet</div>;
102+
}
103+
104+
return <div>Connected: {signer.address}</div>;
105+
}
106+
```
41107

42-
## Usage Example
108+
### Making RPC Calls
43109

44110
```typescript
45-
// Access the Solana client
46-
const { rpc } = useSolanaClient()
111+
import { useSolanaClient } from "gill-react";
112+
113+
function SlotDisplay() {
114+
const { rpc } = useSolanaClient();
115+
116+
const fetchSlot = async () => {
117+
const slot = await rpc.getSlot().send();
118+
console.log("Current slot:", slot);
119+
};
120+
121+
return <button onClick={fetchSlot}>Get Slot</button>;
122+
}
123+
```
124+
125+
## Project Structure
126+
127+
```
128+
example-dapp/
129+
├── src/
130+
│ ├── components/
131+
│ │ ├── layout/ # Layout components
132+
│ │ ├── ui/ # Reusable UI components
133+
│ │ ├── SimpleDashboard.tsx
134+
│ │ └── theme-toggle.tsx
135+
│ ├── routes/ # TanStack Router pages
136+
│ │ ├── index.tsx # Home page
137+
│ │ └── examples/ # Example pages
138+
│ ├── App.tsx # Provider setup
139+
│ └── main.tsx # Entry point
140+
├── vite.config.ts # Vite configuration
141+
└── tailwind.config.ts # Tailwind v4 config
142+
```
143+
144+
## Available Scripts
145+
146+
```bash
147+
# Development
148+
bun run dev # Start dev server on port 5173
149+
bun run build # Build for production
150+
bun run preview # Preview production build
151+
152+
# Code Quality
153+
bun run lint # Run ESLint
154+
bun run typecheck # Check TypeScript types
155+
```
156+
157+
## Examples Section
158+
159+
The app includes several examples accessible through the sidebar:
160+
161+
- **Dashboard** - Basic wallet connection and balance display
162+
- **Wrapped SOL** - Token operations with automatic batching
163+
- More examples coming soon!
164+
165+
## Technologies
166+
167+
- **React 19** - Latest React with improved performance
168+
- **TypeScript** - Full type safety
169+
- **Vite** - Lightning-fast HMR and builds
170+
- **TanStack Router** - Type-safe routing
171+
- **TanStack Query** - Powerful data synchronization
172+
- **Tailwind CSS v4** - Modern styling
173+
- **shadcn/ui** - Beautiful, accessible components
174+
- **Biome** - Fast formatting and linting
175+
176+
## Learn More
177+
178+
- [Grill Documentation](https://github.com/macalinao/grill)
179+
- [Gill Documentation](https://github.com/DecalLabs/gill)
180+
- [Solana Kit](https://github.com/solana-developers/solana-kit)
181+
- [React Query](https://tanstack.com/query)
182+
183+
## Contributing
47184

48-
// Access the account loader
49-
const { accountLoader } = useMast()
185+
This is an example application demonstrating Grill's capabilities. Feel free to use it as a template for your own Solana applications!
50186

51-
// Fetch account info (batched automatically)
52-
const accountInfo = await accountLoader.load(address(publicKey.toBase58()))
187+
## License
53188

54-
// Make RPC calls
55-
const slot = await rpc.getSlot().send()
56-
```
189+
Apache-2.0

‎apps/example-dapp/src/components/SimpleDashboard.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
CardHeader,
1212
CardTitle,
1313
} from "@/components/ui/card";
14-
import { ThemeToggle } from "./theme-toggle";
1514

1615
export function SimpleDashboard() {
1716
const { signer } = useKitWallet();
@@ -50,10 +49,7 @@ export function SimpleDashboard() {
5049
<div className="flex flex-col gap-6">
5150
<div className="flex justify-between items-center">
5251
<h1 className="text-4xl font-bold">Grill + Gill Example</h1>
53-
<div className="flex items-center gap-4">
54-
<ThemeToggle />
55-
<WalletMultiButton />
56-
</div>
52+
<WalletMultiButton />
5753
</div>
5854

5955
{signer && (
@@ -68,9 +64,9 @@ export function SimpleDashboard() {
6864
<p className="text-lg">Loading balance...</p>
6965
) : accountQuery.error ? (
7066
<p className="text-lg text-red-500">Error loading balance</p>
71-
) : accountQuery.account ? (
67+
) : accountQuery.data ? (
7268
<p className="text-lg">
73-
Balance: {Number(accountQuery.account.lamports) / 1e9} SOL
69+
Balance: {Number(accountQuery.data.lamports) / 1e9} SOL
7470
</p>
7571
) : (
7672
<p className="text-lg">Balance: 0 SOL</p>

‎apps/example-dapp/src/components/layout/main/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
22
import { Link, Outlet } from "@tanstack/react-router";
33
import type { FC } from "react";
4+
import { ThemeToggle } from "@/components/theme-toggle";
45
import {
56
NavigationMenu,
67
NavigationMenuItem,
@@ -41,8 +42,9 @@ export const MainLayout: FC<MainLayoutProps> = ({ className }) => {
4142
</NavigationMenu>
4243
</div>
4344

44-
{/* Wallet Connection */}
45-
<div className="flex items-center">
45+
{/* Theme Toggle and Wallet Connection */}
46+
<div className="flex items-center gap-2">
47+
<ThemeToggle />
4648
<WalletMultiButton />
4749
</div>
4850
</div>

0 commit comments

Comments
 (0)