Z 學院課外活動：Story Protocol 黑客松

Published in

The Z Institute

6 min readDec 19, 2023

簡介

Hackathon 黑客松，簡單來說，是一項在短時間內做出一個產品的挑戰。這是學習、組隊和建立產品的最佳場所。黑客松對於我來說，讓我可以挑戰自己、驗證自己和提高效率。我有幸加入 Tina 的團隊，參與了 AIGC NFT Marketplace 專案。在這篇文章中，我將介紹我們的專案，並以前端開發者的角度更詳細地討論學習和挑戰。

Story Protocol 和 Alpha Hackathon

Story Protocol 正在建立一個適應互聯網時代的開放 IP 基礎設施。他們獲得了 a16z 的資助，正在建立「IP 的 Git」，以釋放互聯網的全部創造潛力。

Story Protocol Alpha Hackathon 的重點目標如下：

網絡化的 IP / 敘事： 促進合作和開放的知識產權創作，並接納分佈式貢獻。
重新設計授權： 現代化授權框架，以增強可訪問性，並讓有才華的貢獻者團結在有前途的知識產權周圍。
IP 流動性： 創建在鏈上進行 IP 資產交易、借貸和分割的工具。
核心協議基礎設施： 分析、創作工具和其他核心協議基礎設施。
集成： 強大的外部服務鉤子，如 KYC、Oracle 集成和 AI 大型語言模型。

在這些目標的基礎上，我們的團隊在那個週末不眠不休地完成了 AIGC NFT Marketplace。

AIGC NFT Marketplace

我們的專案將呈現一個 Gen-AI 市場，幫助藝術家創建自己的精細調整模型，並通過利用 ERC-7007 的 ERC-721 擴展介面為 OPML 基礎的 AIGC-NFT 提供賺錢機會。每個輸出作品都會自動註冊為 Story 上的 IP 資產，為模型使用提供清晰的歸屬，並可能進行收益分配。

我們有一個宏偉的願景：創建一個分散化的平台，讓 AI 模型創作者和內容創作者能夠以全新的方式進行合作和盈利。

智能合約

智能合約架構包括以下幾個關鍵元件：

AIGT（AI 治理代幣）：一種 ERC-20 代幣，在我們的生態系統中發揮重要作用，用於治理和收入分潤。
AIGC（AI 生成內容）：一種 ERC-721 NFT，使內容創作者能夠使用 AI 模型創建生成藝術並向模型創作者支付版稅。
AIGC Factory：一個工廠合約，負責管理 AIGC 和 AIGT，同時將生成的 AI 模型與內容創作關聯起來。
OPML Library ：我們採用了 OPML 標準，該標準類似 optimism rollup 是採用以博奕方式的驗證機制，以確保我們的機器學習服務在分散且可驗證的共識上運行。

前端

我們使用的前端工具：

Next.js 作為基礎框架
TailwindCSS 和 DaisyUI 用於樣式和開箱即用的組件庫
React hook form 用於更快的表單管理
RainbowKit 用於錢包連接
ipfs-http-client 和 infura 用於將資產上傳到 IPFS

接著，我想更細的討論一些與 web3 整合相關學到的東西。

通過 wagmi-cli 插件生成 hooks

wagmi-cli 是一個幫助命令行工具，可以根據常見的 ERC 標準、ABI，甚至通過鏈上地址驗證的合約生成基於 react hook 的代碼。在這個專案中，我們使用這個工具來生成 hook 函數，快速與多個合約進行交互。

useContractWrite vs. usePrepareContractWrite

在 wagmi 的文檔中，他們推薦使用 prepare hook 來避免 UX 陷阱。理論上，它確實提供了更好的體驗，但在實際使用中，由於需要傳入動態參數，prepare hook 不允許以這種方式進行。

write vs. asyncWrite

使用 write，可以通過 data 獲取返回的交易哈希值。使用 asyncWrite，可以獲取 transaction hash。我認為 wagmi 的文檔應該提供更好的例子，告訴我們在什麼情況下使用哪個。如果你對 async 的差異或使用方式不太熟悉，最好使用 write，然後通過 isSuccess 檢查處理結果，並利用 data 中的更新值。

但為了更好的用戶體驗，我們應該監聽合約事件，這就是 useContractEvent 的作用。

useContractEvent

我個人認為，掌握 contract event 是做出出色的 web3 前端的關鍵。由於合約寫入的完成時間不確定，我們不應該讓前端的用戶一直等待寫入完成。隨時讓用戶能夠繼續進行操作，並提供檢查交易是否仍在等待、已確認或已取消的位置。我們真的需要更好的用戶體驗，以吸引更多的用戶進入 web3 領域。

其他次要的前端小技巧

只在絕對必要時要求用戶連接錢包。連接錢包可能會讓用戶關閉網站。
由於前端連接錢包，這使得在許多地方無法使用 SSR。當出現 hydration 錯誤時，你可以實現一個 useIsMounted() hook，如下面的代碼，以檢查是否在服務器端渲染上使用。

import * as React from "react";

export const useIsMounted = () => {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => setMounted(true), []);

  return mounted;
};