From a282892ce3ddf07e3ed38600d13aac3146c6e82e Mon Sep 17 00:00:00 2001
From: Alex Soong <alexsoong91@gmail.com>
Date: Mon, 23 Oct 2023 15:38:13 -0700
Subject: [PATCH] Minor UI Improvements (#128)

* Hide registration button when user is registered

* Improve styling on position row

* Refetch usdc balance when Swap renders

* Rename deposit to deposits

* Update copy on encrypting venmo ids
---
 client/src/App.tsx                            |  2 +-
 client/src/components/Deposit/PositionRow.tsx | 33 ++++++++-----------
 .../src/components/Deposit/PositionTable.tsx  |  8 ++---
 .../RegistrationForm/ExistingRegistration.tsx |  2 +-
 .../components/Swap/OnRamperIntentTable.tsx   |  9 +++--
 .../src/components/common/AccessoryButton.tsx |  2 +-
 .../src/components/layouts/TopNav/NavItem.tsx |  6 ++--
 .../src/contexts/Balances/BalancesContext.ts  |  1 +
 .../contexts/Balances/BalancesProvider.tsx    |  1 +
 client/src/contexts/Balances/types.ts         |  1 +
 client/src/helpers/tooltips.ts                |  2 +-
 client/src/pages/Swap.tsx                     |  6 ++++
 12 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b0e3863fc..3c0f74a6f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -56,7 +56,7 @@ const App = () => {
               <Routes>
                 <Route path="/" element={<RedirectToSwap />} />
                 <Route path="/swap" element={<Swap />} />
-                <Route path="/deposit" element={<Deposit />} />
+                <Route path="/deposits" element={<Deposit />} />
                 <Route path="/register" element={<Registration />} />
                 <Route path="/permissions" element={<Permissions />} />
                 <Route element={<>Not found</>} />
diff --git a/client/src/components/Deposit/PositionRow.tsx b/client/src/components/Deposit/PositionRow.tsx
index 94762e843..471bf1b3d 100644
--- a/client/src/components/Deposit/PositionRow.tsx
+++ b/client/src/components/Deposit/PositionRow.tsx
@@ -28,8 +28,9 @@ export const PositionRow: React.FC<PositionRowProps> = ({
 }: PositionRowProps) => {
   PositionRow.displayName = "PositionRow";
 
-  const depositRemainingLabel = `${availableDepositAmount} / ${totalDepositAmount}`;
-  const intentAmountLabel = `${intentCount} (${outstandingIntentAmount})`;
+  const depositRemainingLabel = `${availableDepositAmount} USDC`;
+  const intentAmountLabel = `${intentCount} (${outstandingIntentAmount} USDC)`;
+  const originalAmountLabel = `${totalDepositAmount} USDC`
 
   return (
     <Container>
@@ -43,18 +44,21 @@ export const PositionRow: React.FC<PositionRowProps> = ({
             </SummaryLabel>
             
             <SummaryLabel>
-              <SummaryLabelTitle>Outstanding Intents:&nbsp;</SummaryLabelTitle>
+              <SummaryLabelTitle>Outstanding Orders:&nbsp;</SummaryLabelTitle>
               <SummaryLabelValue>{intentAmountLabel}</SummaryLabelValue>
             </SummaryLabel>
+
+            <PercentageLabel>
+              <Label>Conversion Rate:</Label>
+              <Value>{conversionRate}</Value>
+            </PercentageLabel>
+
+            <SummaryLabel>
+              <SummaryLabelTitle>Deposit Amount:&nbsp;</SummaryLabelTitle>
+              <SummaryLabelValue>{originalAmountLabel}</SummaryLabelValue>
+            </SummaryLabel>
           </SummaryLabelsContainer>
         </SummaryLabelsAndIconContainer>
-
-        <FeeLabelsContainer>
-          <PercentageLabel>
-            <Label>Conversion Rate:</Label>
-            <Value>{conversionRate}</Value>
-          </PercentageLabel>
-        </FeeLabelsContainer>
       </PositionDetailsContainer>
 
       <ActionsContainer>
@@ -121,15 +125,6 @@ const SummaryLabelValue = styled.span`
   color: #FFFFFF;
 `;
 
-const FeeLabelsContainer = styled.div`
-  width: 100%; 
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  padding-top: 12px;
-  color: #6C757D;
-`;
-
 const PercentageLabel = styled.div`
   display: flex;
 `;
diff --git a/client/src/components/Deposit/PositionTable.tsx b/client/src/components/Deposit/PositionTable.tsx
index 4579517f8..4a049d80a 100644
--- a/client/src/components/Deposit/PositionTable.tsx
+++ b/client/src/components/Deposit/PositionTable.tsx
@@ -164,16 +164,12 @@ export const PositionTable: React.FC<PositionTableProps> = ({
     }
   }
 
-  function feeAmountString(usdcAmountString: string) {
-    return usdcAmountString + ' USDC';
-  }
-
   return (
     <Container>
       <Column>
         <TitleRow>
           <ThemedText.HeadlineMedium>
-            Deposit
+            Deposits
           </ThemedText.HeadlineMedium>
           {isLoggedIn ? (
             <Button onClick={handleNewPositionClick} height={40}>
@@ -220,7 +216,7 @@ export const PositionTable: React.FC<PositionTableProps> = ({
             <PositionsContainer>
               <PositionCountTitle>
                 <ThemedText.LabelSmall textAlign="left">
-                  Your deposits ({positionsRowData.length})
+                  Your active deposits ({positionsRowData.length})
                 </ThemedText.LabelSmall>
               </PositionCountTitle>
               <Table>
diff --git a/client/src/components/RegistrationForm/ExistingRegistration.tsx b/client/src/components/RegistrationForm/ExistingRegistration.tsx
index 2ffed0728..425014234 100644
--- a/client/src/components/RegistrationForm/ExistingRegistration.tsx
+++ b/client/src/components/RegistrationForm/ExistingRegistration.tsx
@@ -38,7 +38,7 @@ export const ExistingRegistration: React.FC<ExistingRegistrationProps> = ({
           <ThemedText.HeadlineMedium>
             Registration
           </ThemedText.HeadlineMedium>
-          {isLoggedIn ? (
+          {isLoggedIn && !isRegistered ? (
             <Button onClick={handleNewRegistrationClick} height={40}>
                 + Update
             </Button>
diff --git a/client/src/components/Swap/OnRamperIntentTable.tsx b/client/src/components/Swap/OnRamperIntentTable.tsx
index 5f63e3b8f..11a01cce2 100644
--- a/client/src/components/Swap/OnRamperIntentTable.tsx
+++ b/client/src/components/Swap/OnRamperIntentTable.tsx
@@ -24,17 +24,16 @@ export const OnRamperIntentTable: React.FC<OnRamperIntentTableProps> = ({
   onIntentRowClick,
 }) => {
   /*
-    Contexts
-  */
+   * Contexts
+   */
 
  const { currentIntentHash, currentIntent, refetchIntentHash } = useOnRamperIntents();
  const { depositStore } = useLiquidity();
  const { rampAddress, rampAbi } = useSmartContracts();
 
-  
   /*
-    State
-  */
+   * State
+   */
 
   const [intentsRowData, setIntentsRowData] = useState<IntentRowData[]>([]);
 
diff --git a/client/src/components/common/AccessoryButton.tsx b/client/src/components/common/AccessoryButton.tsx
index 06d9808a6..a970d47b7 100644
--- a/client/src/components/common/AccessoryButton.tsx
+++ b/client/src/components/common/AccessoryButton.tsx
@@ -91,7 +91,7 @@ const Container = styled.button<AccessoryButtonProps>`
   border-radius: 18px;
   background: transparent;
   border: 1px solid #adb5bd;
-  padding: 0px 14px;
+  padding: 1px 14px 0px 14px;
   color: white;
   cursor: pointer;
   transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
diff --git a/client/src/components/layouts/TopNav/NavItem.tsx b/client/src/components/layouts/TopNav/NavItem.tsx
index 717b2e6d9..477c38c9d 100644
--- a/client/src/components/layouts/TopNav/NavItem.tsx
+++ b/client/src/components/layouts/TopNav/NavItem.tsx
@@ -28,9 +28,9 @@ export const NavItem: React.FC<NavItemProps> = ({
       href: '/swap',
     },
     {
-      name: 'Deposit',
-      routeName: 'deposit',
-      href: '/deposit',
+      name: 'Deposits',
+      routeName: 'deposits',
+      href: '/deposits',
     },
     {
       name: 'Registration',
diff --git a/client/src/contexts/Balances/BalancesContext.ts b/client/src/contexts/Balances/BalancesContext.ts
index 763b025d9..ecfe1b66c 100644
--- a/client/src/contexts/Balances/BalancesContext.ts
+++ b/client/src/contexts/Balances/BalancesContext.ts
@@ -8,6 +8,7 @@ const defaultValues: ContextValues = {
   usdcApprovalToRamp: null,
   refetchUsdcApprovalToRamp: null,
   refetchUsdcBalance: null,
+  shouldFetchUsdcBalance: null,
 };
 
 const BalancesContext = createContext<ContextValues>(defaultValues)
diff --git a/client/src/contexts/Balances/BalancesProvider.tsx b/client/src/contexts/Balances/BalancesProvider.tsx
index f75ff519e..53c1e9275 100644
--- a/client/src/contexts/Balances/BalancesProvider.tsx
+++ b/client/src/contexts/Balances/BalancesProvider.tsx
@@ -181,6 +181,7 @@ const BalancesProvider = ({ children }: ProvidersProps) => {
         usdcApprovalToRamp,
         refetchUsdcApprovalToRamp,
         refetchUsdcBalance,
+        shouldFetchUsdcBalance,
       }}
     >
       {children}
diff --git a/client/src/contexts/Balances/types.ts b/client/src/contexts/Balances/types.ts
index d63c92f43..b16bf8ad3 100644
--- a/client/src/contexts/Balances/types.ts
+++ b/client/src/contexts/Balances/types.ts
@@ -4,4 +4,5 @@ export interface ContextValues {
   usdcApprovalToRamp: bigint | null
   refetchUsdcApprovalToRamp: (() => void) | null
   refetchUsdcBalance: (() => void) | null
+  shouldFetchUsdcBalance: boolean | null
 }
diff --git a/client/src/helpers/tooltips.ts b/client/src/helpers/tooltips.ts
index 62eacf667..6b16294f3 100644
--- a/client/src/helpers/tooltips.ts
+++ b/client/src/helpers/tooltips.ts
@@ -26,7 +26,7 @@ export const PROOF_TOOLTIP = `
  */
 
 export const REGISTRATION_INSTRUCTIONS = `
-  Registration requires a payment transaction email from Venmo. Your ID is encrypted to conceal your identity.
+  Registration requires a payment transaction email from Venmo. Your ID is hashed to conceal your identity.
 `;
 
 /*
diff --git a/client/src/pages/Swap.tsx b/client/src/pages/Swap.tsx
index 82648cd0d..347f7aced 100644
--- a/client/src/pages/Swap.tsx
+++ b/client/src/pages/Swap.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import SwapModal from "@components/Swap"
 import { OnRamp } from '@components/Swap/OnRamp'
+import useBalances from '@hooks/useBalance';
 import useOnRamperIntents from '@hooks/useOnRamperIntents';
 import useRampState from '@hooks/useRampState';
 
@@ -12,6 +13,7 @@ export const Swap: React.FC<{}> = (props) => {
     Contexts
   */
 
+  const { refetchUsdcBalance, shouldFetchUsdcBalance } = useBalances();
   const {
     currentIntentHash,
     refetchIntentHash,
@@ -41,6 +43,10 @@ export const Swap: React.FC<{}> = (props) => {
     if (shouldFetchRampState) {
       refetchDepositCounter?.();
     }
+
+    if (shouldFetchUsdcBalance) {
+      refetchUsdcBalance?.();
+    }
   }, []);
 
   /*