Feat/continue develop scrvusd

apps/main/src/dao/components/PageAnalytics/DailyLocksChart/PositiveAndNegativeBarChart.tsx

@@ -28,7 +28,7 @@ const PositiveAndNegativeBarChart: React.FC<PositiveAndNegativeBarChartProps> =
       <XAxis
         dataKey="day"
         tick={{ fill: 'var(--page--text-color)', fontSize: 'var(--font-size-1)' }}
-        tickFormatter={formatDate}
+        tickFormatter={(value: string) => formatDate(new Date(value))}
         tickLine={{ opacity: 0.3, strokeWidth: 0.3 }}
         axisLine={{ opacity: 0.3, strokeWidth: 0.3 }}
         minTickGap={20}

apps/main/src/dao/components/PageAnalytics/VeCrvFeesChart/FeesBarChart.tsx

@@ -28,7 +28,7 @@ const FeesBarChart: React.FC<FeesBarChartProps> = ({ data, height = 500 }) => (
       <XAxis
         dataKey="timestamp"
         tick={{ fill: 'var(--page--text-color)', fontSize: 'var(--font-size-1)' }}
-        tickFormatter={formatDate}
+        tickFormatter={(value: string) => formatDate(new Date(value))}
         tickLine={{ opacity: 0.3, strokeWidth: 0.3 }}
         axisLine={{ opacity: 0.3, strokeWidth: 0.3 }}
         minTickGap={20}

apps/main/src/loan/components/PageCrvUsdStaking/DepositWithdraw/DeployButton.tsx

@@ -14,9 +14,8 @@ type DeployButtonProps = {
 
 const DeployButton: React.FC<DeployButtonProps> = ({ className }) => {
   const { signerAddress } = useWallet()
-  const { approval: depositApproved, fetchStatus: depositFetchStatus } = useStore(
-    (state) => state.scrvusd.depositApproval,
-  )
+  const depositApproved = useStore((state) => state.scrvusd.depositApproval.approval)
+  const depositFetchStatus = useStore((state) => state.scrvusd.depositApproval.fetchStatus)
   const { depositApprove, deposit, redeem } = useStore((state) => state.scrvusd.deploy)
   const { inputAmount, stakingModule, userBalances, getInputAmountApproved } = useStore((state) => state.scrvusd)
 

apps/main/src/loan/components/PageCrvUsdStaking/DepositWithdraw/DepositModule.tsx

@@ -22,7 +22,10 @@ import { useWallet } from '@ui-kit/features/connect-wallet'
 const DepositModule = () => {
   const { signerAddress } = useWallet()
   const userBalances = useStore((state) => state.scrvusd.userBalances[signerAddress?.toLowerCase() ?? ''])
-  const { inputAmount, preview, setInputAmount, setMax } = useStore((state) => state.scrvusd)
+  const inputAmount = useStore((state) => state.scrvusd.inputAmount)
+  const preview = useStore((state) => state.scrvusd.preview)
+  const setInputAmount = useStore((state) => state.scrvusd.setInputAmount)
+  const setMax = useStore((state) => state.scrvusd.setMax)
 
   const isLoadingBalances = !userBalances || isLoading(userBalances.fetchStatus)
   const isLoadingPreview = isLoading(preview.fetchStatus)

apps/main/src/loan/components/PageCrvUsdStaking/DepositWithdraw/index.tsx

@@ -12,6 +12,9 @@ import DepositModule from '@/loan/components/PageCrvUsdStaking/DepositWithdraw/D
 import WithdrawModule from '@/loan/components/PageCrvUsdStaking/DepositWithdraw/WithdrawModule'
 import DeployButton from '@/loan/components/PageCrvUsdStaking/DepositWithdraw/DeployButton'
 import TransactionTracking from '@/loan/components/PageCrvUsdStaking/TransactionTracking'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { MaxWidth } = SizesAndSpaces
 
 type DepositWithdrawProps = {
   className?: string
@@ -111,7 +114,7 @@ const DepositWithdraw = ({ className }: DepositWithdrawProps) => {
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: 29rem;
+  max-width: ${MaxWidth.actionCard};
   width: 100%;
 `
 

apps/main/src/loan/components/PageCrvUsdStaking/Page.tsx

@@ -62,9 +62,6 @@ const HeaderContainer = styled.div<{ mobileBreakpoint: string }>`
   align-items: center;
   padding: var(--spacing-3);
   gap: var(--spacing-3);
-  @media (max-width: ${({ mobileBreakpoint }) => mobileBreakpoint}) {
-    padding: var(--spacing-3);
-  }
 `
 
 const Description = styled.p``

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/AdvancedDetails.tsx

@@ -0,0 +1,29 @@
+import { Card, CardHeader, Stack } from '@mui/material'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { t } from '@lingui/macro'
+import ActionInfo from '@ui-kit/shared/ui/ActionInfo'
+import { SCRVUSD_VAULT_ADDRESS } from './constants'
+import networks from '@/loan/networks'
+import { ETHEREUM_CHAIN_ID } from '@/loan/constants'
+
+const { Spacing } = SizesAndSpaces
+
+const AdvancedDetails = () => (
+  <Card sx={{ backgroundColor: (t) => t.design.Layer[1].Fill, boxShadow: 'none' }} elevation={0}>
+    <CardHeader
+      size="small"
+      title={t`Advanced Details`}
+      slotProps={{ title: { variant: 'small' }, root: { variant: 'small' } }}
+    />
+    <Stack direction="column" spacing={Spacing.md} sx={{ padding: Spacing.md }}>
+      <ActionInfo
+        label={t`Vault Contract Address`}
+        address={SCRVUSD_VAULT_ADDRESS}
+        linkAddress={networks[ETHEREUM_CHAIN_ID].scanAddressPath(SCRVUSD_VAULT_ADDRESS)}
+        copiedText={t`Vault Contract Address Copied!`}
+      />
+    </Stack>
+  </Card>
+)
+
+export default AdvancedDetails

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/DistributionsBarChart.tsx

@@ -0,0 +1,66 @@
+import type { ScrvUsdRevenue } from '@/loan/entities/scrvusdRevenue'
+import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+import { formatNumber, formatDate } from '@ui/utils/utilsFormat'
+import { useTheme } from '@mui/material/styles'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { toDate } from '@curvefi/prices-api/timestamp'
+import DistributionsChartTooltip from './DistributionsChartTooltip'
+
+const { FontSize } = SizesAndSpaces
+
+type RevenueDistributionsBarChartProps = {
+  data: ScrvUsdRevenue | null
+  height?: number
+}
+
+const RevenueDistributionsBarChart: React.FC<RevenueDistributionsBarChartProps> = ({ data, height = 400 }) => {
+  const {
+    design: { Color, Text },
+  } = useTheme()
+  const gridLineColor = Color.Neutral[300]
+  const gridTextColor = Text.TextColors.Tertiary
+  const barColor = Color.Secondary[500]
+
+  return (
+    <ResponsiveContainer width="100%" height={height} debounce={200}>
+      <BarChart
+        width={500}
+        height={300}
+        data={data?.epochs ?? []}
+        margin={{
+          top: 16,
+          right: 20,
+          left: undefined,
+          bottom: 16,
+        }}
+      >
+        <CartesianGrid stroke={gridLineColor} strokeWidth={0.3} vertical={true} />
+        <XAxis
+          dataKey="endDate"
+          tick={{ fill: gridTextColor, fontSize: FontSize.xs.desktop }}
+          tickLine={{ fill: gridLineColor, strokeWidth: 0.5 }}
+          axisLine={false}
+          minTickGap={20}
+          allowDataOverflow={false}
+          tickFormatter={(time) => {
+            const date = toDate(time as string | number)
+            return formatDate(date)
+          }}
+        />
+        <YAxis
+          dataKey="weeklyRevenue"
+          tick={{ fill: gridTextColor, fontSize: FontSize.xs.desktop }}
+          tickLine={{ fill: gridLineColor, strokeWidth: 0.5 }}
+          axisLine={{ opacity: 0.3, strokeWidth: 0.3 }}
+          tickFormatter={(value) => `$${formatNumber(value, { notation: 'compact' })}`}
+        />
+        <Tooltip content={DistributionsChartTooltip} cursor={{ opacity: 0.3 }} />
+        <Bar dataKey="weeklyRevenue" label={false} fill={barColor} isAnimationActive={false}>
+          {data?.epochs.map((entry, index) => <Cell key={`$cell-${index}`} fill={barColor} />)}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}
+
+export default RevenueDistributionsBarChart

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/DistributionsChartTooltip.tsx

@@ -0,0 +1,55 @@
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'
+import type { ScrvUsdRevenue } from '@/loan/entities/scrvusdRevenue'
+import { TooltipProps } from 'recharts'
+import { t } from '@lingui/macro'
+import { Paper, Stack, Typography } from '@mui/material'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { formatNumber, formatDate } from '@ui/utils/utilsFormat'
+import { toDate } from '@curvefi/prices-api/timestamp'
+import { TOOLTIP_MAX_WIDTH } from '@/loan/components/PageCrvUsdStaking/Statistics/constants'
+
+const { Spacing } = SizesAndSpaces
+
+type Epoch = ScrvUsdRevenue['epochs'][number]
+
+const DataSet = ({ label, value }: { label: string; value: string }) => (
+  <Stack direction="row" justifyContent="space-between" alignItems="center">
+    <Typography variant="bodySRegular">{label}</Typography>
+    <Typography variant="bodySBold">{value}</Typography>
+  </Stack>
+)
+
+const DistributionsChartTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
+  if (active && payload && payload.length) {
+    const { endDate, weeklyRevenue } = payload[0].payload as Epoch
+
+    return (
+      <Paper
+        sx={{
+          backgroundColor: (theme) => theme.design.Layer[3].Fill,
+          padding: Spacing.md,
+          width: TOOLTIP_MAX_WIDTH,
+          maxWidth: '80%',
+        }}
+        elevation={2}
+      >
+        <Typography variant="bodyMBold">{formatDate(toDate(endDate), 'long')}</Typography>
+        <Stack
+          direction="column"
+          sx={{
+            marginTop: Spacing.sm,
+            padding: Spacing.sm,
+            gap: 1,
+            backgroundColor: (theme) => theme.design.Layer[2].Fill,
+          }}
+        >
+          <DataSet label={t`Weekly Revenue`} value={`$${formatNumber(weeklyRevenue, { notation: 'compact' })}`} />
+        </Stack>
+      </Paper>
+    )
+  }
+
+  return null
+}
+
+export default DistributionsChartTooltip

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/RevenueChartFooter.tsx

@@ -0,0 +1,72 @@
+import type { TimeOption } from '@ui-kit/lib/types/scrvusd'
+import type { YieldKeys } from '@/loan/components/PageCrvUsdStaking/types'
+import Stack from '@mui/material/Stack'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import ToggleButton from '@mui/material/ToggleButton'
+import Typography from '@mui/material/Typography'
+import LegendLine from '@/loan/components/PageCrvUsdStaking/Statistics/components/LegendLine'
+import { priceLineLabels } from '@/loan/components/PageCrvUsdStaking/Statistics/constants'
+import { useTheme } from '@mui/material/styles'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
+
+type Props = {
+  timeOptions: TimeOption[]
+  activeTimeOption: TimeOption
+  setActiveTimeOption: (event: React.MouseEvent<HTMLElement>, newTimeOption: TimeOption) => void
+}
+
+const LegendSet = ({ label, dash, legendColor }: { label: string; dash: string; legendColor: string }) => (
+  <Stack direction="row" spacing={3} alignItems="center">
+    <LegendLine color={legendColor} dash={dash} />
+    <Typography variant="bodySRegular">{label}</Typography>
+  </Stack>
+)
+
+const RevenueChartFooter = ({ timeOptions, activeTimeOption, setActiveTimeOption }: Props) => {
+  const {
+    design: { Color },
+  } = useTheme()
+
+  const priceLineColors = {
+    proj_apy: Color.Primary[500],
+    proj_apy_7d_avg: Color.Secondary[500],
+    proj_apy_total_avg: Color.Tertiary[400],
+  } as const satisfies Record<YieldKeys, string>
+
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ paddingInline: Spacing.md }}>
+      <Stack direction="row" gap={4} flexWrap="wrap">
+        {Object.entries(priceLineLabels).map(([key, { label, dash }]) => (
+          <LegendSet
+            key={key}
+            label={label}
+            dash={dash}
+            legendColor={
+              key === 'proj_apy'
+                ? priceLineColors.proj_apy
+                : key === 'proj_apy_7d_avg'
+                  ? priceLineColors.proj_apy_7d_avg
+                  : priceLineColors.proj_apy_total_avg
+            }
+          />
+        ))}
+      </Stack>
+      <ToggleButtonGroup
+        exclusive
+        value={activeTimeOption}
+        onChange={setActiveTimeOption}
+        sx={{ marginLeft: Spacing.md }}
+      >
+        {timeOptions.map((option) => (
+          <ToggleButton value={option} key={option} size="extraSmall">
+            {option}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </Stack>
+  )
+}
+
+export default RevenueChartFooter

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/RevenueChartTooltip.tsx

@@ -0,0 +1,84 @@
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'
+import type { ScrvUsdYieldWithAverages } from '@/loan/entities/scrvusdYield'
+import { TOOLTIP_MAX_WIDTH } from '@/loan/components/PageCrvUsdStaking/Statistics/constants'
+import { TooltipProps } from 'recharts'
+import { t } from '@lingui/macro'
+import { Paper, Stack, Typography } from '@mui/material'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { useTheme } from '@mui/material/styles'
+import { toDate } from '@curvefi/prices-api/timestamp'
+import { formatDate } from '@ui/utils/utilsFormat'
+import LegendLine from '@/loan/components/PageCrvUsdStaking/Statistics/components/LegendLine'
+
+const { Spacing } = SizesAndSpaces
+
+const DataSet = ({
+  label,
+  value,
+  lineColor,
+  dash,
+}: {
+  label: string
+  value: string
+  lineColor: string
+  dash?: string
+}) => (
+  <Stack direction="row" justifyContent="space-between" alignItems="center">
+    <Stack direction="row" spacing={2} alignItems="center">
+      <LegendLine color={lineColor} dash={dash} />
+      <Typography variant="bodySRegular">{label}</Typography>
+    </Stack>
+    <Typography variant="bodySBold">{value}</Typography>
+  </Stack>
+)
+
+const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
+  const {
+    design: { Color, Layer },
+  } = useTheme()
+
+  if (!active || !payload || !payload.length) {
+    return null
+  }
+
+  const { timestamp, proj_apy, proj_apy_7d_avg, proj_apy_total_avg } = payload[0].payload as ScrvUsdYieldWithAverages
+
+  return (
+    <Paper
+      sx={{
+        backgroundColor: Layer[3].Fill,
+        padding: Spacing.md,
+        width: TOOLTIP_MAX_WIDTH, // fixed width to cap maximum width of tooltip
+        maxWidth: '80%',
+      }}
+      elevation={2}
+    >
+      <Typography variant="bodyMBold">{formatDate(toDate(timestamp), 'long')}</Typography>
+      <Stack
+        direction="column"
+        sx={{
+          marginTop: Spacing.sm,
+          padding: Spacing.sm,
+          gap: 1,
+          backgroundColor: Layer[2].Fill,
+        }}
+      >
+        <DataSet label={t`APR`} value={proj_apy.toFixed(2) + '%'} lineColor={Color.Primary[500]} />
+        <DataSet
+          label={t`7-day MA APR`}
+          value={proj_apy_7d_avg.toFixed(2) + '%'}
+          lineColor={Color.Secondary[500]}
+          dash="2 2"
+        />
+        <DataSet
+          label={t`Average APR`}
+          value={proj_apy_total_avg.toFixed(2) + '%'}
+          lineColor={Color.Tertiary[400]}
+          dash="4 4"
+        />
+      </Stack>
+    </Paper>
+  )
+}
+
+export default CustomTooltip