[Profile] Upload metada doc to IPFS (#1393)

# Summary

This PR closes #942 

A function was added in order to receive the metadata doc and upload this to IPFS (and pinning it using Pinata)

An example of a test metadata doc pinned with Pinata: https://gateway.pinata.cloud/ipfs/QmQVCKwriSzFpz5Ybjp3iumJ9HpMq7bS9aReYvxDBactew

  # To Test

It can be tested by calling `uploadMetadataDocToIpfs` and passing a metadata doc as a parameter (We could use `generateReferralMetadataDoc` with a test address).

- For testing purposes, I use my own Pinata account credentials. We'll need to create a corporate account for production. 
- We need to add `REACT_APP_PINATA_API_KEY` and `REACT_APP_PINATA_SECRET_API_KEY` enviroment variables to the `.env` file.


_Node version was updated in order to use `ipfs-core` and `@sdk/pinata` dependencies_

package.json

@@ -4,6 +4,9 @@
   "homepage": ".",
   "private": true,
   "version": "1.2.0",
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@craco/craco": "^5.7.0",
@@ -172,13 +175,15 @@
     "@gnosis.pm/cow-runner-game": "^0.2.9",
     "@gnosis.pm/dex-js": "^0.12.0",
     "@gnosis.pm/gp-v2-contracts": "^1.0.2",
+    "@pinata/sdk": "^1.1.23",
     "@sentry/react": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
     "@uniswap/default-token-list": "^2.0.0",
     "@web3-react/walletconnect-connector": "^6.2.0",
     "bignumber.js": "9.0.1",
     "bnc-sdk": "^3.5.0",
     "fast-safe-stringify": "^2.0.8",
+    "ipfs-http-client": "^52.0.3",
     "paraswap": "^4.18.0",
     "react-appzi": "^1.0.4",
     "react-inlinesvg": "^2.3.0",

src/custom/api/ipfs/index.ts

@@ -0,0 +1,17 @@
+import safeStringify from 'fast-safe-stringify'
+import pinataSDK, { PinataPinByHashResponse } from '@pinata/sdk'
+import { IPFS_URI, PINATA_API_KEY, PINATA_SECRET_API_KEY } from 'constants/ipfs'
+
+const pinata = pinataSDK(PINATA_API_KEY, PINATA_SECRET_API_KEY)
+
+export async function uploadTextFileToIpfs(file: any): Promise<string> {
+  const { create } = await import('ipfs-http-client')
+  const client = create({ url: IPFS_URI })
+  const doc = safeStringify.stableStringify(file)
+  const { cid } = await client.add(doc)
+  return cid.toString()
+}
+
+export async function pinByHash(hash: string): Promise<PinataPinByHashResponse> {
+  return pinata.pinByHash(hash)
+}

src/custom/constants/ipfs.ts

@@ -0,0 +1,3 @@
+export const PINATA_API_KEY = process.env.REACT_APP_PINATA_API_KEY as string
+export const PINATA_SECRET_API_KEY = process.env.REACT_APP_PINATA_SECRET_API_KEY as string
+export const IPFS_URI = process.env.REACT_APP_IPFS_URI || 'https://ipfs.infura.io:5001/api/v0'

src/custom/utils/metadata.ts

@@ -1,3 +1,7 @@
+import CID from 'cids'
+import multihashes from 'multihashes'
+import { uploadTextFileToIpfs, pinByHash } from 'api/ipfs'
+
 interface Metadata {
   version: string
 }
@@ -43,3 +47,10 @@ export function generateAppDataDoc(metadata: MetadataDoc = {}): AppDataDoc {
     },
   }
 }
+
+export async function uploadMetadataDocToIpfs(appDataDoc: AppDataDoc): Promise<string> {
+  const cid = await uploadTextFileToIpfs(appDataDoc)
+  await pinByHash(cid)
+  const { digest } = multihashes.decode(new CID(cid).multihash)
+  return `0x${Buffer.from(digest).toString('hex')}`
+}