feat: /send checks create UI

0xsend · Jul 30, 2024 · 63458d8 · 63458d8
1 parent 7339b6a
commit 63458d8
Show file tree

Hide file tree

Showing 23 changed files with 489 additions and 188 deletions.
diff --git a/apps/next/pages/checks/create.tsx b/apps/next/pages/checks/create.tsx
@@ -2,6 +2,7 @@ import Head from 'next/head'
 import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from '../_app'
 import { CreateSendCheck } from 'app/features/checks/components/create/CreateSendCheck'
+import { CoinField } from 'app/components/FormFields'
 
 export const CreateSendCheckPage: NextPageWithLayout = () => {
   return (
@@ -10,6 +11,7 @@ export const CreateSendCheckPage: NextPageWithLayout = () => {
         <title>Send | Checks</title>
       </Head>
       <CreateSendCheck />
+      <CoinField />
     </>
   )
 }

diff --git a/packages/app/components/SearchBar.tsx b/packages/app/components/SearchBar.tsx
@@ -23,7 +23,7 @@ import { SchemaForm } from 'app/utils/SchemaForm'
 import { shorten } from 'app/utils/strings'
 import { useSearchResultHref } from 'app/utils/useSearchResultHref'
 import * as Linking from 'expo-linking'
-import { useEffect, useState } from 'react'
+import { type PropsWithChildren, useEffect, useState } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { Link } from 'solito/link'
 import { useRouter } from 'solito/router'
@@ -45,7 +45,7 @@ const formatResultsKey = (str: string): string => {
   return str.replace(/_matches/g, '').replace(/_/g, ' ')
 }
 
-function SearchResults() {
+function SearchResults(props: PropsWithChildren) {
   const { results, isLoading, error } = useTagSearch()
   const [queryParams] = useRootScreenParams()
   const { search: query } = queryParams
@@ -58,8 +58,10 @@ function SearchResults() {
       </YStack>
     )
   }
+
+  // if there are no results or an error, show the children
   if (!results || error) {
-    return null
+    return props.children
   }
 
   if (isAddress(query ?? '')) {

diff --git a/packages/app/features/checks/components/ManageChecksBtn.tsx b/packages/app/features/checks/components/ManageChecksBtn.tsx
@@ -0,0 +1,16 @@
+import { Button, ButtonText } from '@my/ui'
+import { useRouter } from 'solito/router'
+
+export const ManageChecksBtn = () => {
+  const router = useRouter()
+
+  const onPress = () => {
+    router.push('/checks')
+  }
+
+  return (
+    <Button onPress={onPress} theme="green" px="$15" br={12} disabledStyle={{ opacity: 0.5 }}>
+      <ButtonText textTransform="uppercase">Manage checks</ButtonText>
+    </Button>
+  )
+}
diff --git a/packages/app/features/checks/components/claim/ClaimSendCheck.tsx b/packages/app/features/checks/components/claim/ClaimSendCheck.tsx
@@ -3,13 +3,14 @@ import { ClaimButtonGuest } from 'app/features/checks/components/claim/btn/Claim
 import { ClaimButtonUser } from 'app/features/checks/components/claim/btn/ClaimButtonUser'
 import { ShowCheckData } from 'app/features/checks/components/claim/check/check-data/ShowCheckData'
 import { useProfileLookup } from 'app/utils/useProfileLookup'
-import { Spinner, YStack, Text, Button, ButtonText, XStack } from '@my/ui'
+import { Spinner, YStack, Text, Button, ButtonText, XStack, Card, Label } from '@my/ui'
 import { useMemo, useState } from 'react'
 import { useSendCheckData } from 'app/features/checks/utils/useSendCheckData'
 import { IconError } from 'app/components/icons'
 import { useRouter } from 'next/navigation'
-import { useTokenMetadata } from 'app/utils/coin-gecko'
+import { useCoinGeckoTokenId, useTokenMarketData } from 'app/utils/coin-gecko'
 import { checkExists } from 'app/features/checks/utils/checkUtils'
+import { GreenSquare } from 'app/features/home/TokenBalanceCard'
 
 interface Props {
   payload: ClaimSendCheckPayload
@@ -27,9 +28,11 @@ export const ClaimSendCheck = (props: Props) => {
   } = useSendCheckData(props.payload.ephemeralKeypair.ephemeralAddress, {
     retry: 3,
   })
-  const { data: tokenData } = useTokenMetadata(sendCheckData?.token as `0x${string}`, {
-    retry: false,
+  const { data: tokenId } = useCoinGeckoTokenId(sendCheckData?.token as `0x${string}`, {
+    retry: 3,
   })
+  const { data: tokenData } = useTokenMarketData(tokenId)
+
   const { data: profileData } = useProfileLookup('sendid', props.payload.senderSendId)
 
   const router = useRouter()
@@ -73,39 +76,70 @@ export const ClaimSendCheck = (props: Props) => {
     )
   }
 
+  const showHeader = () => {
+    return (
+      <XStack gap="$2.5" ai="center" jc="center">
+        <GreenSquare />
+        <Label
+          fontSize={'$4'}
+          zIndex={1}
+          fontWeight={'500'}
+          textTransform={'uppercase'}
+          col={'$color10'}
+        >
+          /send Check
+        </Label>
+      </XStack>
+    )
+  }
+
   const showCheckData = () => {
     return (
-      <>
-        {sendCheckData && (
-          <ShowCheckData
-            sendCheckData={sendCheckData}
-            tokenData={tokenData}
-            senderSendId={props.payload.senderSendId}
-            onError={props.onError}
-          />
-        )}
+      <Card
+        $lg={{ bc: 'transparent' }}
+        px="$12"
+        py="$6"
+        w={'100%'}
+        jc="space-between"
+        br={12}
+        gap="$6"
+        maxWidth={'40%'}
+        my="auto"
+        mx="auto"
+      >
+        <YStack gap="$3">
+          {showHeader()}
+          {sendCheckData && (
+            <ShowCheckData
+              sendCheckData={sendCheckData}
+              tokenMetadata={{
+                name: tokenData?.[0]?.name as string,
+                imageUrl: tokenData?.[0]?.image as string,
+                coinGeckoTokenId: tokenId as string,
+              }}
+              senderSendId={props.payload.senderSendId}
+              onError={props.onError}
+            />
+          )}
+        </YStack>
         {signedIn ? (
           <ClaimButtonUser
             onError={onError}
             onSuccess={props.onSuccess}
             payload={props.payload}
-            tokenId={tokenData?.id}
+            tokenId={tokenId}
             tokenAmount={sendCheckData?.amount}
           />
         ) : (
-          <ClaimButtonGuest tokenId={tokenData?.id} tokenAmount={sendCheckData?.amount} />
+          <ClaimButtonGuest tokenId={tokenId} tokenAmount={sendCheckData?.amount} />
         )}
-      </>
+      </Card>
     )
   }
 
   const onError = (error: Error) => {
     setError(error)
   }
 
-  return (
-    <YStack gap="$4" mx="auto" my="auto" borderRadius="$6" padding="$6" maxWidth="50%">
-      {isError ? showError(error) : sendCheckDataLoading ? showSpinner() : showCheckData()}
-    </YStack>
-  )
+  return isError ? showError(error) : sendCheckDataLoading ? showSpinner() : showCheckData()
 }
diff --git a/packages/app/features/checks/components/claim/btn/ClaimButton.tsx b/packages/app/features/checks/components/claim/btn/ClaimButton.tsx
@@ -3,7 +3,7 @@ import { CheckValue } from 'app/features/checks/components/claim/check/check-dat
 import { useState } from 'react'
 
 export interface ClaimSendCheckBtnProps {
-  tokenId?: number
+  tokenId?: string
   tokenAmount?: bigint
 }
 
@@ -33,7 +33,7 @@ export const ClaimButton = (props: Props) => {
             {showCheckValue()}
           </>
         )}
-        {loading && <Spinner size="large" color="$primary" />}
+        {loading && <Spinner size="large" color="black" />}
       </XStack>
     </Button>
   )

diff --git a/packages/app/features/checks/components/claim/check/check-data/CheckTokenAmount.tsx b/packages/app/features/checks/components/claim/check/check-data/CheckTokenAmount.tsx
@@ -5,9 +5,7 @@ interface Props {
   tokenAmount: bigint
   tokenName: string
   tokenIconSize: number
-
   tokenImageUrl?: string
-  tokenInfoUrl?: string
 }
 
 export const CheckTokenAmount = (props: Props) => {
@@ -17,7 +15,6 @@ export const CheckTokenAmount = (props: Props) => {
         <TokenIcon
           tokenImageUrl={props.tokenImageUrl}
           tokenName={props.tokenName}
-          tokenInfoUrl={props.tokenInfoUrl}
           tokenIconSize={props.tokenIconSize}
         />
       )

diff --git a/packages/app/features/checks/components/claim/check/check-data/ShowCheckData.tsx b/packages/app/features/checks/components/claim/check/check-data/ShowCheckData.tsx
@@ -1,12 +1,12 @@
 import { Text, XStack, YStack } from '@my/ui'
-import type { SendCheckData } from 'app/features/checks/types'
+import type { SendCheckData, TokenMetadata } from 'app/features/checks/types'
 import { SenderData } from 'app/features/checks/components/claim/check/sender-data/SenderData'
 import { CheckTokenAmount } from 'app/features/checks/components/claim/check/check-data/CheckTokenAmount'
 import { useProfileLookup } from 'app/utils/useProfileLookup'
 
 interface Props {
   sendCheckData: SendCheckData
-  tokenData?: object
+  tokenMetadata?: TokenMetadata
   senderSendId: string
   onError: (error: Error) => void
 }
@@ -21,29 +21,17 @@ export const ShowCheckData = (props: Props) => {
     }
   }
 
-  console.log(props.tokenData)
-
   return (
-    <YStack
-      animation="medium"
-      enterStyle={{
-        opacity: 1,
-      }}
-      exitStyle={{
-        opacity: 0,
-      }}
-      gap="$3"
-    >
+    <YStack gap="$3">
       <XStack justifyContent="center" alignItems="center">
         <SenderData profileData={profileData} senderSendId={props.senderSendId} />
         <Text fontSize="$9">{profileData?.name ? ' has sent you' : 'You have received'}</Text>
       </XStack>
 
       <CheckTokenAmount
-        tokenAmount={props.sendCheckData.amount} // @ts-ignore
-        tokenImageUrl={props.tokenData?.image?.large} // @ts-ignore
-        tokenName={props.tokenData?.name} // @ts-ignore
-        tokenInfoUrl={props.tokenData?.links?.homepage[0]}
+        tokenAmount={props.sendCheckData.amount}
+        tokenImageUrl={props.tokenMetadata?.imageUrl}
+        tokenName={props.tokenMetadata?.name as string}
         tokenIconSize={50}
       />
 

diff --git a/packages/app/features/checks/components/claim/check/check-data/TokenIcon.tsx b/packages/app/features/checks/components/claim/check/check-data/TokenIcon.tsx
@@ -1,9 +1,8 @@
-import { Circle, Image, Link } from '@my/ui'
+import { Circle, Image } from '@my/ui'
 
 interface Props {
   tokenImageUrl: string
   tokenName?: string
-  tokenInfoUrl?: string
   tokenIconSize?: number
 }
 
@@ -14,23 +13,16 @@ export const TokenIcon = (props: Props) => {
     return props.tokenName ? `${props.tokenName} token icon` : 'token icon'
   }
 
-  const showTokenIcon = () => {
-    return (
-      <Circle size={props.tokenIconSize ?? defaultTokenIconSize} overflow="hidden">
-        <Image
-          source={{
-            uri: props.tokenImageUrl,
-            width: 50,
-            height: 50,
-          }}
-          alt={getIconAlt()}
-        />
-      </Circle>
-    )
-  }
-  return props.tokenInfoUrl ? (
-    <Link href={props.tokenInfoUrl}>{showTokenIcon()}</Link>
-  ) : (
-    showTokenIcon()
+  return (
+    <Circle size={props.tokenIconSize ?? defaultTokenIconSize} overflow="hidden">
+      <Image
+        source={{
+          uri: props.tokenImageUrl,
+          width: 50,
+          height: 50,
+        }}
+        alt={getIconAlt()}
+      />
+    </Circle>
   )
 }