Merge remote-tracking branch 'origin/develop' into develop

.gitmodules

@@ -11,3 +11,7 @@
 	url = [email protected]:golemfactory/golem-sdk-task-executor.git
 	branch = pociej/deposit
 
+[submodule "yagna"]
+	path = yagna
+	url = [email protected]:golemfactory/yagna.git
+  branch = js-sdk-deposit-poc

backend/src/index.ts

@@ -1,5 +1,3 @@
 import { startupFastifyServer } from "./fastify.js";
 import "./di.js";
-
-console.log("process", process.env);
 startupFastifyServer();

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}`)

backend/src/services/yagna/service.ts

@@ -11,9 +11,11 @@ export class Yagna {
   private YagnaConfig: { appKey: string; apiUrl: string };
   private lastDebitNoteEventTimestamp: string = new Date().toISOString();
   private lastInvoiceEventTimestamp: string = new Date().toISOString();
+
   constructor(YagnaConfig: { appKey: string; apiUrl: string }) {
     this.YagnaConfig = YagnaConfig;
     this.debitNoteEvents = new Subject();
+    console.log("Yagna config", YagnaConfig);
     const paymentClient = new YaTsClient.PaymentApi.Client({
       BASE: `${YagnaConfig.apiUrl}/payment-api/v1`,
       HEADERS: {

deploy/docker-compose.yml

@@ -45,7 +45,7 @@ services:
   # yagna service
   yagna:
     build:
-      context: ../yagna
+      context: ./yagna
       dockerfile: Dockerfile
       args:
         - YAGNA_VERSION=pre-rel-v0.15.0-deposits-beta1
@@ -81,4 +81,4 @@ services:
     depends_on:
       - mongo
     ports:
-      - "8888:8081"
+      - "8888:8081"

docker-compose.yml

@@ -49,7 +49,7 @@ services:
   # yagna service
   yagna:
     build:
-      context: ./yagna
+      context: ./deploy/yagna
       dockerfile: Dockerfile
       args:
         - YAGNA_VERSION=pre-rel-v0.15.0-deposits-beta1
@@ -85,4 +85,4 @@ services:
     depends_on:
       - mongo
     ports:
-      - "8888:8081"
+      - "8888:8081"

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "@tanstack/react-query": "^5.25.0",
     "@types/ramda": "^0.29.11",
     "@uidotdev/usehooks": "^2.4.1",
@@ -23,6 +24,7 @@
     "react-daisyui": "^5.0.0",
     "react-dom": "^18.2.0",
     "swr": "^2.2.5",
+    "ts-pattern": "^5.1.1",
     "viem": "~2.7.19",
     "wagmi": "^2.5.7"
   },

frontend/src/App.css

@@ -1,42 +1,12 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+#app:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url('https://assets-global.website-files.com/62446d07873fde065cbcb8d5/657201ccae29e25f6b000267_6a72402a-185c-4223-930f-6032853bd089%201.jpg');
+  background-size: cover;
+}
+
+#app {
+  position: relative;
+}

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,6 +16,8 @@ function BlockChainLogin() {
 }
 
 import { SWRConfig } from "swr";
+import { Home } from "components/home";
+import { UserProvider } from "components/providers/userProvider";
 
 function localStorageProvider() {
   // When initializing, we restore the data from `localStorage` into a map.
@@ -42,27 +43,22 @@ function Deposit() {
 function App() {
   return (
     //@ts-ignore
-    <SWRConfig>
-      <BlockchainProvider>
-        <SnackbarProvider autoHideDuration={50000}>
-          <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-12 grid grid-cols-2">
-              <w3m-button />
-
-              <BlockChainLogin />
-            </div>
-
-            <div className="col-span-4 col-start-5">
-              <Deposit />
-            </div>
-            <div className="col-span-4 col-start-5">
-              <FileUploader />
-              <ScanResults />
-            </div>
-          </div>
-        </SnackbarProvider>
-      </BlockchainProvider>
-    </SWRConfig>
+    <div data-theme="golem" className="font-kanit">
+      <SWRConfig>
+        <BlockchainProvider>
+          <SnackbarProvider autoHideDuration={50000}>
+            <UserProvider>
+              <div
+                id="app"
+                className="grid grid-cols-12 gap-4 h-screen overflow-hidden"
+              >
+                <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/components/RegisterButton.tsx

@@ -0,0 +1,101 @@
+import { Button, Card, Loading } from "react-daisyui";
+import { useSignNonce } from "hooks/useSignNonce";
+import { useLogin } from "hooks/useLogin";
+import { useAccount } from "wagmi";
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useDebounce } from "hooks/useDebounce";
+export const RegisterButton = ({ isVisible }: { isVisible: boolean }) => {
+  const { register, signature, message, isPending } = useSignNonce();
+  const { address: walletAddress } = useAccount();
+  const { login, tokens, isWaiting } = useLogin();
+
+  if (!walletAddress) {
+    throw new Error("Wallet address not found");
+  }
+
+  const debouncedPending = useDebounce(
+    isPending,
+    new Map([
+      [true, 0],
+      [false, 1000],
+    ])
+  );
+
+  useEffect(() => {
+    if (signature) {
+      login({
+        walletAddress,
+        messageSignature: signature,
+        message,
+      });
+    }
+  }, [signature]);
+
+  useEffect(() => {
+    if (tokens) {
+      localStorage.setItem("accessToken", tokens.accessToken);
+      localStorage.setItem("refreshToken", tokens.refreshToken);
+    }
+  }, [tokens]);
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, scale: 0.3 }}
+          transition={{ duration: 0.5 }}
+        >
+          <Card
+            style={{
+              borderColor: "#ffffff14",
+              fontFamily: "Kanit-Light",
+              backgroundColor: "#0000005b",
+              scale: "1.2",
+            }}
+          >
+            <Card.Body>
+              {/* <Card.Title tag="h2">Log in</Card.Title> */}
+              <Card.Body>
+                Login to service with your wallet address to prove your wallet
+                ownership.
+              </Card.Body>
+
+              <Card.Actions className="justify-end">
+                <Button
+                  onClick={() => {
+                    register({ walletAddress });
+                  }}
+                  className="bg-primary !text-white border-none text-lg font-light "
+                  style={{
+                    backgroundColor: "#181ea9a6",
+                  }}
+                >
+                  {isWaiting || debouncedPending ? (
+                    <Loading variant="infinity" />
+                  ) : (
+                    "Register in service"
+                  )}
+                </Button>{" "}
+              </Card.Actions>
+            </Card.Body>
+          </Card>
+        </motion.div>
+      )}
+    </AnimatePresence>
+    //   <Button
+    //     onClick={() => {
+    //       register({ walletAddress });
+    //     }}
+    //     className="bg-primary !text-white border-none text-lg font-light "
+    //     style={{
+    //       backgroundColor: "#181ea9a6",
+    //     }}
+    //   >
+    //     Register in service
+    //   </Button>
+    // );
+  );
+};

frontend/src/components/allowace.tsx

@@ -0,0 +1,36 @@
+import { motion } from "framer-motion";
+import { useUser } from "hooks/useUser";
+import { AllowanceSummary } from "./allowanceSummary";
+import { ApproveForm } from "./approveForm";
+
+const variants = {
+  onTop: {
+    top: "205px",
+    left: "30px",
+  },
+  onCenter: {
+    top: "30vh",
+  },
+};
+
+export const Allowance = () => {
+  const { user } = useUser();
+
+  return (
+    <motion.div
+      style={{
+        position: "absolute",
+      }}
+      animate={user.hasEnoughAllowance() ? "onTop" : "onCenter"}
+      variants={variants}
+      transition={{ duration: 0.5 }}
+    >
+      <ApproveForm
+        isVisible={user.hasKnownAllowance() && !user.hasEnoughAllowance()}
+      />
+      <AllowanceSummary
+        isVisible={user.hasKnownAllowance() && user.hasEnoughAllowance()}
+      />
+    </motion.div>
+  );
+};