feat: create userProvider

#49

backend/src/services/file/service.ts

@@ -173,6 +173,7 @@ export const fileService = (
       //TODO handle errors and timeouts
       //but it seems that there was no try to find another one
       //this is task executor abstraction so it should handle it for me
+
       const results = await worker.context
         .beginBatch()
         .uploadFile(`${DIR_NAME}${fileName}`, `/golem/workdir/${fileName}`)

frontend/src/App.tsx

@@ -1,11 +1,10 @@
 import { useAccount } from "wagmi";
 import "./App.css";
-import { RegisterButton } from "./RegisterButton";
-import { BlockchainProvider } from "./blockchainProvider";
+import { RegisterButton } from "./components/RegisterButton";
+import { BlockchainProvider } from "./components/providers/blockchainProvider";
 import { SnackbarProvider } from "notistack";
 import { DepositForm } from "./DepositForm";
-import { FileUploader } from "./Uploader";
-import { ScanResults } from "./ScanResults";
+
 function BlockChainLogin() {
   const { address: walletAddress } = useAccount();
   const loginToken = localStorage.getItem("accessToken");
@@ -17,8 +16,8 @@ function BlockChainLogin() {
 }
 
 import { SWRConfig } from "swr";
-import { ConnectWallet } from "components/connectWallet";
 import { Home } from "components/home";
+import { UserProvider } from "components/providers/userProvider";
 
 function localStorageProvider() {
   // When initializing, we restore the data from `localStorage` into a map.
@@ -44,21 +43,25 @@ function Deposit() {
 function App() {
   return (
     //@ts-ignore
-    <SWRConfig>
-      <BlockchainProvider>
-        <SnackbarProvider autoHideDuration={50000}>
-          <div
-            className="grid grid-cols-12 gap-4 h-screen overflow-hidden"
-            style={{
-              backgroundImage: "url('background.jpg')",
-              backgroundSize: "cover",
-            }}
-          >
-            <Home />
-          </div>
-        </SnackbarProvider>
-      </BlockchainProvider>
-    </SWRConfig>
+    <div data-theme="golem" className="font-kanit">
+      <SWRConfig>
+        <BlockchainProvider>
+          <SnackbarProvider autoHideDuration={50000}>
+            <UserProvider>
+              <div
+                className="grid grid-cols-12 gap-4 h-screen overflow-hidden"
+                style={{
+                  backgroundImage: "url('background.jpg')",
+                  backgroundSize: "cover",
+                }}
+              >
+                <Home />
+              </div>
+            </UserProvider>
+          </SnackbarProvider>
+        </BlockchainProvider>
+      </SWRConfig>
+    </div>
   );
 }
 

frontend/src/Uploader.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useProcessFile } from "hooks/useUploadFile";
 import { Button } from "react-daisyui";
-import { RegisterButton } from "./RegisterButton";
+import { RegisterButton } from "./components/RegisterButton";
 export const FileUploader = () => {
   const [files, setFiles] = useState<FileList | null>(null);
   const { upload } = useProcessFile();

frontend/src/RegisterButton.tsx → frontend/src/components/RegisterButton.tsx

@@ -3,6 +3,7 @@ import { useSignNonce } from "hooks/useSignNonce";
 import { useLogin } from "hooks/useLogin";
 import { useAccount } from "wagmi";
 import { useEffect } from "react";
+import { motion } from "framer-motion";
 
 export const RegisterButton = () => {
   const { register, signature, message } = useSignNonce();
@@ -29,13 +30,23 @@ export const RegisterButton = () => {
       localStorage.setItem("refreshToken", tokens.refreshToken);
     }
   }, [tokens]);
+
+  const MotionButton = motion(Button);
+
   return (
-    <Button
+    <MotionButton
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
       onClick={() => {
         register({ walletAddress });
       }}
+      className="bg-primary !text-white border-none text-lg font-light absolute"
+      style={{
+        top: "50vh",
+      }}
     >
-      Register
-    </Button>
+      Register in service
+    </MotionButton>
   );
 };

frontend/src/components/connectWallet.tsx

@@ -1,7 +1,33 @@
+import { motion } from "framer-motion";
+import { useAccount } from "wagmi";
+
+const variants = {
+  onTop: {
+    top: "5vh",
+    left: "5vw",
+  },
+  onCenter: {
+    top: "50vh",
+  },
+};
 export const ConnectWallet = () => {
+  const { isConnected } = useAccount();
   return (
-    <div className="w-screen h-screen flex justify-center items-center">
-      <w3m-button></w3m-button>
-    </div>
+    <motion.div
+      style={{
+        position: "absolute",
+      }}
+      initial={{ top: "50vh" }}
+      animate={isConnected ? "onTop" : "onCenter"}
+      variants={variants}
+      transition={{ duration: 0.5 }}
+    >
+      <w3m-button
+        //@ts-ignore
+        style={{
+          scale: "1.4",
+        }}
+      ></w3m-button>
+    </motion.div>
   );
 };

frontend/src/components/home.tsx

@@ -2,17 +2,22 @@ import { useUser } from "hooks/useUserStatus";
 import { match, P } from "ts-pattern";
 import { UserState } from "types/user";
 import { ConnectWallet } from "./connectWallet";
+import { RegisterButton } from "./RegisterButton";
+import { LoadingSpinner } from "./loadingSpinner";
 
 export function Home() {
   const user = useUser();
+  console.log(user);
   return (
-    <div>
+    <div className="w-screen h-screen flex justify-center ">
+      <ConnectWallet />
+
       {match(user.state)
-        .with(UserState.DISCONNECTED, () => <ConnectWallet />)
-        .with(UserState.CONNECTED, () => <button>Register</button>)
+        .with(UserState.CONNECTED, () => <RegisterButton />)
         .with(UserState.REGISTERED, () => <button>Approve</button>)
         .with(UserState.GRANTED, () => <div>Connected and approved</div>)
-        .exhaustive()}
+        .with(UserState.LOADING, () => <LoadingSpinner />)
+        .otherwise(() => "")}
     </div>
   );
 }

frontend/src/components/loadingSpinner/index.tsx

@@ -0,0 +1 @@
+export * from './loadingSpinner'

frontend/src/components/loadingSpinner/loadingSpinner.module.css

@@ -0,0 +1,15 @@
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: .2;
+    transform: scale(0.5);
+  }
+}
+
+.pulsar {
+  animation: pulse 1s infinite cubic-bezier(0.4, 0, 0.6, 1);
+}

frontend/src/components/loadingSpinner/loadingSpinner.tsx

@@ -0,0 +1,18 @@
+import style from './loadingSpinner.module.css'
+export const LoadingSpinner = () => {
+  return (
+    <div className="flex justify-center items-center h-screen">
+      <div className="relative">
+        <div className="animate-spin rounded-full h-24 w-24 border-t-4 border-b-4 border-golemblue"></div>
+      </div>
+    </div>
+  )
+}
+
+export const PulsingDotLoader = ({ className }: { className: string }) => {
+  return (
+    <div
+      className={`${style.pulsar} rounded-full ${className} bg-golemblue`}
+    ></div>
+  )
+}

frontend/src/blockchainProvider.tsx → frontend/src/components/providers/blockchainProvider.tsx

@@ -2,40 +2,37 @@ import { createWeb3Modal } from "@web3modal/wagmi/react";
 import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
 
 import { WagmiProvider } from "wagmi";
-import { holesky, mainnet } from "viem/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PropsWithChildren } from "react";
-
+import { config } from "config";
 const queryClient = new QueryClient();
 
-const projectId = "20bd2ed396d80502980b6d2a3fb425f4";
-
 const metadata = {
   name: "Web3Modal",
   description: "Web3Modal Example",
   url: "https://web3modal.com",
   icons: ["./logo.svg"],
 };
 
-const chains = [holesky, mainnet] as const;
-const config = defaultWagmiConfig({
-  chains,
-  projectId,
+const wagmiConfig = defaultWagmiConfig({
+  chains: config.supportedChains as const,
+  projectId: config.projectId,
   metadata,
 });
 
 createWeb3Modal({
-  wagmiConfig: config,
-  projectId,
+  wagmiConfig,
+  projectId: config.projectId,
   themeVariables: {
-    "--w3m-accent": "#FFD700",
-    "--w3m-border-radius-master": "5",
+    "--w3m-font-family": "Kanit-Light",
+    "--w3m-accent": "#181EA9",
+    "--w3m-border-radius-master": "1px",
   },
 });
 
 export function BlockchainProvider({ children }: PropsWithChildren) {
   return (
-    <WagmiProvider config={config}>
+    <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
   );