feat(synapse-interface): Added /returntomonke pfp generator

packages/synapse-interface/pages/returntomonke/ImageUploader.tsx

@@ -0,0 +1,134 @@
+import _ from 'lodash'
+import { useState, useRef, useEffect } from 'react'
+import Button from '@tw/Button'
+
+export default function ImageUploader() {
+  const [uploadedImage, setUploadedImage] = useState(null);
+  const [processedImage, setProcessedImage] = useState(null);
+
+  const fileInput = useRef(null);
+  const imgRef = useRef(null);
+
+  useEffect(() => {
+    if (uploadedImage) {
+      applyImageOverlay();
+    }
+  }, [uploadedImage]);
+
+  function handleFile(file) {
+    setUploadedImage(file);
+  }
+
+  function handleDragOver(event) {
+    event.preventDefault();
+  }
+
+  function handleOnDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    handleFile(event.dataTransfer.files[0]);
+    console.log('File drop was a success');
+  }
+
+  const applyImageOverlay = () => {
+    const canvas = imgRef.current;
+    const ctx = canvas.getContext('2d');
+
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Load the uploaded image
+    const img = new Image();
+    img.src = URL.createObjectURL(uploadedImage);
+    img.onload = () => {
+      // Set the canvas size to match the uploaded image
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      // Load the overlay image
+      const overlay = new Image();
+      overlay.src = './synpfpborder.png';
+      overlay.onload = () => {
+        // Draw the overlay image on top of the uploaded image
+        ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);
+
+        // Convert the canvas to a Blob and update the state
+        canvas.toBlob((blob) => {
+          setProcessedImage(blob);
+        }, 'image/jpeg');
+      };
+    };
+  };
+
+  return (
+    <div>
+      <div
+        className={`
+          flex ${processedImage ? '' : 'h-[200px]'}  w-full  rounded-xl cursor-pointer
+          border-dashed border-4 border-white border-opacity-50 mb-2
+          text-white text-opacity-50 hover:text-opacity-100
+          hover:border-white
+          transform transition-all duration-200
+        `}
+        style={{
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 100,
+          backgroundPosition: 'center',
+        }}
+        onDragOver={handleDragOver}
+        onDrop={handleOnDrop}
+        onClick={() => fileInput.current.click()}
+      >
+        <p className="p-3 m-auto text-lg text-center center">
+          {!processedImage && (
+            <>
+              Click to Upload or
+              <br />
+              Drag and drop image here...
+            </>
+          )}
+          {processedImage && <>Select different image?</>}
+        </p>
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInput}
+          hidden
+          onChange={(e) => handleFile(e.target.files[0])}
+        />
+      </div>
+      {processedImage && (
+        <img src={URL.createObjectURL(processedImage)} alt="preview" />
+      )}
+      <canvas ref={imgRef} style={{ display: 'none' }} />
+      {uploadedImage && (
+        <Button
+          className={`
+            w-full rounded-xl my-2 px-4 py-3 tracking-wide
+            text-white text-opacity-100
+            hover:opacity-80 disabled:opacity-100 disabled:text-[#88818C]
+            disabled:from-bgLight disabled:to-bgLight
+            bg-gradient-to-r from-[#CF52FE] to-[#AC8FFF]
+          `}
+          onClick={() => {
+            downloadBase64File(
+              URL.createObjectURL(processedImage),
+              `synape_${uploadedImage.name?.split('.')[0] ?? 'random'}.jpg`
+            );
+          }}
+        >
+          Download
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function downloadBase64File(dataStr, fileName) {
+  const downloadLink = document.createElement('a');
+  downloadLink.href = dataStr;
+  downloadLink.download = fileName;
+  downloadLink.click();
+  console.log('evolving into a synape');
+}

packages/synapse-interface/pages/returntomonke/PfpGeneratorCard.tsx

@@ -0,0 +1,20 @@
+import Card from '@tw/Card'
+
+import ImageUploader from './ImageUploader'
+
+export default function PfpGeneratorCard() {
+  return (
+    <Card
+      title={
+        <>
+          Choose Synapse
+        </>
+      }
+      divider={false}
+      className="rounded-xl min-w-[380px]"
+      titleClassName="text-center text-white text-opacity-50 font-normal py-2"
+    >
+      <ImageUploader />
+    </Card>
+  )
+}

packages/synapse-interface/pages/returntomonke/index.tsx

@@ -0,0 +1,55 @@
+import Grid from '@tw/Grid'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo, useState } from 'react'
+import { useAccount, useNetwork } from 'wagmi'
+import { DEFAULT_FROM_CHAIN } from '@/constants/swap'
+import { LandingPageWrapper } from '@layouts/LandingPageWrapper'
+import StandardPageContainer from '@layouts/StandardPageContainer'
+
+import PfpGeneratorCard from './PfpGeneratorCard'
+
+const ReturnToMonkePage = () => {
+  const { address: currentAddress } = useAccount()
+  const { chain } = useNetwork()
+  const [connectedChainId, setConnectedChainId] = useState(0)
+  const [address, setAddress] = useState(undefined)
+
+  const router = useRouter()
+
+  useEffect(() => {
+    setConnectedChainId(chain?.id ?? DEFAULT_FROM_CHAIN)
+  }, [chain])
+
+  useEffect(() => {
+    setAddress(currentAddress)
+  }, [currentAddress])
+  return (
+    <LandingPageWrapper>
+      <StandardPageContainer
+        connectedChainId={connectedChainId}
+        address={address}
+      >
+        <div className="flex justify-between">
+          <div>
+            <div className="text-2xl text-white">
+              Generate Synaptic Profile Picture
+            </div>
+          </div>
+        </div>
+        <div className="py-6">
+          <Grid
+            cols={{ xs: 1 }}
+            gap={6}
+            className="justify-center px-2 py-16 sm:px-6 md:px-8"
+          >
+            <div className="pb-3 place-self-center">
+              <PfpGeneratorCard />
+            </div>
+          </Grid>
+        </div>
+      </StandardPageContainer>
+    </LandingPageWrapper>
+  )
+}
+
+export default ReturnToMonkePage