IPFS api

.env

@@ -1 +1,2 @@
+REACT_APP_IPFS_URL="http://109.235.70.27:5001"
 REACT_APP_TENSORFLOW_URL="http://109.235.70.27:8501"

.env.development

@@ -1 +1,2 @@
-REACT_APP_TENSORFLOW_URL=""
+REACT_APP_IPFS_URL="http://localhost:3000/IPFS_API"
+REACT_APP_TENSORFLOW_URL="http://localhost:3000/TF_API"

package.json

@@ -72,6 +72,7 @@
     "dayjs": "^1.11.5",
     "framer-motion": "^6.2.9",
     "history": "^5.3.0",
+    "ipfs-http-client": "^58.0.0",
     "lodash": "^4.17.21",
     "node-polyfill-webpack-plugin": "^2.0.0",
     "notistack": "^2.0.5",
@@ -127,9 +128,9 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "gh-pages": "^3.2.3",
+    "http-proxy-middleware": "^2.0.6",
     "prettier": "^2.5.1",
     "react-app-rewired": "^2.2.1",
     "typescript": "^4.5.5"
-  },
-  "proxy": "http://109.235.70.27:8501"
-}
+  }
+}

src/App.tsx

@@ -14,6 +14,7 @@ import LoadingScreen from './components/LoadingScreen';
 // universaldot imports
 import { useProfile, useUser, useLoader } from './hooks/universaldot';
 import { useSubstrateState } from './substrate-lib';
+import { useIpfsAPI } from './api';
 // ----------------------------------------------------------------------
 
 export default function App() {
@@ -41,6 +42,17 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [keyring]);
 
+  const ipfsAPI = useIpfsAPI();
+
+  useEffect(() => {
+    const fetchIpfsID = async () => {
+      const result = await ipfsAPI.id();
+      console.log('IPFS id: ', result);
+    };
+
+    fetchIpfsID();
+  }, [ipfsAPI]);
+
   return (
     <MotionLazyContainer>
       <ThemeProvider>

src/api/index.ts

@@ -1 +1,2 @@
+export * from './ipfs';
 export * from './tensorFlow';

src/api/ipfs.ts

@@ -0,0 +1,12 @@
+import windowInstance from '../window';
+import { create } from 'ipfs-http-client';
+import { useState } from 'react';
+
+const { IPFS_URL } = windowInstance.env;
+const VERSION_PATH = '/api/v0';
+
+export const useIpfsAPI = () => {
+  const [ipfsAPI] = useState(() => create({ url: `${IPFS_URL}${VERSION_PATH}` }));
+
+  return ipfsAPI;
+};

src/setupProxy.js

@@ -0,0 +1,20 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  app.use(
+    '/IPFS_API',
+    createProxyMiddleware({
+      target: 'http://109.235.70.27:5001',
+      pathRewrite: { '^/IPFS_API': '' },
+      changeOrigin: true,
+    })
+  );
+  app.use(
+    '/TF_API',
+    createProxyMiddleware({
+      target: 'http://109.235.70.27:8501',
+      pathRewrite: { '^/TF_API': '' },
+      changeOrigin: true,
+    })
+  );
+};

src/window.ts

@@ -3,6 +3,7 @@ export {};
 declare global {
   interface Window {
     env: {
+      IPFS_URL: string;
       TENSORFLOW_URL: string;
     };
   }
@@ -12,10 +13,12 @@ const windowInstance: Window = window;
 
 if (!window.env) {
   window.env = {
+    IPFS_URL: process.env.REACT_APP_IPFS_URL!,
     TENSORFLOW_URL: process.env.REACT_APP_TENSORFLOW_URL!,
   };
 } else {
   window.env = {
+    IPFS_URL: window.env.IPFS_URL,
     TENSORFLOW_URL: window.env.TENSORFLOW_URL,
   };
 }