Minor UI Improvements (zkp2p#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

@@ -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</>} />

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;
 `;

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>

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>

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[]>([]);
 

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;

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',

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)

client/src/contexts/Balances/BalancesProvider.tsx

@@ -181,6 +181,7 @@ const BalancesProvider = ({ children }: ProvidersProps) => {
         usdcApprovalToRamp,
         refetchUsdcApprovalToRamp,
         refetchUsdcBalance,
+        shouldFetchUsdcBalance,
       }}
     >
       {children}

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
 }

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.
 `;
 
 /*

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?.();
+    }
   }, []);
 
   /*