【前言】
除了從 web3.js 來取得 ERC-721 的 Token's Ownership，我就想既然都已經在 Opensea 上架商品的話，就直接使用 Opensea 的 JavaScript SDK。這樣覺得自己很聰明的我正在沾沾自喜呢！殊不知這把刀是塗滿了毒藥的毒刃啊（舔）。

【OpenSea.js】
一如既往地，我們先下載套件。

npm install opensea-js

結果出現一堆 error，遇到這個錯誤真的讓我超級崩潰，卡了十幾個小時求助無門，我甚至還跑去 Opensea 的 Discord 問問題，結果整個群組八萬人沒一個人鳥我哈哈哈哈哈哈。但感覺也很正常因為大家都瘋狂問自己想問的問題。

【ERRRRRROR】
經過我認真地爬文，竭盡全力的搜尋少少少少少少數的 opensea.js 資料，爬過以下的文之後，發現問題好像有可能是出現在這三點上面。
npm install fails on Mac OS X · Issue #69 · ProjectOpenSea/opensea-js
npm install --save opensea-js error · Issue #12 · ProjectOpenSea/opensea-js
Can't install opensea-js with NPM

1. node version & npm version
   貌似是我的版本跟 opensea.js 上支持的不一樣，但我已經都更新到最新版了還是無法解決，而且我搜尋 discord 裡面的發問歷史紀錄，發現有很多人跟我有一樣的問題。都是 core.js 的版本沒辦法提升到 3.3 以上，以及一堆套件的版本過舊、命名已經更改過等等。

node -v
npm -v

npm vs node version numbers

2. win32 & win64
   即便我更新到最新版本還是沒辦法符合 npm install opensea-js 的要求好像是因為我的電腦是 32 位元而不是 64 位元，嗎。

3. npm & yarn
   因為 npm & yarn 差距蠻大的，我在網路上也看到很多大大推這個方法，所以我打算把 npm 改成 yarn 試試看
   npm vs. yarn - IT Skills 波林 Polin WEI - 資訊工作者的技術手札
   NPM vs. Yarn: Which Package Manager Should You Choose?

我過去都是使用 npm 來下載套件，現在要先下載 yarn。再下載 opensea.js。

npm install --global yarn
yarn add opensea-js

居然下載成功了！我完全不知道為什麼會成功，希望有大大知道可以告訴我，至少我可以繼續做我的 Project 了！

【前置準備】
首先 import 套件！

import Web3 from 'web3'
import React, { useEffect, useState } from "react";
import { OpenSeaPort, Network } from 'opensea-js'

要從 OpenSeaPort 建立一個新的 OpenSeaJS client 來索取資料或執行買賣的動作。使用 opensea.js 的 sample 提供的 Infura provider 只供檢視不會真的執行買賣。

const provider = new Web3.providers.HttpProvider('https://mainnet.infura.io')

const seaport = new OpenSeaPort(provider, {
  networkName: Network.Main
})

如果需要執行交易的話需要提供私鑰，這裡的提供私鑰，指的並不是真的在程式碼裡面或頁面上有某個輸入格讓使用者輸入密碼，而是利用 Web3 的 MetaMask 或 Dapper 來做為登入 API，也就是說之前我們做的 MetaMask 連動登入系統，就可以在這邊連動然後進行買賣。為了使用者的安全這邊我們不會開通買賣功能！但這是做得到的！

【Assets】
在 OpenSea 裡面最小的單位就是 Asset，可以是 non-fungible ( 通常是 ERC721 ), semi-fungible ( 像是 ERC1155)，或甚至是 fungible ( ERC20 )。

// defined in TypeScript:
export interface Asset {
  // The asset's token ID, or null if ERC-20
  tokenId: string | null,
  // The asset's contract address
  tokenAddress: string,
  // The Wyvern schema name (defaults to "ERC721") for this asset
  schemaName?: WyvernSchemaName,
  // Optional for ENS names
  name?: string,
  // Optional for fungible items
  decimals?: number
}

值得注意的是 schemaName 通常我們都會設定為 "EC721"，但如果我們要使用 'ERC20' 和 'ERC1155' 的話，就要 import { WyvernSchemaName } from "opensea-js/lib/types"，但在後來的 檢查 Token Owner 文章部分我們會特別講一下這個部分。

那我們也可以透過 API 來取得 Asset 的資料，不過如果要索取 API 的話就要去他們的官方文件有連結連到 OpenSea 的 Discord，進去之後可以填寫 Google 表單或直接聯絡他們取得 API。

const asset: OpenSeaAsset = await seaport.api.getAsset({
  tokenAddress, // string
  tokenId, // string | number | null
})

最後我們也可以直接指名道姓要哪一個 Asset 的資料！

const asset = {
  tokenAddress: "0x06012c8cf97bead5deae237070f9587f8e7a266d", // CryptoKitties
  tokenId: "1", // Token ID
}

【小結】
今天就先到此為止啦，明天我們先暫時脫離前端一下子，詳細的介紹一下 ERC-721 吧！讓我喘口氣少寫幾天 code，雖然還是要看很多程式碼不過至少不用動手玩創意…

這幾天真的是吸收了大量的知識阿，JS 實在是擴充到不可理喻的地步，不過就是因為有這麼多好用的函式庫或套件，我們才可以更輕易地做到我們想要完成的事情！

【參考資料】
Developer Tutorials
GitHub - ProjectOpenSea/opensea-js: JavaScript SDK for the OpenSea marketplace. Let your users buy or sell cryptogoods on your own site!
opensea-js
ships-log/index.js at master · ProjectOpenSea/ships-log