feat: connect to backend and remove 3D on mobile device

.dockerignore

@@ -0,0 +1,7 @@
+/node_modules
+*.log
+.DS_Store
+.env
+/.cache
+/public/build
+/build

Dockerfile

@@ -0,0 +1,60 @@
+# base node image
+FROM node:16-bullseye-slim as base
+
+# Install openssl for Prisma
+RUN apt-get update && apt-get install -y openssl
+
+# Install all node_modules, including dev dependencies
+FROM base as deps
+
+RUN mkdir /app
+WORKDIR /app
+
+ADD package.json package-lock.json ./
+RUN npm install --production=false
+
+# Setup production node_modules
+FROM base as production-deps
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+ADD package.json package-lock.json ./
+RUN npm prune --production
+
+# Build the app
+FROM base as build
+
+ENV NODE_ENV=production
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+
+# If we're using Prisma, uncomment to cache the prisma schema
+# ADD prisma .
+# RUN npx prisma generate
+
+ADD . .
+RUN npm run build
+
+# Finally, build the production image with minimal footprint
+FROM base
+
+ENV NODE_ENV=production
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=production-deps /app/node_modules /app/node_modules
+
+# Uncomment if using Prisma
+# COPY --from=build /app/node_modules/.prisma /app/node_modules/.prisma
+
+COPY --from=build /app/build /app/build
+COPY --from=build /app/public /app/public
+ADD . .
+
+CMD ["npm", "run", "start"]

app/components/Contract.tsx

@@ -2,15 +2,16 @@ import { ShieldCheckIcon } from "@heroicons/react/24/outline";
 import { useFetcher } from "@remix-run/react";
 import { useEffect, useRef } from "react";
 
-export default function Contract({setGraphData, setContract}: {setGraphData: any,  setContract: (value: string) => void}) {
+export default function Contract({setGraphData, setContract, setRawData}: {setGraphData: any,  setContract: (value: string) => void, setRawData: (value: any) => void}) {
     const contract = useFetcher();
     const ref = useRef<HTMLFormElement>(null);
 
     useEffect(() => {
         if (contract.type === "done" && contract.data) {
           setGraphData(contract.data);
+          setRawData(contract.data);
         }
-    }, [contract, setGraphData]);
+    }, [contract, setGraphData, setRawData]);
 
     const handleChange = (event: any) => {
         setContract(event.target.value);

app/components/Graph.tsx

@@ -1,7 +1,7 @@
 import { ForceGraph2D, ForceGraph3D } from "react-force-graph";
 import { getColorByPercentage } from "~/utils/graphUtils";
 
-export default function Graph({ graphData, threshold, graphStyle, contract }: { graphData: any, threshold: number, graphStyle: boolean, contract: string }) {
+export default function Graph({ graphData, threshold, graphStyle }: { graphData: any, threshold: number, graphStyle: boolean, contract: string }) {
     if (graphData.hasOwnProperty("nodes") && graphStyle) { 
         return (
             <div className="p-2">

app/components/Settings/Settings.tsx

@@ -1,17 +1,19 @@
 import * as Slider from '@radix-ui/react-slider';
 import * as Switch from '@radix-ui/react-switch';
+import { isMobile } from 'react-device-detect';
 
 export default function Settings({setThreshold, threshold, setGraphStyle, graphStyle}: {setThreshold: (value: number) => void, threshold: number, setGraphStyle: (value: boolean) => void, graphStyle: boolean}) {
     return (
         <div className="w-full bg-neutral-900 h-full">
             <div className="text-center font-montserrat p-2 uppercase font-semibold text-xl text-neutral-100">Settings</div>
             <div className='mt-6'>
-                <div className="w-full text-center">
+                {!isMobile && <div className="w-full text-center">
                     <div className="text-center font-montserrat uppercase text-neutral-300">2D/3D</div>
                     <Switch.Root className="SwitchRoot mx-auto text-center" defaultChecked={graphStyle} id="airplane-mode" onCheckedChange={(value) => {setGraphStyle(value)}}>
                         <Switch.Thumb className="SwitchThumb" />
                     </Switch.Root>
                 </div>
+                }
                 <div className="w-full text-center mt-12">
                     <div className="text-center font-montserrat uppercase text-neutral-300 mt-6">Threshold</div>
                     <Slider.Root className="SliderRoot" defaultValue={[50]} max={100} step={1} aria-label="Volume" onValueChange={(value) => {setThreshold(value[0])}}>

app/routes/contract/check.tsx

@@ -1,7 +1,6 @@
 import type { ActionArgs} from "@remix-run/node";
 import { json } from "@remix-run/node";
 
-import data from "~/data/result.json";
 
 /**
  * Save email adress of the user in Airtable
@@ -15,6 +14,6 @@ export async function action({ request }: ActionArgs) {
     if (contract === "") {
         return json({}, { status: 200 });
     }
-
-    return json(data);
+    const data = await fetch(`${process.env.BACKEND_URL}/${contract}`);
+    return json(await data.json());
 }

app/routes/index.tsx

@@ -14,6 +14,7 @@ let Graph = lazy(() => import("~/components/Graph"));
 export default function Index() {
   const [menuOpen, setMenuOpen] = useState(!isMobile);
   const [graphData, setGraphData] = useState<any>({});
+  const [rawData, setRawData] = useState<any>({});
   const [threshold, setThreshold] = useState(50);
   const [graphStyle, setGraphStyle] = useState(false);
   const [contract, setContract] = useState("");
@@ -26,8 +27,6 @@ export default function Index() {
     }, 3000);
   }
 
-
-
   const toggleMenu = useCallback(() => setMenuOpen(!menuOpen), [setMenuOpen, menuOpen]);
 
   const closeMenu = useCallback(() => setMenuOpen(false), [setMenuOpen]);
@@ -45,12 +44,12 @@ export default function Index() {
           </div> 
         }
         <div className={isMobile ? "w-full" : "w-9/12" }>
-          <Contract setGraphData={setGraphData} setContract={setContract} />
+          <Contract setGraphData={setGraphData} setContract={setContract} setRawData={setRawData} />
           <ClientOnly>
             <Suspense fallback="">
               <Graph graphData={graphData} threshold={threshold} graphStyle={graphStyle} contract={contract} />
               { graphData.hasOwnProperty("nodes") &&
-                <CopyToClipboard text={JSON.stringify(graphData.nodes)} onCopy={handleCopy}>
+                <CopyToClipboard text={JSON.stringify(rawData.nodes)} onCopy={handleCopy}>
                   <div>
                   { !copied && <button className="absolute right-2 bottom-6 inline-flex items-center justify-center uppercase text-neutral-100 outine-none rounded-full px-3 py-2 bg-greenish-500 text-center hover:bg-greenish-400" onCopy={handleCopy}>
                     <ClipboardIcon className="w-6 h-6 mr-2" />
@@ -63,15 +62,13 @@ export default function Index() {
                   </button>
                   }
                   </div>
-
                 </CopyToClipboard>
               }
             </Suspense>
           </ClientOnly>
         </div> 
       </div>
     </div>
-
   );
 }
 

app/styles/app.css

@@ -529,28 +529,20 @@ video {
   top: 4px;
 }
 
-.top-6 {
-  top: 1.5rem;
-}
-
-.left-\[2px\] {
-  left: 2px;
-}
-
-.right-6 {
-  right: 1.5rem;
+.right-2 {
+  right: 0.5rem;
 }
 
 .bottom-6 {
   bottom: 1.5rem;
 }
 
-.right-4 {
-  right: 1rem;
+.top-6 {
+  top: 1.5rem;
 }
 
-.right-2 {
-  right: 0.5rem;
+.left-\[2px\] {
+  left: 2px;
 }
 
 .mx-auto {
@@ -594,18 +586,14 @@ video {
   height: calc(100vh - 66px);
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .w-full {
   width: 100%;
 }

fly.toml

@@ -0,0 +1,39 @@
+# fly.toml file generated for sybilshield on 2023-02-03T19:13:39+02:00
+
+app = "sybilshield"
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+[env]
+  PORT = "8080"
+
+[experimental]
+  allowed_public_ports = []
+  auto_rollback = true
+
+[[services]]
+  http_checks = []
+  internal_port = 8080
+  processes = ["app"]
+  protocol = "tcp"
+  script_checks = []
+  [services.concurrency]
+    hard_limit = 25
+    soft_limit = 20
+    type = "connections"
+
+  [[services.ports]]
+    force_https = true
+    handlers = ["http"]
+    port = 80
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = 443
+
+  [[services.tcp_checks]]
+    grace_period = "1s"
+    interval = "15s"
+    restart_limit = 0
+    timeout = "2s"

package.json

@@ -7,7 +7,8 @@
     "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
     "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
     "start": "remix-serve build",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "deploy": "fly deploy --remote-only"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.14",