fix: ui

apps/hybrid-pay/src/App.tsx

@@ -23,7 +23,7 @@ const ScrollToTop = () => {
 
 const Wallet = lazy(() => import('./pages/Wallet'));
 const Send = lazy(() => import('./pages/Send'));
-const Recieve = lazy(() => import('./pages/Recieve'));
+const Receive = lazy(() => import('./pages/Receive'));
 const Custom404 = lazy(() => import('./pages/404'));
 
 const ProtectedRoute = ({ children }: { children: ReactNode }) => {
@@ -107,7 +107,7 @@ function App() {
             <Route
               element={
                 <ProtectedRoute>
-                  <Recieve />
+                  <Receive />
                 </ProtectedRoute>
               }
               path={RoutesPath.RECIEVE}

apps/hybrid-pay/src/components/Layout/Header.tsx

@@ -21,7 +21,7 @@ const Header = ({ ...props }: HeaderProps): JSX.Element => {
   return (
     <StyledHeader alignItems='center' elementType='header' justifyContent='space-between' {...props}>
       <StyledLogoWrapper alignItems='center' gap='md'>
-        {pathname === RoutesPath.HOME ? (
+        {pathname === RoutesPath.HOME || !isAuthenticated ? (
           <Logo to={RoutesPath.HOME} />
         ) : (
           <Flex alignItems='center'>

apps/hybrid-pay/src/lib/form/transfer.ts

@@ -22,7 +22,6 @@ type TransferTokenFormValues = {
 
 type TransferTokenFormValidationParams = {
   [TRANSFER_TOKEN_AMOUNT]: MaxAmountValidationParams & MinAmountValidationParams;
-  [TRANSFER_TOKEN_RECIPIENT]?: 'evm' | 'email';
 };
 
 const transferTokenSchema = (params: TransferTokenFormValidationParams) => {

apps/hybrid-pay/src/pages/Recieve/Recieve.tsx → apps/hybrid-pay/src/pages/Receive/Receive.tsx

@@ -5,8 +5,9 @@ import { useAccount } from 'wagmi';
 import { truncateEthAddress } from '@gobob/utils';
 
 import { Main } from '../../components';
+import { RoutesPath } from '../../constants';
 
-const Recieve = () => {
+const Receive = () => {
   const { user } = useDynamicContext();
   const { address } = useAccount();
 
@@ -35,12 +36,12 @@ const Recieve = () => {
           fgColor='#ffffff'
           size={256}
           style={{ height: 'auto', maxWidth: '100%', width: '100%', background: 'transparent' }}
-          value={address!}
+          value={`${window.location.host}${RoutesPath.SEND}?to=${user?.email || address}`}
           viewBox={`0 0 256 256`}
         />
       </Flex>
     </Main>
   );
 };
 
-export { Recieve };
+export { Receive };

apps/hybrid-pay/src/pages/Receive/index.tsx

@@ -0,0 +1 @@
+export { Receive as default } from './Receive';

apps/hybrid-pay/src/pages/Send/Send.tsx

@@ -57,12 +57,14 @@ const Send = ({}: SendProps): JSX.Element => {
 
   const { user } = useDynamicContext();
 
-  const [ticker, setTicker] = useState(CHAIN === ChainId.BASE_SEPOLIA ? 'USDC' : searchParams.get('token') || 'WBTC');
+  const defaultTicker = CHAIN === ChainId.BASE_SEPOLIA ? 'USDC' : searchParams.get('token') || 'WBTC';
+
+  const [ticker, setTicker] = useState(defaultTicker);
   const [amount, setAmount] = useState('');
   const [isGroupAmount, setGroupAmount] = useState(false);
 
   const { getPrice } = usePrices({ baseUrl: import.meta.env.VITE_MARKET_DATA_API });
-  const { getBalance } = useBalances(CHAIN);
+  const { getBalance, balances, isPending } = useBalances(CHAIN);
 
   const { data: tokens } = useTokens(CHAIN);
 
@@ -146,10 +148,6 @@ const Send = ({}: SendProps): JSX.Element => {
     error: eoaTransferError
   } = useMutation({
     mutationKey: ['eoa-transfer', amount, form.values[TRANSFER_TOKEN_RECIPIENT]],
-    onSuccess: () => {
-      form.resetForm();
-      setAmount('');
-    },
     mutationFn: async ({
       recipient,
       currencyAmount
@@ -183,6 +181,11 @@ const Send = ({}: SendProps): JSX.Element => {
   useEffect(() => {
     if (eoaTransferTransactionReceipt?.status === 'success') {
       toast.success(`Successfully sent ${amount} ${token?.currency.symbol}`);
+
+      form.resetForm();
+      setAmount('');
+      setGroupAmount(false);
+      setTicker(defaultTicker);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eoaTransferTransactionReceipt]);
@@ -207,12 +210,13 @@ const Send = ({}: SendProps): JSX.Element => {
       }
 
       toast.success(
-        `Successfully transfered ${variables.currencyAmount.numerator} ${variables.currencyAmount.currency.symbol}`
+        `Successfully transfered ${variables.currencyAmount.toExact()} ${variables.currencyAmount.currency.symbol}`
       );
 
       form.resetForm();
       setAmount('');
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      setGroupAmount(false);
+      setTicker(defaultTicker);
     },
     mutationFn: async ({
       recipient,
@@ -278,6 +282,13 @@ const Send = ({}: SendProps): JSX.Element => {
     }
   }, [smartAccountTransferError]);
 
+  useEffect(() => {
+    if (!isPending) {
+      form.validateField(TRANSFER_TOKEN_AMOUNT);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [balances, isPending]);
+
   const tokenInputItems = useMemo(
     () =>
       tokens?.map((token) => {
@@ -332,9 +343,10 @@ const Send = ({}: SendProps): JSX.Element => {
           currency={token.currency}
           isSelected={isGroupAmount}
           onSelectionChange={(currencyAmount) => {
-            form.setFieldValue(TRANSFER_TOKEN_AMOUNT, currencyAmount.toSignificant(), true);
+            form.setFieldValue(TRANSFER_TOKEN_AMOUNT, currencyAmount.toSignificant());
             form.setFieldTouched(TRANSFER_TOKEN_AMOUNT, true);
             setGroupAmount(true);
+            setTimeout(() => form.validateField(TRANSFER_TOKEN_AMOUNT), 0);
           }}
         />
         <Button color='primary' disabled={isSubmitDisabled} loading={isTransferLoading} size='xl' type='submit'>

apps/hybrid-pay/src/pages/Send/components/ButtonGroup/CardButton.style.tsx

@@ -2,8 +2,6 @@ import styled from 'styled-components';
 import { Card } from '@gobob/ui';
 
 const StyledCard = styled(Card)`
-  border: 1px solid transparent;
-
   &[aria-selected='true'] {
     border: 1px solid ${({ theme }) => theme.color('primary-500')};
     box-shadow: 0 0 0 1px ${({ theme }) => theme.color('primary-500')};

apps/hybrid-pay/src/pages/Wallet/Wallet.tsx

@@ -3,15 +3,13 @@ import { Main } from '../../components';
 import { StyledFlex } from './Wallet.style';
 import { Hero, TransactionList } from './components';
 
-const Wallet = () => {
-  return (
-    <Main maxWidth='5xl' padding='md'>
-      <StyledFlex direction='column'>
-        <Hero />
-        <TransactionList />
-      </StyledFlex>
-    </Main>
-  );
-};
+const Wallet = () => (
+  <Main maxWidth='5xl' padding='md'>
+    <StyledFlex direction='column'>
+      <Hero />
+      <TransactionList />
+    </StyledFlex>
+  </Main>
+);
 
 export { Wallet };