Escrow page improvements (#555)

* escrow page improvements

* deposit/withdraw funds

* single request for fetch nodes by addresses

* remove unused class

* change endAdornment

* fix comment

* add terms operator

* add amount placeholder

* refactor api call

Author: andreip136

src/components/button/copy-button.tsx

@@ -32,7 +32,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
     <Button
       className={className}
       color={color}
-      contentBefore={copied ? <CheckIcon /> : <ContentCopyIcon />}
+      contentBefore={copied ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
       onClick={handleClick}
       size={size}
       variant={variant}

src/components/escrow/authorization-form.tsx

@@ -60,6 +60,7 @@ const AuthorizationForm = ({
           name="maxLockedAmount"
           onBlur={formik.handleBlur}
           onChange={formik.handleChange}
+          size="sm"
           step="any"
           type="number"
           value={formik.values.maxLockedAmount}
@@ -73,16 +74,19 @@ const AuthorizationForm = ({
           name="maxLockSeconds"
           onBlur={formik.handleBlur}
           onChange={formik.handleChange}
+          size="sm"
           type="number"
           value={formik.values.maxLockSeconds}
         />
         <Input
-          endAdornment="locks"
+          endAdornment="jobs"
           errorText={formik.touched.maxLockCount && formik.errors.maxLockCount ? formik.errors.maxLockCount : undefined}
-          label="Max lock count"
+          hint="Max lock count"
+          label="Max concurrent jobs"
           name="maxLockCount"
           onBlur={formik.handleBlur}
           onChange={formik.handleChange}
+          size="sm"
           type="number"
           value={formik.values.maxLockCount}
         />

src/components/escrow/create-authorization-modal.tsx

@@ -89,14 +89,15 @@ const CreateAuthorizationModal = ({
         setFieldError('nodeId', 'Node not found');
         return null;
       }
-      const consumer = node.computeEnvironments?.environments?.find((env) => env.consumerAddress)?.consumerAddress;
+      const consumer =
+        node.address ?? node.computeEnvironments?.environments?.find((env) => env.consumerAddress)?.consumerAddress;
       if (!consumer) {
-        setFieldError('nodeId', 'Node has no compute environment with a consumer address');
+        setFieldError('nodeId', 'Could not resolve ETH address for this node');
         return null;
       }
       return consumer;
     } catch (error) {
-      console.error('Error resolving node consumer address: ', error);
+      console.error('Could not resolve ETH address for this node: ', error);
       setFieldError('nodeId', 'Failed to fetch node');
       return null;
     }
@@ -114,11 +115,12 @@ const CreateAuthorizationModal = ({
       <form className={styles.root} onSubmit={formik.handleSubmit}>
         <Input
           errorText={formik.touched.nodeId && formik.errors.nodeId ? formik.errors.nodeId : undefined}
-          label="Node ID"
+          label="Node peer ID"
           name="nodeId"
           onBlur={formik.handleBlur}
           onChange={formik.handleChange}
           placeholder="Node peer ID"
+          size="sm"
           type="text"
           value={formik.values.nodeId}
         />
@@ -134,6 +136,7 @@ const CreateAuthorizationModal = ({
             name="maxLockedAmount"
             onBlur={formik.handleBlur}
             onChange={formik.handleChange}
+            size="sm"
             step="any"
             type="number"
             value={formik.values.maxLockedAmount}
@@ -147,18 +150,21 @@ const CreateAuthorizationModal = ({
             name="maxLockSeconds"
             onBlur={formik.handleBlur}
             onChange={formik.handleChange}
+            size="sm"
             type="number"
             value={formik.values.maxLockSeconds}
           />
           <Input
-            endAdornment="locks"
+            endAdornment="jobs"
             errorText={
               formik.touched.maxLockCount && formik.errors.maxLockCount ? formik.errors.maxLockCount : undefined
             }
-            label="Max lock count"
+            hint="Max lock count"
+            label="Max concurrent jobs"
             name="maxLockCount"
             onBlur={formik.handleBlur}
             onChange={formik.handleChange}
+            size="sm"
             type="number"
             value={formik.values.maxLockCount}
           />

src/components/escrow/edit-authorization-modal.tsx

@@ -1,8 +1,11 @@
 import Button from '@/components/button/button';
+import CopyButton from '@/components/button/copy-button';
 import AuthorizationForm from '@/components/escrow/authorization-form';
+import styles from '@/components/escrow/escrow-token-panel.module.css';
 import Modal from '@/components/modal/modal';
 import { useAuthorizeTokens } from '@/lib/use-authorize-tokens';
 import { EscrowSpenderInfo } from '@/lib/use-escrow-data';
+import { formatWalletAddress } from '@/utils/formatters';
 
 type EditAuthorizationModalProps = {
   isOpen: boolean;
@@ -17,7 +20,36 @@ const EditAuthorizationModal = ({ isOpen, onClose, onSuccess, spender }: EditAut
   const { authorizations, tokenAddress, tokenSymbol } = spender;
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Edit authorization" width="sm">
+    <Modal isOpen={isOpen} onClose={onClose} title="Edit authorization per node" width="sm">
+      <div>
+        <h4>{spender.nodeFriendlyName ?? (spender.nodeId ? 'Unnamed node' : 'Unknown node')}</h4>
+        {spender.nodeId && (
+          <div className={styles.copyRow}>
+            <strong>Peer ID:</strong>
+            <span className={styles.hash}>{formatWalletAddress(spender.nodeId)}</span>
+            <CopyButton
+              color="accent1"
+              contentToCopy={spender.nodeId}
+              label=""
+              labelCopied=""
+              size="sm"
+              variant="transparent"
+            />
+          </div>
+        )}
+        <div className={styles.copyRow}>
+          <strong>ETH Address:</strong>
+          <span className={styles.hash}>{formatWalletAddress(spender.spender)}</span>
+          <CopyButton
+            color="accent1"
+            contentToCopy={spender.spender}
+            label=""
+            labelCopied=""
+            size="sm"
+            variant="transparent"
+          />
+        </div>
+      </div>
       <AuthorizationForm
         initialValues={{
           maxLockedAmount: Number(authorizations.maxLockedAmount),

src/components/escrow/escrow-token-panel.module.css

@@ -22,18 +22,6 @@
   }
 }
 
-.tokenHeader {
-  display: flex;
-  align-items: center;
-}
-
-.tokenSymbol {
-  display: block;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1.1;
-}
-
 .overline {
   display: block;
   font-size: 12px;
@@ -111,16 +99,23 @@
   gap: 10px;
 }
 
-.fundRow {
-  display: flex;
-}
-
 .fundInput {
-  flex: 1;
+  width: 100%;
   min-width: 0;
 }
 
+.fundButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
+}
+
 .fundButton {
+  flex: 1;
   white-space: nowrap;
 }
 
@@ -147,31 +142,32 @@
   gap: 10px;
 }
 
-.authSectionTitle {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
 .createAuthButton {
   margin-left: auto;
 }
 
 .authHeader {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 12px;
 }
 
-.authSpender {
-  font-size: 14px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.copyRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0px 8px;
   white-space: nowrap;
+  font-size: 13px;
+
+  .hash {
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .statsGrid {
@@ -357,10 +353,3 @@
   font-size: 17px;
   font-weight: 700;
 }
-
-.noAuthDesc {
-  font-size: 14px;
-  color: var(--text-secondary);
-  max-width: 400px;
-  line-height: 1.5;
-}