Day 18【Opensea.js】我的这把刀可是涂满了毒药的毒刃

【前言】
除了从 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