Fork tooltip for deposit and add QuestionHelpers

asoong · Oct 31, 2023 · 0f3deb5 · 0f3deb5
1 parent 04e4bc0
commit 0f3deb5
Show file tree

Hide file tree

Showing 3 changed files with 235 additions and 8 deletions.
diff --git a/client/src/components/Deposit/Input.tsx b/client/src/components/Deposit/Input.tsx
@@ -0,0 +1,188 @@
+import React, { ChangeEvent } from "react";
+import styled from 'styled-components';
+
+import QuestionHelper from '@components/common/QuestionHelper';
+
+
+interface InputProps {
+  label: string;
+  name: string;
+  value?: string;
+  type?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  inputLabel?: string;
+  readOnly?: boolean;
+  accessoryLabel?: string;
+  helperText?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  onFocus,
+  onKeyDown,
+  placeholder,
+  inputLabel,
+  type = "text",
+  readOnly = false,
+  accessoryLabel="",
+  helperText="",
+}: InputProps) => {
+  Input.displayName = "Input";
+
+  return (
+      <Container>
+        <LabelAndInputContainer>
+          <LabelAndTooltipContainer>
+            <Label htmlFor={name}>
+                {label}
+            </Label>
+
+            { 
+              helperText && (
+                <QuestionHelper
+                  text={helperText}
+                />
+              )
+            }
+          </LabelAndTooltipContainer>
+
+          <InputWrapper>
+            <StyledInput
+              type={type}
+              name={name}
+              id={name}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+              onFocus={onFocus}
+              onKeyDown={onKeyDown}
+              readOnly={readOnly}
+            />
+          </InputWrapper>
+        </LabelAndInputContainer>
+
+        <AccessoryAndInputLabelWrapper>
+          <AccessoryLabel>
+            {accessoryLabel}
+          </AccessoryLabel>
+
+          {inputLabel ? (
+            <InputLabel>
+              <span>{inputLabel}</span>
+            </InputLabel>
+          ) : null}
+        </AccessoryAndInputLabelWrapper>
+      </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1.5px solid #98a1c03d;
+  background-color: #131A2A;
+
+  &:focus-within {
+    border-color: #CED4DA;
+    border-width: 1px;
+  }
+`;
+
+const LabelAndInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const LabelAndTooltipContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  margin-top: 4px;
+  align-items: center;
+  color: #CED4DA;
+`;
+
+const Label = styled.label`
+  display: flex;
+  font-size: 14px;
+  font-weight: 550;
+`;
+
+const InputWrapper = styled.div`
+  width: 100%;  
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  margin-top: 8px;
+`;
+
+interface StyledInputProps {
+  readOnly?: boolean;
+}
+
+const StyledInput = styled.input<StyledInputProps>`
+  width: 100%;
+  flex-grow: 1;
+  border: 0;
+  padding: 0;
+  color: #FFFFFF;
+  background-color: #131A2A;
+  font-size: 28px;
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:placeholder {
+    color: #6C757D;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  ${({ readOnly }) => 
+    readOnly && `
+      pointer-events: none;
+    `
+  }
+`;
+
+const AccessoryAndInputLabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #CED4DA;
+  margin: 9px 0px 2px 0px;
+`;
+
+const AccessoryLabel = styled.div`
+  font-size: 14px;
+  text-align: right;
+  font-weight: 550;
+`;
+
+const InputLabel = styled.div`
+  pointer-events: none;
+  color: #9ca3af;
+  font-size: 20px;
+  text-align: right;
+`;
diff --git a/client/src/components/Deposit/NewPosition.tsx b/client/src/components/Deposit/NewPosition.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { ArrowLeft } from 'react-feather';
 import styled from 'styled-components';
 import {
@@ -10,13 +10,19 @@ import {
 import { Button } from "../Button";
 import { RowBetween } from '../layouts/Row'
 import { ThemedText } from '../../theme/text'
-import { Input } from "@components/Swap/Input";
+import { Input } from "@components/Deposit/Input";
 import {
   calculatePackedVenmoId,
   isProvidedIdEqualToRegistration
 } from '@helpers/poseidonHash'
 import { toBigInt, toUsdcString } from '@helpers/units'
 import { ZERO } from '@helpers/constants'
+import {
+  NEW_DEPOSIT_VENMO_ID_TOOLTIP,
+  NEW_DEPOSIT_DEPOSIT_TOOLTIP,
+  NEW_DEPOSIT_RECEIVE_TOOLTIP
+} from '@helpers/tooltips'
+import useAccount from '@hooks/useAccount';
 import useBalances from '@hooks/useBalance'
 import useDeposits from '@hooks/useDeposits';
 import useRampState from '@hooks/useRampState'
@@ -47,6 +53,8 @@ export const NewPosition: React.FC<NewPositionProps> = ({
   /*
    * Contexts
    */
+
+  const { isLoggedIn, loggedInEthereumAddress } = useAccount();
   const { rampAddress, rampAbi, usdcAddress, usdcAbi } = useSmartContracts()
   const { minimumDepositAmount } = useRampState()
   const { usdcApprovalToRamp, usdcBalance, refetchUsdcApprovalToRamp } = useBalances()
@@ -149,9 +157,9 @@ export const NewPosition: React.FC<NewPositionProps> = ({
           if (!isVenmoIdInputValid) {
             setDepositState(NewDepositState.INVALID_VENMO_ID);
           } else {
-            const usdcBalanceLoaded = usdcBalance !== null && usdcBalance !== undefined;
-            const usdcApprovalToRampLoaded = usdcApprovalToRamp !== null && usdcApprovalToRamp !== undefined;
-            const minimumDepositAmountLoaded = minimumDepositAmount !== null && minimumDepositAmount !== undefined;
+            const usdcBalanceLoaded = usdcBalance !== null;
+            const usdcApprovalToRampLoaded = usdcApprovalToRamp !== null;
+            const minimumDepositAmountLoaded = minimumDepositAmount !== null;
 
             if (depositAmountInput && usdcBalanceLoaded && usdcApprovalToRampLoaded && minimumDepositAmountLoaded) {
               const depositAmountBI = toBigInt(depositAmountInput);
@@ -282,7 +290,7 @@ export const NewPosition: React.FC<NewPositionProps> = ({
         return 'Venmo id does not match registration';
 
       case NewDepositState.MISSING_AMOUNTS:
-        return 'Enter deposit and receive amounts';
+        return 'Input deposit and receive amounts';
 
       case NewDepositState.INSUFFICIENT_BALANCE:
         const humanReadableUsdcBalance = usdcBalance ? toUsdcString(usdcBalance) : '0';
@@ -301,7 +309,7 @@ export const NewPosition: React.FC<NewPositionProps> = ({
 
       case NewDepositState.DEFAULT:
       default:
-        return 'Enter valid venmo id';
+        return 'Input valid venmo id';
 
     }
   }
@@ -342,6 +350,14 @@ export const NewPosition: React.FC<NewPositionProps> = ({
     }
   }
 
+  const usdcBalanceLabel = useMemo(() => {
+    if (isLoggedIn && usdcBalance !== null) {
+      return `Balance: ${toUsdcString(usdcBalance)}`
+    } else {
+      return '';
+    }
+  }, [usdcBalance, isLoggedIn]);
+
   /*
    * Handlers
    */
@@ -379,6 +395,7 @@ export const NewPosition: React.FC<NewPositionProps> = ({
             onChange={(e) => {setVenmoIdInput(e.currentTarget.value)}}
             type="number"
             placeholder="215524379021315184"
+            helperText={NEW_DEPOSIT_VENMO_ID_TOOLTIP}
           />
 
           <Input
@@ -389,6 +406,8 @@ export const NewPosition: React.FC<NewPositionProps> = ({
             type="number"
             inputLabel="USDC"
             placeholder="1000"
+            accessoryLabel={usdcBalanceLabel}
+            helperText={NEW_DEPOSIT_DEPOSIT_TOOLTIP}
           />
 
           <Input
@@ -399,6 +418,7 @@ export const NewPosition: React.FC<NewPositionProps> = ({
             type="number"
             inputLabel="USD"
             placeholder="1050"
+            helperText={NEW_DEPOSIT_RECEIVE_TOOLTIP}
           />
 
           <ButtonContainer>

diff --git a/client/src/helpers/tooltips.ts b/client/src/helpers/tooltips.ts
@@ -26,7 +26,26 @@ export const PROOF_TOOLTIP = `
  */
 
 export const REGISTRATION_INSTRUCTIONS = `
-  Registration requires a payment transaction email from Venmo. Your ID is hashed to conceal your identity.
+  Registration requires a completed payment transaction email from Venmo.
+  Your ID is hashed to conceal your identity.
+`;
+
+/*
+ * New Deposit
+ */
+
+export const NEW_DEPOSIT_VENMO_ID_TOOLTIP = `
+  This is a valid 18-19 digit Venmo ID where users will send payments.
+  This connects your Venmo account to your wallet address on chain.
+  This must match the Venmo account you used to register.
+`;
+
+export const NEW_DEPOSIT_DEPOSIT_TOOLTIP = `
+  This is the amount of USDC you will deposit for users to claim by sending you Venmo payments.
+`;
+
+export const NEW_DEPOSIT_RECEIVE_TOOLTIP = `
+  This is the amount of USD you will receive if your entire deposit is claimed.
 `;
 
 /*