map flow viz done!

client/src/App.tsx

@@ -1,13 +1,15 @@
 import Game from 'components/GameLayout/';
 import Web3 from 'components/web3/App';
 import BuildMapLayout from 'components/BuildMap/BuildMapLayout';
+import SuperGraph from 'components/SuperfluidGraph/SuperGraph';
 
 function App() {
   return (
     <div className="App">
-      <BuildMapLayout />
+      {/* <BuildMapLayout /> */}
       {/* <Game /> */}
       {/* <Web3 /> */}
+      <SuperGraph />
     </div>
   );
 }

client/src/components/SuperfluidGraph/StreamComponent.tsx

@@ -0,0 +1,78 @@
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const getAddress = (s: string) => {
+  const lenght = s.length - 1;
+  const ss = s.substring(0, 7) + '....' + s.substring(lenght - 7, lenght);
+  return ss;
+};
+
+const Box = ({acc1}: {acc1: string}) => {
+  return (
+    <div
+      style={{
+        backgroundColor: '#ffffff',
+        width: '250px',
+        height: '100px',
+        borderRadius: '12px',
+        border: '4px solid #cbd0d5 ',
+      }}>
+      <div
+        style={{
+          padding: '30px 10px',
+          color: '#9da1a5',
+          fontWeight: 'bold',
+          fontSize: '22px',
+        }}>
+        {getAddress(acc1)}
+      </div>
+    </div>
+  );
+};
+
+const App = ({
+  title,
+  inflow,
+  rate,
+  acc1,
+  acc2,
+}: {
+  title: String;
+  inflow: boolean;
+  rate: number;
+  acc1: string;
+  acc2: string;
+}) => {
+  return (
+    <div style={{width: '800px', backgroundColor: '#f8fafc', padding: '1em'}}>
+      <div
+        style={{
+          color: '#9da1a5',
+          fontWeight: 'bold',
+          fontSize: '22px',
+          padding: '0.5em',
+        }}>
+        <h4 style={{textAlign: 'left'}}>{title}</h4>
+      </div>
+      <div style={{display: 'flex', justifyContent: 'space-between'}}>
+        <Box acc1={acc1} />
+        <div style={{flex: 3, paddingTop: '13px'}}>
+          <p
+            style={{
+              margin: '6px 0',
+              color: '#9da1a5',
+              fontWeight: 'bold',
+              fontSize: '18px',
+            }}>
+            {rate} tokens per second
+          </p>
+          <LinearProgress color={inflow ? 'primary' : 'secondary'} />
+          <br />
+          <LinearProgress color={inflow ? 'primary' : 'secondary'} />
+          <br />
+        </div>
+        <Box acc1={acc2} />
+      </div>
+    </div>
+  );
+};
+export default App;

client/src/components/SuperfluidGraph/SuperGraph.tsx

@@ -0,0 +1,83 @@
+import axios from 'axios';
+import {useEffect} from 'react';
+import StreamComponent from './StreamComponent';
+const myAcc = '0xb651D9b48020fa9C02Aa722c3ADb3cF0c4bb5146';
+
+const App = () => {
+  const start = async () => {
+    // GrapgQL
+    const QUERY_URL =
+      'https://thegraph.com/explorer/subgraph/superfluid-finance/superfluid-mumbai';
+    const query = `{
+			account(id: "0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC") {
+				flowOwned {
+					flowRate
+					sum
+					lastUpdated
+					token {
+						id
+						symbol
+					}
+				}
+			}
+		}
+	`;
+    const result = await axios.post(QUERY_URL, {query});
+    console.log('result ', result);
+  };
+
+  useEffect(() => {
+    (() => {
+      //   start();
+    })();
+  }, []);
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#f8fafc',
+        width: '100vw',
+        minWidth: '100vw',
+        minHeight: '100vh',
+
+        textAlign: 'center',
+      }}>
+      <div style={{marginLeft: '2em'}}>
+        <h2 style={{color: 'gray', padding: '1em', textAlign: 'left'}}>
+          Contract Flow on the MapContract
+          0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC
+        </h2>
+        <StreamComponent
+          title={'1) From Player to Contract'}
+          inflow={true}
+          rate={3500}
+          acc1={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+          acc2={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+        />
+        <StreamComponent
+          title={'2) From Contract to MapOwner'}
+          inflow={false}
+          rate={3500}
+          acc1={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+          acc2={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+        />
+        <StreamComponent
+          title={'3) From Contract to MusicOwner'}
+          inflow={false}
+          rate={3500}
+          acc1={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+          acc2={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+        />
+        <StreamComponent
+          title={'4) From Contract to GraphicOwner'}
+          inflow={false}
+          rate={3500}
+          acc1={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+          acc2={'0xafe0DA2BDBc38A2376C7b775e784075523d3C1AC'}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default App;

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "axios": "^0.21.1"
+  }
+}

yarn.lock

@@ -0,0 +1,15 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==