lock and earn

0xsend · Oct 2, 2024 · c413d36 · c413d36
1 parent 6145f95
commit c413d36
Show file tree

Hide file tree

Showing 7 changed files with 524 additions and 6 deletions.
diff --git a/apps/next/pages/account/rewards.tsx → apps/next/pages/account/rewards/index.tsx b/apps/next/pages/account/rewards.tsx → apps/next/pages/account/rewards/index.tsx
diff --git a/apps/next/pages/account/rewards/lock-and-earn.tsx b/apps/next/pages/account/rewards/lock-and-earn.tsx
@@ -0,0 +1,26 @@
+import { LockAndEarnScreen } from 'app/features/account/rewards/lock/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'
+
+export const Page: NextPageWithLayout = () => {
+  return (
+    <>
+      <Head>
+        <title>Send | Lock and Earn</title>
+      </Head>
+      <LockAndEarnScreen />
+    </>
+  )
+}
+
+export const getServerSideProps = userProtectedGetSSP()
+Page.getLayout = (children) => (
+  <HomeLayout TopNav={<TopNav header="Lock and Earn" button={ButtonOption.PROFILE} />}>
+    {children}
+  </HomeLayout>
+)
+
+export default Page
diff --git a/packages/app/components/icons/IconCoin.tsx b/packages/app/components/icons/IconCoin.tsx
@@ -2,13 +2,14 @@ import type { coin } from 'app/data/coins'
 import { IconEthereum } from './IconEthereum'
 import { IconSend } from './IconSend'
 import { IconUSDC } from './IconUSDC'
+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'} />,
+const coinSymbolToIcons: Record<coin['symbol'], (size: SizeTokens) => JSX.Element> = {
+  USDC: (size) => <IconUSDC size={size} />,
+  ETH: (size) => <IconEthereum size={size} />,
+  SEND: (size) => <IconSend 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')
 }
diff --git a/packages/app/components/icons/IconExclamationCircle.tsx b/packages/app/components/icons/IconExclamationCircle.tsx
@@ -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 }
diff --git a/packages/app/components/icons/IconPlusCircle.tsx b/packages/app/components/icons/IconPlusCircle.tsx
@@ -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 }
diff --git a/packages/app/components/icons/index.tsx b/packages/app/components/icons/index.tsx
@@ -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'