0xsend · stormcloud266 · Oct 2, 2024
@@ -0,0 +1,29 @@
+import { LockAndEarnScreen } from 'app/features/account/rewards/lock-and-earn/screen'
+import Head from 'next/head'
+import { userProtectedGetSSP } from 'utils/userProtected'
+import type { NextPageWithLayout } from 'next-app/pages/_app'
+import { HomeLayout } from 'app/features/home/layout.web'
+import { ButtonOption, TopNav } from 'app/components/TopNav'
+import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout'
+
+export const Page: NextPageWithLayout = () => {
+  return (
+    <>
+      <Head>
+        <title>Send | Lock and Earn</title>
+      </Head>
+      <LockAndEarnScreen />
+    </>
+  )
+}
+
+export const getServerSideProps = userProtectedGetSSP()
+Page.getLayout = (children) => (
+  <MobileButtonRowLayout.LockAndEarn>
+    <HomeLayout TopNav={<TopNav header="Lock and Earn" button={ButtonOption.PROFILE} />}>
+      {children}
+    </HomeLayout>
+  </MobileButtonRowLayout.LockAndEarn>
+)
+
+export default Page
@@ -23,6 +23,7 @@ import { useProfileScreenParams, useRewardsScreenParams } from 'app/routers/para
 import { useMonthlyDistributions } from 'app/utils/distributions'
 import { DistributionClaimButton } from 'app/features/account/rewards/components/DistributionClaimButton'
 import formatAmount from 'app/utils/formatAmount'
+import { LockAndEarnButtons } from 'app/features/account/rewards/lock-and-earn/LockAndEarnButtons'
 
 const Row = styled(XStack, {
   w: '100%',
@@ -243,8 +244,60 @@ export const ActivityRewards = ({ children, ...props }: XStackProps) => {
   )
 }
 
+export const LockAndEarn = ({ children, ...props }: XStackProps) => {
+  const isPwa = usePwa()
+  const { isLoading } = useUser()
+
+  const { direction } = useScrollDirection()
+
+  return (
+    <>
+      {children}
+      <AnimatePresence>
+        {!isLoading && direction !== 'down' && (
+          <Stack
+            w={'100%'}
+            pb={isPwa ? '$1' : '$5'}
+            px="$4"
+            $platform-web={{
+              position: 'fixed',
+              bottom: 0,
+            }}
+            $gtLg={{
+              display: 'none',
+            }}
+            animation="200ms"
+            opacity={1}
+            animateOnly={['scale', 'transform', 'opacity']}
+            enterStyle={{ opacity: 0, scale: 0.9 }}
+            exitStyle={{ opacity: 0, scale: 0.95 }}
+            pointerEvents="none"
+          >
+            <LinearGradient
+              h={'150%'}
+              top={'-50%'}
+              start={{ x: 0, y: 1 }}
+              end={{ x: 0, y: 0 }}
+              locations={[0, 0.33]}
+              fullscreen
+              colors={['transparent', '$background']}
+              $gtLg={{ display: 'none' }}
+            />
+            <Row {...props}>
+              <Stack w={200}>
+                <LockAndEarnButtons.OpenButton />
+              </Stack>
+            </Row>
+          </Stack>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
+
 export const MobileButtonRowLayout = {
   Home: Home,
   Profile: Profile,
   ActivityRewards: ActivityRewards,
+  LockAndEarn: LockAndEarn,
 }
@@ -3,14 +3,15 @@ import { IconEthereum } from './IconEthereum'
 import { IconSend } from './IconSend'
 import { IconUSDC } from './IconUSDC'
 import { IconSPX6900 } from './IconSPX6900'
+import type { SizeTokens } from 'tamagui'
 
-const coinSymbolToIcons: Record<coin['symbol'], JSX.Element> = {
-  USDC: <IconUSDC size={'$2.5'} />,
-  ETH: <IconEthereum size={'$2.5'} />,
-  SEND: <IconSend size={'$2.5'} />,
-  SPX: <IconSPX6900 size={'$2.5'} />,
+const coinSymbolToIcons: Record<coin['symbol'], (size: SizeTokens) => JSX.Element> = {
+  USDC: (size) => <IconUSDC size={size} />,
+  ETH: (size) => <IconEthereum size={size} />,
+  SEND: (size) => <IconSend size={size} />,
+  SPX: (size) => <IconSPX6900 size={size} />,
 }
 
-export const IconCoin = ({ coin }: { coin: coin }) => {
-  return coinSymbolToIcons[coin.symbol]
+export const IconCoin = ({ coin, size }: { coin: coin; size?: SizeTokens }) => {
+  return coinSymbolToIcons[coin.symbol]?.(size || '$2.5')
 }
@@ -0,0 +1,25 @@
+import type { ColorTokens } from '@my/ui/types'
+import { type IconProps, themed } from '@tamagui/helpers-icon'
+import { memo } from 'react'
+import { Path, Svg } from 'react-native-svg'
+
+const ExclamationCircle = (props) => {
+  const { size, color, ...rest } = props
+  return (
+    <Svg
+      color={color as ColorTokens | undefined}
+      width={size ?? 24}
+      height={size ?? 24}
+      viewBox="0 0 17 17"
+      fill="none"
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        d="M8.496 12c.21 0 .39-.072.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219ZM7.75 9h1.5V4h-1.5v5Zm.756 7a7.81 7.81 0 0 1-3.11-.625 8.064 8.064 0 0 1-2.552-1.719 8.065 8.065 0 0 1-1.719-2.551A7.819 7.819 0 0 1 .5 7.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.819 7.819 0 0 1 8.51 0a7.75 7.75 0 0 1 3.105.625 8.082 8.082 0 0 1 4.26 4.265 7.77 7.77 0 0 1 .625 3.104 7.81 7.81 0 0 1-.625 3.11 8.063 8.063 0 0 1-1.719 2.552 8.081 8.081 0 0 1-2.546 1.719A7.77 7.77 0 0 1 8.506 16ZM8.5 14.5c1.806 0 3.34-.632 4.604-1.896C14.368 11.34 15 9.806 15 8s-.632-3.34-1.896-4.604C11.84 2.132 10.306 1.5 8.5 1.5s-3.34.632-4.604 1.896C2.632 4.66 2 6.194 2 8s.632 3.34 1.896 4.604C5.16 13.868 6.694 14.5 8.5 14.5Z"
+      />
+    </Svg>
+  )
+}
+const IconExclamationCircle = memo<IconProps>(themed(ExclamationCircle))
+export { IconExclamationCircle }
@@ -0,0 +1,25 @@
+import type { ColorTokens } from '@my/ui/types'
+import { type IconProps, themed } from '@tamagui/helpers-icon'
+import { memo } from 'react'
+import { Path, Svg } from 'react-native-svg'
+
+const PlusCircle = (props) => {
+  const { size, color, ...rest } = props
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      color={color as ColorTokens | undefined}
+      width={size ?? 24}
+      height={size ?? 24}
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        d="M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4v4Zm1 5a9.873 9.873 0 0 1-3.9-.775 10.274 10.274 0 0 1-3.175-2.15c-.9-.9-1.617-1.958-2.15-3.175A9.873 9.873 0 0 1 2 12c0-1.383.258-2.683.775-3.9a10.275 10.275 0 0 1 2.15-3.175c.9-.9 1.958-1.608 3.175-2.125A9.607 9.607 0 0 1 12 2c1.383 0 2.683.267 3.9.8a9.927 9.927 0 0 1 3.175 2.125c.9.9 1.608 1.958 2.125 3.175.533 1.217.8 2.517.8 3.9a9.607 9.607 0 0 1-.8 3.9 9.927 9.927 0 0 1-2.125 3.175c-.9.9-1.958 1.617-3.175 2.15A9.873 9.873 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
+      />
+    </Svg>
+  )
+}
+const IconPlusCircle = memo<IconProps>(themed(PlusCircle))
+export { IconPlusCircle }
@@ -57,3 +57,5 @@ export { IconInfoCircle } from './IconInfoCircle'
 export { IconLeaderboard } from './IconLeaderboard'
 export { IconStarOutline } from './IconStarOutline'
 export { IconQuestionCircle } from './IconQuestionCircle'
+export { IconPlusCircle } from './IconPlusCircle'
+export { IconExclamationCircle } from './IconExclamationCircle'
@@ -0,0 +1,13 @@
+import { Button } from '@my/ui'
+
+export const OpenButton = () => (
+  <Button borderRadius={'$4'} theme={'green'}>
+    <Button.Text fontWeight={500} ff={'$mono'} tt={'uppercase'}>
+      Open a new position
+    </Button.Text>
+  </Button>
+)
+
+export const LockAndEarnButtons = {
+  OpenButton: OpenButton,
+}