# Signature On-chain Minter Automation [TOC] ###### tags: `Dapp` `區塊鏈` --- ### Connect to the local blockchain by ganache-cli 會使用一組Private key 作為連線metamask ![](https://i.imgur.com/e2u2RCl.png) ![](https://i.imgur.com/9NAGLRo.png) ![](https://i.imgur.com/FdPpt9t.png) ![](https://i.imgur.com/Z8QiMJI.png) ![](https://i.imgur.com/jncO9TR.png) ![](https://i.imgur.com/uu2z3aC.png) ![](https://i.imgur.com/rZJ3IMI.png) ![](https://i.imgur.com/krqrOvj.png) ### Smart contract migrated to the local blockchain--->transactions deployed ![](https://i.imgur.com/T0HcOzK.png) ![](https://i.imgur.com/7t87qcg.png) ---- ### SmartContract.json--->擁有[ABI](https://medium.com/taipei-ethereum-meetup/ethereum-%E6%99%BA%E8%83%BD%E5%90%88%E7%B4%84%E9%96%8B%E7%99%BC%E7%AD%86%E8%A8%98-%E6%B7%B1%E5%85%A5%E6%99%BA%E8%83%BD%E5%90%88%E7%B4%84-abi-268ececb70ae) ![](https://i.imgur.com/YytQWTL.png) ---- ### 前端react介面 串接好metamask ＋ 可以一鍵 automation deploy 智能合約 ![](https://i.imgur.com/1lYn2JM.png) * conncect to metamask fail ![](https://i.imgur.com/XVrU3OW.png) ---- ### 重新 migrate smart contract(==truffle migrate --reset==) ![](https://i.imgur.com/lQgVvOM.png) ---- ### 寫 智能合約jest測試(truffle test) ![](https://i.imgur.com/5DaIVmp.png) ![](https://i.imgur.com/dP4QCgn.png) ---- ### 利用NPM內建[react-signature-canvas](https://www.npmjs.com/package/react-signature-canvas)在前端簽完名後-－－>轉成png檔 (可在React前端介面完成） * connect to metamask with minter successful ![](https://i.imgur.com/CpL45GJ.png) ---- ### 利用[ipfs http client](https://www.npmjs.com/package/ipfs-http-client)將簽名檔可以上傳到IPFS * signature 存成 BUFFER(base64)--->之後要將簽名檔寫在IPFS需求的格式 ![](https://i.imgur.com/tBhdbT4.png) ![](https://i.imgur.com/NkY25PL.png) * [opensea metadata doc](https://docs.opensea.io/docs/2-adding-metadata)上確認等等要上傳IPFS 的 metadata ipfs格式 ![](https://i.imgur.com/XMwur3F.png) * [opensea metadata url doc](https://docs.opensea.io/docs/metadata-standards) * [Mint an NFT with IPFS ](https://docs.ipfs.io/how-to/mint-nfts-with-ipfs/#a-short-introduction-to-nfts) * [Welcome to NFT School ](https://nftschool.dev/how-to/auditing-nfts/) * [ipfs-http-client typeerror: failed to construct 'url': invalid url](https://github.com/ipfs-inactive/js-ipfs-http-client#cors) * [串接api產生CORS問題](https://github.com/ipfs-inactive/js-ipfs-http-client#cors) * This would be a CORS ("Cross Origin Resource Sharing") failure: IPFS servers are designed to reject requests from unknown domains by default. ![](https://i.imgur.com/CYE8A9W.png) * [在區塊鏈上建立可更新的智慧合約(一)](https://medium.com/@twedusuck/%E5%9C%A8%E5%8D%80%E5%A1%8A%E9%8F%88%E4%B8%8A%E5%BB%BA%E7%AB%8B%E5%8F%AF%E6%9B%B4%E6%96%B0%E7%9A%84%E6%99%BA%E6%85%A7%E5%90%88%E7%B4%84-cbe015bdb339) --- #### ==IPFS http client常見問題== ![](https://i.imgur.com/VKLPIIQ.png =x200) ---- ### 在infura上串接 IPFS API ---- #### 解決＠openzeppelin無法compile智能合約問題 * [直接將openzeppelin整個套件載下來](https://github.com/OpenZeppelin/openzeppelin-contracts) * cmd:$ yarn install @openzeppelin/contracts --- #### 目前前端有bug上傳不到ipfs上 ![](https://i.imgur.com/e5HpFKC.png =x300) ![](https://i.imgur.com/6NaD7OO.png =x250) --- * 記得要connected sites ![](https://i.imgur.com/xFQgyVX.png) * 選擇想要連線的connected sites跟network的account(預設localhost大部份都是port8545) ![](https://i.imgur.com/rqUC066.png) * 連線成功囉 ![](https://i.imgur.com/qtspdLv.png) * 同意後transaction就成立囉,付gas fee囉 ![](https://i.imgur.com/WTHpLhG.png) * 成功!mint完的signature nft都列出囉! ![](https://i.imgur.com/bPZnucF.png =x250) * transaction紀錄 ![](https://i.imgur.com/50l5JIx.png) * [我 publish的 signature ipfs網址](https://bafybeics5mqxuwd3755oivs2xos5tcqklxn4afy2mfrer2h6hhoxmqiq7i.ipfs.infura-ipfs.io/) ### 補充資料 [What the hack is Memory and Storage in Solidity?](https://medium.com/coinmonks/what-the-hack-is-memory-and-storage-in-solidity-6b9e62577305) [什麼時候用 storage，什麼時候該用 memory?](https://medium.com/taipei-ethereum-meetup/solidity-weekly-9-beae006cee2)