Skip to content

Prepare the collector #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fretchen merged 5 commits into from
Jan 31, 2026
Merged

Prepare the collector #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b94ff1
Lint and implement
fretchen Jan 30, 2026
0e66c29
Clean types
fretchen Jan 31, 2026
38f595a
Update MULTICHAIN_EXPANSION_PROPOSAL.md
fretchen Jan 31, 2026
deb1b51
Properly localize
fretchen Jan 31, 2026
b7c8276
Fix some errors
fretchen Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions shared/chain-utils/src/abi/CollectorNFTv1.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* Minimal ABI for CollectorNFTv1 contract
*
* Only includes functions used by website components:
* - getMintStats: Get mint count and pricing info for a GenImNFT token
* - mintCollectorNFT: Mint a collector edition of a GenImNFT
*/

export const CollectorNFTv1ABI = [
{
name: "getMintStats",
type: "function",
stateMutability: "view",
inputs: [{ name: "genImTokenId", type: "uint256" }],
outputs: [
{ name: "mintCount", type: "uint256" },
{ name: "currentPrice", type: "uint256" },
{ name: "nextPrice", type: "uint256" },
],
},
{
name: "mintCollectorNFT",
type: "function",
stateMutability: "payable",
inputs: [{ name: "genImTokenId", type: "uint256" }],
outputs: [{ name: "", type: "uint256" }],
},
] as const;
1 change: 1 addition & 0 deletions shared/chain-utils/src/abi/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@
export { GenImNFTv4ABI } from "./GenImNFTv4";
export { EIP3009SplitterV1ABI } from "./EIP3009SplitterV1";
export { LLMv1ABI } from "./LLMv1";
export { CollectorNFTv1ABI } from "./CollectorNFTv1";
211 changes: 204 additions & 7 deletions website/MULTICHAIN_EXPANSION_PROPOSAL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
|----------|:--------:|:----:|:-----------------:|
| **SupportV2** | ✅ | ✅ | ✅ Ja |
| **GenImNFTv4** | ✅ | ❌ | ✅ Ja (Backend ready) |
| **CollectorNFTv1** | ✅ | ❌ | ❌ Nein |
| **CollectorNFTv1** | ✅ | ❌ | ✅ Ja (Frontend ready) |
| **LLMv1** | ✅ | ❌ | ❌ (out of scope) |
| **EIP3009SplitterV1** | ✅ | ❌ | ✅ Ja |

Expand All @@ -21,8 +21,8 @@
| **1a** | `@fretchen/chain-utils` erstellen | shared/ | ✅ Fertig |
| **1b** | scw_js auf chain-utils migrieren | scw_js/ | ✅ Fertig |
| **1c** | x402_facilitator auf chain-utils migrieren | x402_facilitator/ | ✅ Fertig |
| **2** | GenImNFT-Komponenten migrieren | website/ | ⬜ Next |
| **3** | CollectorNFT-Komponenten migrieren | website/ | ⬜ |
| **2** | GenImNFT-Komponenten migrieren | website/ | ✅ Fertig |
| **3** | CollectorNFT-Komponenten migrieren | website/ | ✅ Fertig |
| **4** | GenImNFTv4 auf Base deployen | eth/, shared/ | ⬜ Später |
| **5** | CollectorNFTv1 auf Base deployen | eth/, shared/ | ⬜ Später |

Expand Down Expand Up @@ -107,6 +107,39 @@ fretchen.github.io/

---

## Phase 2: GenImNFT Website Components Migration ✅ FERTIG

**Status: VOLLSTÄNDIG ABGESCHLOSSEN**

Alle GenImNFT-Komponenten wurden erfolgreich auf `@fretchen/chain-utils` migriert:

| Datei | Status |
|-------|--------|
| `hooks/useAutoNetwork.ts` | ✅ Erstellt - zentraler Hook für Network-Detection |
| `utils/nftLoader.ts` | ✅ Nutzt chain-utils |
| `utils/nodeNftLoader.ts` | ✅ Nutzt chain-utils |
| `components/MyNFTList.tsx` | ✅ `useAutoNetwork()` + chain-utils |
| `components/NFTCard.tsx` | ✅ `useAutoNetwork()` + `getGenAiNFTAddress()` |
| `components/NFTList.tsx` | ✅ `useAutoNetwork()` + chain-utils |
| `components/PublicNFTList.tsx` | ✅ `useAutoNetwork()` + chain-utils |
| `components/EntryNftImage.tsx` | ✅ `useAutoNetwork()` + chain-utils |
| `components/NFTFloatImage.tsx` | ✅ chain-utils |
| `components/ImageGenerator.tsx` | ✅ `useAutoNetwork()` + `isTestnet()` |
| `components/AgentInfoPanel.tsx` | ✅ chain-utils Adressen |
| `hooks/useNFTListedStatus.ts` | ✅ chain-utils (korrektes `isTokenListed` ABI) |
| Tests | ✅ 303 Tests bestanden |

**Wichtige Erkenntnisse aus Phase 2:**
- `useAutoNetwork()` gibt `{ network, switchIfNeeded }` zurück
- `switchIfNeeded()` muss vor schreibenden Operationen aufgerufen werden
- Für wagmi `readContract` muss `chainId` als `SupportedChainId` gecastet werden:
```typescript
const chainId = fromCAIP2(network) as SupportedChainId;
```
- GitHub Workflows brauchen `npm run build` für chain-utils vor website-Install

---

## Phase 1b: scw_js Migration

**Datei:** `scw_js/getChain.js`
Expand Down Expand Up @@ -463,12 +496,176 @@ vi.mock("../hooks/useAutoNetwork", () => ({

---

## Phase 3: CollectorNFT-Komponenten migrieren
## Phase 3: CollectorNFT-Komponenten migrieren ✅ FERTIG

**Status: VOLLSTÄNDIG ABGESCHLOSSEN**

Alle CollectorNFT-Komponenten wurden erfolgreich auf `@fretchen/chain-utils` migriert:

| Datei | Status |
|-------|--------|
| `shared/chain-utils/src/abi/CollectorNFTv1.ts` | ✅ Erstellt - Minimal ABI |
| `components/SimpleCollectButton.tsx` | ✅ `useAutoNetwork()` + chain-utils |
| `test/SimpleCollectButton.test.tsx` | ✅ Mocks aktualisiert |
| `utils/getChain.ts` | ✅ `collectorNFTContractConfig` entfernt, `getChain()` für LLMv1 erhalten |
| Tests | ✅ 302 Tests bestanden |

**Wichtige Änderungen:**
- `CollectorNFTv1ABI` hinzugefügt mit `getMintStats` und `mintCollectorNFT`
- `SimpleCollectButton` nutzt jetzt `useAutoNetwork(COLLECTOR_NFT_NETWORKS)`
- `switchIfNeeded()` wird vor `writeContract` aufgerufen
- `SupportedChainId` Type wurde entfernt (nicht notwendig)
- `getChain()` bleibt für LLMv1 (Phase 4 Migration Kandidat)

### Komplexitätsvergleich mit Phase 2

| Aspekt | Phase 2 (GenImNFT) | Phase 3 (CollectorNFT) |
|--------|-------------------|------------------------|
| **Anzahl Dateien** | 12+ Komponenten + Tests | 1 Komponente + 1 Test |
| **Hook-Erstellung** | `useAutoNetwork` musste erstellt werden | Hook existiert bereits ✅ |
| **ABI in chain-utils** | GenImNFTv4ABI vorhanden | ⚠️ CollectorNFTv1ABI fehlt noch |
| **Getter in chain-utils** | `getGenAiNFTAddress()` vorhanden | `getCollectorNFTAddress()` vorhanden ✅ |
| **Netzwerk-Konstante** | `GENAI_NFT_NETWORKS` vorhanden | `COLLECTOR_NFT_NETWORKS` vorhanden ✅ |
| **Testanpassungen** | Umfangreiche Mock-Updates | Minimal |
| **Komplexität** | 🔴 Hoch | 🟢 Niedrig |
| **Geschätzter Aufwand** | 4-6 Stunden | 30-60 Minuten |

**Fazit: Phase 3 ist ~90% einfacher als Phase 2**, da:
1. Die Infrastruktur (`useAutoNetwork`, chain-utils Dependency) bereits existiert
2. Nur 1 Komponente zu migrieren ist
3. Das Pattern aus Phase 2 einfach kopiert werden kann

### Voraussetzung: CollectorNFTv1ABI zu chain-utils hinzufügen

**Datei:** `shared/chain-utils/src/abi/CollectorNFTv1.ts`

```typescript
// Minimal ABI für CollectorNFTv1 - nur benötigte Funktionen
export const CollectorNFTv1ABI = [
{
name: "getMintStats",
type: "function",
stateMutability: "view",
inputs: [{ name: "genImTokenId", type: "uint256" }],
outputs: [
{ name: "mintCount", type: "uint256" },
{ name: "currentPrice", type: "uint256" },
{ name: "lastMinter", type: "address" },
Copy link

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documented ABI output at line 553 shows lastMinter as the third output parameter, but the actual contract (CollectorNFTv1.sol line 181) and the implemented ABI (CollectorNFTv1.ts line 18) correctly use nextPrice. This documentation should be updated to match the actual implementation.

Suggested change
{ name: "lastMinter", type: "address" },
{ name: "nextPrice", type: "uint256" },

Copilot uses AI. Check for mistakes.
],
},
{
name: "mintCollectorNFT",
type: "function",
stateMutability: "payable",
inputs: [{ name: "genImTokenId", type: "uint256" }],
outputs: [{ name: "tokenId", type: "uint256" }],
},
] as const;
```

**Datei:** `shared/chain-utils/src/abi/index.ts` - Export hinzufügen:
```typescript
export { CollectorNFTv1ABI } from "./CollectorNFTv1";
```

### Implementierungsplan

**Step 1: ABI zu chain-utils hinzufügen (5 min)**
- [ ] `shared/chain-utils/src/abi/CollectorNFTv1.ts` erstellen
- [ ] `shared/chain-utils/src/abi/index.ts` Export hinzufügen
- [ ] `npm run build` in chain-utils
- [ ] Tests hinzufügen (optional)

**Step 2: SimpleCollectButton.tsx migrieren (15 min)**

```tsx
// VORHER
import { collectorNFTContractConfig, getChain } from "../utils/getChain";

const chain = getChain();
const isCorrectNetwork = chainId === chain.id;

useReadContract({
...collectorNFTContractConfig,
functionName: "getMintStats",
args: [genImTokenId],
chainId: chain.id,
});

writeContract({
...collectorNFTContractConfig,
functionName: "mintCollectorNFT",
args: [genImTokenId],
value: currentPrice,
});

// NACHHER
import { useAutoNetwork } from "../hooks/useAutoNetwork";
import {
getCollectorNFTAddress,
CollectorNFTv1ABI,
COLLECTOR_NFT_NETWORKS,
fromCAIP2
} from "@fretchen/chain-utils";
import type { config } from "../wagmi.config";

type SupportedChainId = (typeof config)["chains"][number]["id"];

const { network, switchIfNeeded } = useAutoNetwork(COLLECTOR_NFT_NETWORKS);
const contractAddress = getCollectorNFTAddress(network);
const networkChainId = fromCAIP2(network) as SupportedChainId;

useReadContract({
address: contractAddress,
abi: CollectorNFTv1ABI,
functionName: "getMintStats",
args: [genImTokenId],
chainId: networkChainId,
});

// Bei Schreiboperationen: erst switchIfNeeded() aufrufen
const handleCollect = async () => {
if (!isConnected) return;

const switched = await switchIfNeeded();
if (!switched) return;

writeContract({
address: contractAddress,
abi: CollectorNFTv1ABI,
functionName: "mintCollectorNFT",
args: [genImTokenId],
value: currentPrice,
});
};
```

**Step 3: Test aktualisieren (10 min)**
- [ ] `test/SimpleCollectButton.test.tsx` - Mock für `useAutoNetwork` hinzufügen
- [ ] Chain-utils Mocks analog zu anderen Tests

**Step 4: getChain.ts aufräumen (5 min)**
- [ ] `collectorNFTContractConfig` Export entfernen
- [ ] Deprecation-Hinweis aktualisieren

### Checkliste Phase 3

- [x] `shared/chain-utils/src/abi/CollectorNFTv1.ts` - **CREATED**
- [x] `shared/chain-utils/src/abi/index.ts` - Export hinzugefügt
- [x] `shared/chain-utils` - `npm run build`
- [x] `components/SimpleCollectButton.tsx` - Use `useAutoNetwork()` + chain-utils
- [x] `test/SimpleCollectButton.test.tsx` - Update mocks
- [x] `utils/getChain.ts` - `collectorNFTContractConfig` entfernt, `getChain()` für LLMv1 erhalten
- [x] `npm run build` - Verifiziert
- [x] `npm test` - 302 Tests grün

**Betroffene Dateien:**
- `SimpleCollectButton.tsx` (2 Stellen)
### Risikobewertung

Gleiches Pattern wie Phase 2.
| Risiko | Schwere | Mitigation |
|--------|---------|------------|
| **ABI-Inkompatibilität** | 🟢 Niedrig | Minimal ABI mit nur genutzten Funktionen |
| **Network-Switch UX** | 🟢 Niedrig | Pattern bereits in NFTCard getestet |
| **Breaking Change** | 🟢 Niedrig | Nur 1 Komponente betroffen |

---

Expand Down
5 changes: 1 addition & 4 deletions website/components/MyNFTList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ import { readContract } from "wagmi/actions";
import { config } from "../wagmi.config";
import { useAutoNetwork } from "../hooks/useAutoNetwork";
import { getGenAiNFTAddress, GenImNFTv4ABI, GENAI_NFT_NETWORKS, fromCAIP2 } from "@fretchen/chain-utils";
import type { config } from "../wagmi.config";
import { NFTMetadata, ModalImageData } from "../types/components";

type SupportedChainId = (typeof config)["chains"][number]["id"];
import * as styles from "../layouts/styles";
import { NFTCard } from "./NFTCard";
import { ImageModal } from "./ImageModal";
Expand All @@ -24,7 +21,7 @@ interface MyNFTListProps {
export function MyNFTList({ newlyCreatedNFT, onNewNFTDisplayed }: MyNFTListProps) {
const { address, isConnected } = useAccount();
const { network } = useAutoNetwork(GENAI_NFT_NETWORKS);
const chainId = fromCAIP2(network) as SupportedChainId;
const chainId = fromCAIP2(network);
const contractAddress = getGenAiNFTAddress(network);

// My NFTs state - now just store token IDs
Expand Down
Loading
Loading