Merge pull request #731 from 0xsend/dev

Update Main from dev

Author: beezybarg

apps/next/pages/deposit/index.tsx

@@ -3,7 +3,7 @@ import { HomeLayout } from 'app/features/home/layout.web'
 import Head from 'next/head'
 import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from '../_app'
-import { ButtonOption, TopNav } from 'app/components/TopNav'
+import { TopNav } from 'app/components/TopNav'
 
 export const Page: NextPageWithLayout = () => {
   return (
@@ -19,9 +19,7 @@ export const Page: NextPageWithLayout = () => {
 export const getServerSideProps = userProtectedGetSSP()
 
 Page.getLayout = (children) => (
-  <HomeLayout TopNav={<TopNav header="Deposit" button={ButtonOption.PROFILE} />}>
-    {children}
-  </HomeLayout>
+  <HomeLayout TopNav={<TopNav header="Deposit" />}>{children}</HomeLayout>
 )
 
 export default Page

packages/app/components/FormFields/BooleanCheckboxField.tsx

@@ -12,11 +12,12 @@ import {
   type ThemeName,
   XStack,
   useThemeName,
+  type LabelProps,
 } from '@my/ui'
 import { useThemeSetting } from '@tamagui/next-theme'
 
 export const BooleanCheckboxField = (
-  props: Pick<CheckboxProps, 'size' | 'native' | 'defaultChecked'>
+  props: Pick<CheckboxProps, 'size' | 'native' | 'defaultChecked'> & { labelProps?: LabelProps }
 ) => {
   const {
     field,
@@ -47,7 +48,8 @@ export const BooleanCheckboxField = (
               lineHeight={52}
               htmlFor={id}
               textTransform={'uppercase'}
-              color="$olive"
+              color={props.labelProps?.color ?? '$olive'}
+              {...props.labelProps}
             >
               {label} {isOptional && '(Optional)'}
             </Label>

packages/app/components/FormFields/CoinField.tsx

@@ -28,7 +28,10 @@ import { useSendAccount } from 'app/utils/send-accounts'
 import { useId, useState } from 'react'
 import { useBalance, type UseBalanceReturnType } from 'wagmi'
 import { IconCoin } from '../icons/IconCoin'
-export const CoinField = ({ native = false, ...props }: Pick<SelectProps, 'size' | 'native'>) => {
+export const CoinField = ({
+  native = false,
+  ...props
+}: Pick<SelectProps, 'size' | 'native' | 'defaultValue'>) => {
   const [isOpen, setIsOpen] = useState(false)
 
   const {
@@ -48,9 +51,10 @@ export const CoinField = ({ native = false, ...props }: Pick<SelectProps, 'size'
           <Select
             native={native}
             id={id}
-            value={field.value || usdcAddress[baseMainnet.id]}
+            value={field.value}
             onValueChange={field.onChange}
             onOpenChange={setIsOpen}
+            defaultValue={usdcAddress[baseMainnet.id]}
             open={isOpen}
             {...props}
           >

packages/app/components/FormFields/TextAreaField.tsx

@@ -11,10 +11,14 @@ import {
   useThemeName,
   FieldError,
   Shake,
+  type LabelProps,
 } from '@my/ui'
 
 export const TextAreaField = (
-  props: Pick<TextAreaProps, 'size' | 'autoFocus' | 'aria-label' | 'placeholder' | 'fontStyle'>
+  props: Pick<
+    TextAreaProps,
+    'size' | 'autoFocus' | 'aria-label' | 'placeholder' | 'fontStyle' | 'backgroundColor' | 'rows'
+  > & { labelProps?: LabelProps }
 ) => {
   const {
     field,
@@ -34,11 +38,12 @@ export const TextAreaField = (
         {!!label && (
           <Label
             size={props.size || '$5'}
-            fontFamily={'$mono'}
-            lineHeight={52}
             htmlFor={id}
-            textTransform={'uppercase'}
-            color="$olive"
+            fontFamily={props.labelProps?.fontFamily ?? '$mono'}
+            lineHeight={props.labelProps?.lineHeight ?? 52}
+            textTransform={props.labelProps?.textTransform ?? 'uppercase'}
+            color={props.labelProps?.color ?? '$olive'}
+            {...props.labelProps}
           >
             {label} {isOptional && '(Optional)'}
           </Label>

packages/app/components/FormFields/TextField.tsx

@@ -7,6 +7,7 @@ import {
   Paragraph,
   Shake,
   Stack,
+  type LabelProps,
   Theme,
   Tooltip,
   useMedia,
@@ -17,7 +18,9 @@ import { useId } from 'react'
 
 import { AlertTriangle } from '@tamagui/lucide-icons'
 
-export const TextField = (props: InputProps & { fieldsetProps?: FieldsetProps }) => {
+export const TextField = (
+  props: InputProps & { fieldsetProps?: FieldsetProps } & { labelProps?: LabelProps }
+) => {
   const media = useMedia()
   const {
     field,
@@ -44,7 +47,8 @@ export const TextField = (props: InputProps & { fieldsetProps?: FieldsetProps })
             lineHeight={'$11'}
             htmlFor={id}
             textTransform={'uppercase'}
-            color="$olive"
+            color={props.labelProps?.color ?? '$olive'}
+            {...props.labelProps}
           >
             {label} {isOptional && '(Optional)'}
           </Label>

packages/app/components/TopNav.tsx

@@ -116,12 +116,19 @@ export function TopNav({
     // else, go to home page
     if (hasSelectedCoin) {
       setRootParams({ ...queryParams, token: undefined })
+      return
     }
     const newPath = parts.length > 1 ? parts.slice(0, 1).join('/') : '/'
+    if (path.includes('/settings')) {
+      push(`/${newPath}?nav=settings`)
+      return
+    }
+
     push(`/${newPath}`)
   }
-
-  const isSubRoute = (!noSubroute && parts.length > 1) || path.includes('/secret-shop')
+  //@todo Refactor this so we can put back arrows on screens that need it
+  const isSubRoute =
+    (!noSubroute && parts.length > 1) || path.includes('/secret-shop') || path.includes('/deposit')
 
   const renderButton = () => {
     switch (true) {
@@ -218,7 +225,7 @@ export function TopNav({
                       col="$color10"
                       lineHeight={32}
                       $gtLg={{ ml: isSubRoute ? '$4' : '$0' }}
-                      display={selectedCoin && !media.gtLg ? 'none' : 'flex'}
+                      display={selectedCoin ? 'none' : 'flex'}
                       als={'center'}
                     >
                       {header}
@@ -233,7 +240,7 @@ export function TopNav({
                   col="$color10"
                   lineHeight={32}
                   $gtLg={{ ml: isSubRoute ? '$4' : '$0' }}
-                  display={selectedCoin && !media.gtLg ? 'none' : 'flex'}
+                  display={isSubRoute ? 'flex' : 'none'}
                   als={'center'}
                 >
                   {header}
@@ -269,7 +276,7 @@ export function TopNav({
           <Separator w={'100%'} borderColor="$jet" $lg={{ display: 'none' }} />
         </Container>
       )}
-      <Separator w={'100%'} borderColor="$decay" $gtLg={{ display: 'none' }} />
+      <Separator w={'100%'} borderColor="$decay" $gtLg={{ display: 'none' }} mt="$2" />
       {!media.gtLg && selectedCoin && selectedCoin.label !== 'USDC' && (
         <Container pos="relative">
           <View

packages/app/components/icons/IconLeaderboard.tsx

@@ -0,0 +1,25 @@
+import { type IconProps, themed } from '@tamagui/helpers-icon'
+import { memo } from 'react'
+import { Path, Svg } from 'react-native-svg'
+import type { ColorTokens } from '@my/ui/types'
+
+const Leaderboard = (props) => {
+  const { size, color, ...rest } = props
+  return (
+    <Svg
+      width={size ?? 28}
+      height={size ?? 28}
+      color={color as ColorTokens | undefined}
+      viewBox="0 0 20 18"
+      fill="none"
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        d="M2 16h4V8H2v8Zm6 0h4V2H8v14Zm6 0h4v-6h-4v6ZM0 18V6h6V0h8v8h6v10H0Z"
+      />
+    </Svg>
+  )
+}
+const IconLeaderboard = memo<IconProps>(themed(Leaderboard))
+export { IconLeaderboard }

packages/app/components/icons/IconQRFull.tsx

@@ -0,0 +1,25 @@
+import { type IconProps, themed } from '@tamagui/helpers-icon'
+import { memo } from 'react'
+import { Path, Svg } from 'react-native-svg'
+import type { ColorTokens } from '@my/ui/types'
+
+const QRFull = (props) => {
+  const { size, color, ...rest } = props
+  return (
+    <Svg
+      width={size ?? 28}
+      height={size ?? 28}
+      color={color as ColorTokens | undefined}
+      viewBox="0 0 30 30"
+      fill="none"
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        d="M0 13.611V0h13.611v13.611H0Zm2.778-2.778h8.055V2.778H2.778v8.055ZM0 30V16.389h13.611V30H0Zm2.778-2.778h8.055v-8.055H2.778v8.055Zm13.61-13.61V0H30v13.611H16.389Zm2.779-2.779h8.055V2.778h-8.055v8.055ZM26.61 30v-3.389H30V30h-3.389ZM16.39 19.805V16.39h3.389v3.416h-3.39Zm3.389 3.39v-3.39h3.417v3.39h-3.417Zm-3.39 3.416v-3.416h3.39v3.416h-3.39ZM19.779 30v-3.389h3.417V30h-3.417Zm3.417-3.389v-3.416h3.416v3.416h-3.416Zm0-6.806V16.39h3.416v3.416h-3.416Zm3.416 3.39v-3.39H30v3.39h-3.389Z"
+      />
+    </Svg>
+  )
+}
+const IconQRFull = memo<IconProps>(themed(QRFull))
+export { IconQRFull }

packages/app/components/icons/IconQuestionCircle.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react'
+import type { IconProps } from '@tamagui/helpers-icon'
+import { Svg, Path } from 'react-native-svg'
+import { themed } from '@tamagui/helpers-icon'
+import type { ColorTokens } from '@my/ui'
+
+const QuestionCircle = (props) => {
+  const { size, color, ...rest } = props
+
+  return (
+    <Svg
+      color={color as ColorTokens | undefined}
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        d="M9.95 16c.35 0 .646-.12.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887a1.207 1.207 0 0 0-.888-.363c-.35 0-.646.12-.887.363a1.207 1.207 0 0 0-.363.887c0 .35.12.646.363.887.241.242.537.363.887.363Zm-.9-3.85h1.85c0-.55.063-.983.188-1.3.125-.317.479-.75 1.062-1.3a7.496 7.496 0 0 0 1.025-1.238c.25-.391.375-.862.375-1.412 0-.933-.342-1.65-1.025-2.15-.683-.5-1.492-.75-2.425-.75-.95 0-1.72.25-2.313.75-.591.5-1.004 1.1-1.237 1.8l1.65.65c.083-.3.27-.625.563-.975.291-.35.737-.525 1.337-.525.533 0 .933.146 1.2.438.267.291.4.612.4.962 0 .333-.1.646-.3.938-.2.291-.45.562-.75.812-.733.65-1.183 1.142-1.35 1.475-.167.333-.25.942-.25 1.825ZM10 20a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 0 10c0-1.383.263-2.683.787-3.9a10.099 10.099 0 0 1 2.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 10 0c1.383 0 2.683.263 3.9.787a10.098 10.098 0 0 1 3.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 20 10a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 10 20Zm0-2c2.233 0 4.125-.775 5.675-2.325C17.225 14.125 18 12.233 18 10c0-2.233-.775-4.125-2.325-5.675C14.125 2.775 12.233 2 10 2c-2.233 0-4.125.775-5.675 2.325C2.775 5.875 2 7.767 2 10c0 2.233.775 4.125 2.325 5.675C5.875 17.225 7.767 18 10 18Z"
+      />
+    </Svg>
+  )
+}
+
+const IconQuestionCircle = memo<IconProps>(themed(QuestionCircle))
+export { IconQuestionCircle }

packages/app/components/icons/IconStarOutline.tsx

@@ -0,0 +1,25 @@
+import { type IconProps, themed } from '@tamagui/helpers-icon'
+import { memo } from 'react'
+import { Path, Svg } from 'react-native-svg'
+import type { ColorTokens } from '@my/ui/types'
+
+const StarOutline = (props) => {
+  const { size, color, ...rest } = props
+  return (
+    <Svg
+      width={size ?? 28}
+      height={size ?? 28}
+      color={color as ColorTokens | undefined}
+      viewBox="0 0 20 19"
+      fill="none"
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        d="m6.85 14.825 3.15-1.9 3.15 1.925-.825-3.6 2.775-2.4-3.65-.325-1.45-3.4L8.55 8.5l-3.65.325 2.775 2.425-.825 3.575ZM3.825 19l1.625-7.025L0 7.25l7.2-.625L10 0l2.8 6.625 7.2.625-5.45 4.725L16.175 19 10 15.275 3.825 19Z"
+      />
+    </Svg>
+  )
+}
+const IconStarOutline = memo<IconProps>(themed(StarOutline))
+export { IconStarOutline }

packages/app/components/icons/index.tsx

@@ -27,6 +27,7 @@ export { IconSecurity } from './IconSecurity'
 export { IconNotification } from './IconNotification'
 export { IconSupport } from './IconSupport'
 export { IconQRCode } from './IconQRCode'
+export { IconQRFull } from './IconQRFull'
 export { IconShare } from './IconShare'
 export { IconSLogo } from './IconSLogo'
 export { IconDistributions } from './IconDistributions'
@@ -53,3 +54,6 @@ export { IconDots } from './IconDots'
 export { IconDeviceReset } from './IconDeviceReset'
 export { IconBadgeCheck } from './IconBadgeCheck'
 export { IconInfoCircle } from './IconInfoCircle'
+export { IconLeaderboard } from './IconLeaderboard'
+export { IconStarOutline } from './IconStarOutline'
+export { IconQuestionCircle } from './IconQuestionCircle'