好的！相信到這裡的夥伴都完成合約部署和 NFT URL 生成。接下來將包括設置 API 端點、與 Anchor 合約互動，以及觸發 Action & Blink。
前置作業
- 添加出現在Blink 上圖片到 public file
- Webpack 設置
pnpm add stream-browserify crypto-browserify
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, options) => {
if (options.nextRuntime === 'edge') {
config.resolve.fallback = {
...config.resolve.fallback,
crypto: 'crypto-browserify',
stream: 'stream-browserify',
};
}
return config;
},
};
export default nextConfig;
- Solana 相關套件安裝
pnpm add @coral-xyz/anchor \
@solana/actions \
@solana/spl-token \
@solana/web3.js
- 設置 actions.json
- 搬移 idl (類似 Ethereum 上 ABI)
mkdir app/my-app/app/idls
cp target/idl/action_example.json ./app/my-app/app/idls/action_example.json
cp target/types/action_example.ts ./app/my-app/app/idls/action_example.tsAPI 端點 (Get/Post Request)
假如搜尋不到 json or ts 檔案 ，請確認是否有成功部署合約。
接下來，我們就來建立我們的 API 服務
GET :
按照底下的標示 填入自己想要的內容，另外，由於 Mint NFT 需要 Name, Symbol, URL, 因此我們以參數的方式分別傳入
POST :
當完成了 Get 後，Blink 畫面也完成了，接下來我們將實作Post ，也就是與合約互動，在連結上實現與鏈上操作的部分。
接下來，我們可到 Dialect 的網站 測試我們的網頁
確認無誤後，可嘗試透過 cloudflare, vercel 部署一個專門的網域，給親朋好友都試試這個酷功能。請注意，記得設定根路徑為 /app/my-app。
最後，這裡是相關內容的連結
Github：https://github.com/XueDAOTW/sol_anchor_blink_nft
Website : https://dial.to/?action=solana-action:https://sol-anchor-blink-nft.pages.dev/api/mint&cluster=devnet
