Merge pull request #554 from oceanprotocol/feat/contract-dropdown

Escrow contract switch

Author: bogdanfazakas

README.md

@@ -98,9 +98,10 @@ Create a `.env.local` file (or configure your deployment environment) with the f
 
 ### App
 
-| Variable              | Description                                                                                                                  |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_APP_ENV` | `"development"` or `"production"`. Controls which backend URLs are used and which chain tokens are on (ETH Sepolia or BASE). |
+| Variable                             | Description                                                                                                                                                          |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_APP_ENV`                | `"development"` or `"production"`. Controls which backend URLs are used and which chain tokens are on (ETH Sepolia or BASE).                                         |
+| `NEXT_PUBLIC_LEGACY_ESCROW_ADDRESS`  | Optional. Address of the previous Escrow deployment on Base. When set, the escrow page shows a contract selector so users can view and withdraw funds left in it. Ignored on Sepolia. |
 
 ### Alchemy
 

src/components/escrow/escrow-page.module.css

@@ -3,6 +3,28 @@
   flex-direction: column;
 }
 
+.contractSelector {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.contractSelect {
+  width: 350px;
+  max-width: 100%;
+}
+
+.hint {
+  color: var(--text-secondary);
+  padding: 0 16px;
+}
+
+/* Line the chip up with the select control, below its label. */
+.legacyChip {
+  margin-top: 38px;
+}
+
 .panels {
   display: flex;
   flex-direction: column;

src/components/escrow/escrow-page.tsx

@@ -1,13 +1,22 @@
+import Card from '@/components/card/card';
 import Container from '@/components/container/container';
 import EscrowTokenPanel from '@/components/escrow/escrow-token-panel';
+import LegacyEscrowBanner from '@/components/homepage/legacy-escrow-banner';
+import Select from '@/components/input/select';
 import SectionTitle from '@/components/section-title/section-title';
+import { EscrowContractVersion, LEGACY_ESCROW_ADDRESS } from '@/constants/escrow';
 import { useEscrowData } from '@/lib/use-escrow-data';
+import { formatWalletAddress } from '@/utils/formatters';
 import { CircularProgress } from '@mui/material';
 import classNames from 'classnames';
+import { useState } from 'react';
 import styles from './escrow-page.module.css';
 
 const EscrowPage = () => {
-  const { tokens, spenders, loading, reload } = useEscrowData();
+  const [contractVersion, setContractVersion] = useState<EscrowContractVersion>('current');
+  const isLegacy = contractVersion === 'legacy';
+  const escrowAddress = isLegacy ? LEGACY_ESCROW_ADDRESS : undefined;
+  const { tokens, spenders, loading, reload } = useEscrowData(escrowAddress);
 
   return (
     <Container className="pageRoot">
@@ -17,6 +26,31 @@ const EscrowPage = () => {
         subTitle="Deposit and withdraw escrow funds, and manage the spending authorizations used to pay for compute jobs."
       />
       <div className={classNames('pageContentWrapper', styles.content)}>
+        <LegacyEscrowBanner />
+        {LEGACY_ESCROW_ADDRESS && (
+          <Card direction="column" padding="sm" radius="lg" shadow="black" variant="glass-shaded">
+            <div className={styles.contractSelector}>
+              <Select<EscrowContractVersion>
+                className={styles.contractSelect}
+                label="Escrow contract"
+                onChange={(e) => setContractVersion(e.target.value as EscrowContractVersion)}
+                options={[
+                  { label: 'Current contract', value: 'current' },
+                  { label: `Legacy contract (${formatWalletAddress(LEGACY_ESCROW_ADDRESS)})`, value: 'legacy' },
+                ]}
+                value={contractVersion}
+              />
+              {isLegacy && <span className={classNames('chip chipGlass', styles.legacyChip)}>Withdraw only</span>}
+            </div>
+            {isLegacy ? (
+              <div className={styles.hint}>
+                <strong>Viewing the previous escrow deployment.</strong>
+                <br />
+                You can withdraw your funds; deposits and authorization changes are disabled.
+              </div>
+            ) : undefined}
+          </Card>
+        )}
         {loading && tokens.length === 0 ? (
           <CircularProgress className="alignSelfCenter" />
         ) : (
@@ -27,6 +61,7 @@ const EscrowPage = () => {
               );
               return (
                 <EscrowTokenPanel
+                  escrowAddress={escrowAddress}
                   key={token.address}
                   loadingSpenders={loading}
                   onChange={reload}

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

@@ -102,6 +102,25 @@
 .fundInput {
   width: 100%;
   min-width: 0;
+
+  /* Solid background instead of the translucent glass default, so the field reads as editable
+     rather than disabled. */
+  :global(.MuiTextField-root) {
+    background: var(--background-primary);
+  }
+}
+
+/* Token-symbol prefix, separated from the value area so it doesn't read as a pre-filled value. */
+.fundInputSymbol {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding-right: 12px;
+  border-right: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
 }
 
 .fundButtons {
@@ -119,6 +138,12 @@
   white-space: nowrap;
 }
 
+.legacyHint {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
 /* ── Right column ── */
 .right {
   border-left: 1px solid var(--border);