Add % sign into value column

inc4 · Jul 14, 2024 · 3eced6b · 3eced6b
1 parent ccdb42f
commit 3eced6b
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 12 deletions.
diff --git a/frontend/app/backups/page.jsx b/frontend/app/backups/page.jsx
@@ -35,7 +35,7 @@ import useUniversalAccountInfo from '@/hooks/useUniversalAccountInfo';
 
 // const moduleAddress = '0xbDa1dE70eAE1A18BbfdCaE95B42b5Ff6d3352492';
 // const ownerAddress = '0xED9586AD3a6A512ce5c2d0C6a5bf8972c00137e2';
-const ownerAddress = '0x90382784cFa7bE80Eb4107C0640e6D9195823B3B';
+// const ownerAddress = '0x90382784cFa7bE80Eb4107C0640e6D9195823B3B';
 
 // const getBackupsAbi = [
 //   {
@@ -85,20 +85,24 @@ const ownerAddress = '0x90382784cFa7bE80Eb4107C0640e6D9195823B3B';
 //     console.error('Error:', error);
 //   });
 
+import { useRouter } from 'next/navigation'
+
 console.log('render');
 
 export default function BackUpsPage() {
   const { isModuleSupported, isWingmanDeployed, smartAccountClient } =
     useSmartAccountClient();
-  const { address } = useUniversalAccountInfo();
+  // const { address } = useUniversalAccountInfo();
   const [backupsList, setBackupsList] = useState([]);
   const [detailedBackupsList, setDetailedBackupsList] = useState([]);
   const [combinedBackups, setCombinedBackups] = useState([]);
 
+  const { setSafeInfo, safeInfo } = useSafeInfoContextProvider();
+
   useEffect(() => {
-    console.log('ADDRESS', address);
-    if (!address) {
-      getBackups(ownerAddress)
+    console.log('ADDRESS', safeInfo.address);
+    if (!safeInfo.address) {
+      getBackups(safeInfo.address)
         .then((backups) => {
           setBackupsList(backups);
           console.log('Backups:', backups);
@@ -115,7 +119,7 @@ export default function BackUpsPage() {
         try {
           const detailedBackups = await Promise.all(
             backupsList.map((backupName) =>
-              getBackup(ownerAddress, backupName),
+              getBackup(safeInfo.address, backupName),
             ),
           );
 
@@ -168,7 +172,7 @@ export default function BackUpsPage() {
             <div className="">
               {Array.isArray(user.beneficiaries)
                 ? user.beneficiaries.map((item) => (
-                    <p key={item.account}>{item.percentage}</p>
+                    <p key={item.account}>{item.percentage}%</p>
                   ))
                 : user.beneficiaries}
             </div>
@@ -201,16 +205,17 @@ export default function BackUpsPage() {
     }
   }, []);
 
+  const router = useRouter();
+
   return (
     <div>
       <div className="flex justify-between pb-8">
         <h1 className=" content-center text-lg font-semibold">Your Backups</h1>
         <Button
-          as={Link}
           className="font-semibold"
           color="primary"
-          href={'/create'}
           size="lg"
+          onClick={() => router.push('/create')}
         >
           Create Backup
         </Button>

diff --git a/frontend/app/create/page.js b/frontend/app/create/page.js
@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@nextui-org/button';
+import { Input } from '@nextui-org/input';
+import { DatePicker } from '@nextui-org/date-picker';
+import { Switch } from '@nextui-org/switch';
+import { DateValue, parseDate } from '@internationalized/date';
+
+import CustomTooltip from '@/components/CustomTooltip';
+import {walletClientToSmartAccountSigner} from "permissionless";
+import {useWalletClient} from "wagmi";
+
+import { useSafeInfoContextProvider } from "@/context/SafeInfoContextProvider";
+import {createBackup} from "../../services/createBackup";
+
+export default function CreatePage() {
+  const [valueName, setValueName] = useState('');
+  const [isFixed, setIsFixed] = useState(true);
+  const [valueReceiver, setValueReceiver] = useState('');
+  const [valueNumber, setValueNumber] = useState('');
+  const [valueDate, setValueDate] = useState(
+    parseDate('2024-07-14'),
+  );
+
+  const { data: walletClient } = useWalletClient();
+
+  const { setSafeInfo, safeInfo } = useSafeInfoContextProvider();
+
+  async function handleCreateBackup() {
+    const smartAccountSigner =
+        await walletClientToSmartAccountSigner(walletClient);
+
+    console.log(smartAccountSigner);
+
+    const date = valueDate.toDate();
+    const seconds = date.getTime() / 1000;
+
+    console.log('safe info', safeInfo)
+
+    console.log({
+      smartAccountSigner,
+      valueName,
+      seconds,
+      valueReceiver,
+        number: +valueNumber
+    })
+
+    createBackup(smartAccountSigner, safeInfo.address, valueName, seconds, valueReceiver, +valueNumber)
+        .then(() => console.log('success'))
+  }
+
+  return (
+    <div className="flex flex-col gap-8 m-auto w-[600px]">
+      <h1 className="text-center font-semibold text-lg">Create Backup</h1>
+      {/* ================= */}
+      <div className="">
+        <CustomTooltip
+          labelText="Name"
+          tooltipContentText="Write the name of your backup for smooth further navigation.
+            Example: Frodo's Journey, July 2024. "
+        />
+        <Input
+          color="primary"
+          placeholder="Name of Backup"
+          value={valueName}
+          onValueChange={setValueName}
+        />
+      </div>
+
+      <div className="">
+        <div className="flex gap-2">
+          <div className=" w-4/6">
+            <CustomTooltip
+              labelText="Receiver"
+              tooltipContentText="Enter the receiver's wallet address and make sure it's on the same network as your Safe wallet. Add extra if needed. Specify the amount of funds you would like to grant: use a fixed amount or % of your balance."
+            />
+          </div>
+          <div className="flex justify-between font-semibold w-2/6 pb-2">
+            Value
+            <div className="flex">
+              %
+              <Switch
+                className="pl-2"
+                color="default"
+                isSelected={isFixed}
+                size="sm"
+                onValueChange={setIsFixed}
+              />
+              Fixed
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <div className="w-4/6">
+            <Input
+              color="primary"
+              placeholder="Name of Backup"
+              value={valueReceiver}
+              onValueChange={setValueReceiver}
+            />
+          </div>
+          <div className="w-2/6">
+            <Input
+              color="primary"
+              placeholder="Name of Backup"
+              type="number"
+              value={valueNumber}
+              onValueChange={setValueNumber}
+            />
+          </div>
+          <div />
+        </div>
+      </div>
+
+      <div className="">
+        <CustomTooltip
+          labelText="Initiation Date"
+          tooltipContentText="On the initiation date, the recovery process will be executed and your backup will be transfered. Input data wisely, as the contract execution is unstoppable. Before specified date, you can edit or delete the backup."
+        />
+        <DatePicker
+          className=""
+          color="primary"
+          value={valueDate}
+          onChange={setValueDate}
+        />
+      </div>
+      {/* ================= */}
+      <div className="text-center">
+        <Button
+          className="font-semibold"
+          color="primary"
+          size="lg"
+          onClick={() => handleCreateBackup()}
+        >
+          Create Backup
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/page.js b/frontend/app/page.js
@@ -21,6 +21,8 @@ import {
   prepareSmartAccountClient,
 } from "@/services/prepareSmartAccountClient";
 
+import { useRouter } from 'next/navigation'
+
 export default function Home() {
   const { connectedTo, address } = useUniversalAccountInfo();
 
@@ -225,17 +227,17 @@ function StageThree() {
 }
 
 function StageFour() {
+  const router = useRouter()
   return (
     <>
       {/* eslint-disable-next-line react/no-unescaped-entities */}
       <h1 className="font-black text-[50px]">You're all set</h1>
 
       <Button
         showAnchorIcon
-        as={Link}
         color="primary"
-        href={"/backup"}
         variant="solid"
+        onClick={() => router.push('/backups')}
       >
         Go to dashboard
       </Button>

diff --git a/frontend/components/AccountRadioGroup.js b/frontend/components/AccountRadioGroup.js
@@ -13,7 +13,7 @@ export default function AccountRadioGroup({ safes, onChange }) {
             className=" py-2 bg-primary-200"
             isDisabled={!isCompatible}
             size="md w-full"
-            onClick={onChange}
+            onClick={() => onChange(safe.address)}
           >
             <span className="flex flex-col text-left py-8">
               <span>{safe.address}</span>

diff --git a/frontend/context/SafeInfoContextProvider.js b/frontend/context/SafeInfoContextProvider.js
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useContext, useEffect } from "react";
 import { useWalletClient } from "wagmi";
 import { walletClientToSmartAccountSigner } from "permissionless";
@@ -28,6 +30,10 @@ export function SafeInfoContextProvider({ children }) {
 
   const { data: walletClient } = useWalletClient();
 
+  useEffect(() => {
+    console.log('safe info', safeInfo);
+  }, [safeInfo])
+
   useEffect(() => {
     if (!walletClient) return;
     (async () => {

diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
 		"lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix"
 	},
 	"dependencies": {
+		"@internationalized/date": "^3.5.4",
 		"@nextui-org/button": "2.0.34",
 		"@nextui-org/code": "2.0.29",
 		"@nextui-org/date-picker": "^2.1.2",