feat(Strategies): add landing page (#1466)

* feat(Strategies): add landing page

* fix: code review

src/component-library/Card/Card.tsx

@@ -17,7 +17,6 @@ type Props = {
   rounded?: BorderRadius;
   padding?: Spacing;
   shadowed?: boolean;
-
   onPress?: (e: PressEvent) => void;
 };
 

src/pages/Strategies/Strategies.style.tsx

@@ -1,13 +1,25 @@
 import styled from 'styled-components';
 
 import { theme } from '@/component-library';
-const StyledStrategiesLayout = styled.div`
+
+const StyledList = styled.div`
   display: grid;
-  gap: ${theme.spacing.spacing6};
-  @media (min-width: 80em) {
-    grid-template-columns: 1fr 1fr;
+  grid-auto-flow: row dense;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: ${theme.spacing.spacing4};
+
+  @media ${theme.breakpoints.up('sm')} {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media ${theme.breakpoints.up('lg')} {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media ${theme.breakpoints.up('xl')} {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  padding: ${theme.spacing.spacing6};
 `;
 
-export { StyledStrategiesLayout };
+export { StyledList };

src/pages/Strategies/Strategies.tsx

@@ -1,15 +1,52 @@
+import Big from 'big.js';
 import { withErrorBoundary } from 'react-error-boundary';
 
+import { Card, P } from '@/component-library';
+import { WRAPPED_TOKEN } from '@/config/relay-chains';
 import ErrorFallback from '@/legacy-components/ErrorFallback';
+import MainContainer from '@/parts/MainContainer';
+import { StrategyData, StrategyRisk } from '@/types/strategies';
 
-import { StrategyForm } from './components/StrategyForm';
-import { StyledStrategiesLayout } from './Strategies.style';
+import { StrategyCard } from './components';
+import { StyledList } from './Strategies.style';
+
+const STRATEGIES: StrategyData[] = [
+  { currency: WRAPPED_TOKEN, interestPercentage: new Big(3.22), interestType: 'apy', risk: StrategyRisk.LOW }
+];
 
 const Strategies = (): JSX.Element => {
+  const handlePress = () => {
+    // window.open(`${PAGES.STRATEGIES}/...`)
+  };
+
   return (
-    <StyledStrategiesLayout>
-      <StrategyForm riskVariant='low' />
-    </StyledStrategiesLayout>
+    <MainContainer>
+      <Card>
+        <P size='xs'>
+          Discover straightforward strategies with attractive annual percentage yields (APY) of up to 33.22%. Customize
+          your collateral and define your preferred risk parameters. Benefit from one-click aping, saving you time and
+          transaction fees!
+        </P>
+      </Card>
+      <StyledList>
+        {STRATEGIES.map((startegy, key) => (
+          <StrategyCard
+            key={key}
+            risk={startegy.risk}
+            isPressable
+            onPress={handlePress}
+            currency={startegy.currency}
+            interestType={startegy.interestType}
+            interestPercentage={startegy.interestPercentage}
+            title='BTC Passive Income'
+            description='Generate passive income by offering your IBTC to lending markets and benefit from automatic compounding rewards.'
+          />
+        ))}
+        <Card alignItems='center' justifyContent='center'>
+          <P size='xs'>More Strategies coming soon</P>
+        </Card>
+      </StyledList>
+    </MainContainer>
   );
 };
 

src/pages/Strategies/components/StrategyCard/StrategyCard.style.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+import { Flex, P, theme } from '@/component-library';
+
+const StyledEarningCard = styled(Flex)`
+  width: 100%;
+  background-color: var(--color-list-secondary-bg);
+  padding: ${theme.spacing.spacing3};
+  border-radius: ${theme.rounded.md};
+`;
+
+const StyledEarnSection = styled(P)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export { StyledEarningCard, StyledEarnSection };

src/pages/Strategies/components/StrategyCard/StrategyCard.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { formatPercentage } from '@/common/utils/utils';
+import { Card, CardProps, CoinIcon, Flex, H1, P, Strong } from '@/component-library';
+import { StrategyData, StrategyRisk } from '@/types/strategies';
+
+import { StrategyTag } from '../StrategyTag';
+import { StyledEarningCard, StyledEarnSection } from './StrategyCard.style';
+
+type Props = {
+  title: ReactNode;
+  description: ReactNode;
+} & StrategyData;
+
+type InheritAttrs = Omit<CardProps, keyof Props>;
+
+type StrategyCardProps = Props & InheritAttrs;
+
+const StrategyCard = ({
+  interestType,
+  interestPercentage,
+  currency,
+  description,
+  risk,
+  title,
+  ...props
+}: StrategyCardProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const interestTypeLabel = interestType === 'apr' ? t('apr') : t('apy');
+  const interestPercentageLable = formatPercentage(interestPercentage.toNumber());
+
+  return (
+    <Card {...props} alignItems='center' gap='spacing4'>
+      <Flex alignSelf='flex-start' gap='spacing1'>
+        <StrategyTag variant='risk' risk={risk} />
+        {(risk === StrategyRisk.LOW || risk === StrategyRisk.MEDIUM) && <StrategyTag variant='passive-income' />}
+      </Flex>
+      <CoinIcon size='xl2' ticker={currency.ticker} />
+      <H1 weight='bold' size='base' align='center' rows={1}>
+        {title}
+      </H1>
+      <StyledEarningCard justifyContent='center'>
+        <StyledEarnSection size='xs' align='center'>
+          Earn up to
+          <Strong size='base'>
+            {interestPercentageLable} {interestTypeLabel}
+          </Strong>
+        </StyledEarnSection>
+      </StyledEarningCard>
+      <P color='tertiary' size='xs' align='center'>
+        {description}
+      </P>
+    </Card>
+  );
+};
+
+export { StrategyCard };
+export type { StrategyCardProps };

src/pages/Strategies/components/StrategyCard/index.tsx

@@ -0,0 +1,2 @@
+export type { StrategyCardProps } from './StrategyCard';
+export { StrategyCard } from './StrategyCard';

src/pages/Strategies/components/StrategyTag/StrategyTag.style.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { Span, theme } from '@/component-library';
+
+const StyledTag = styled(Span)`
+  border: ${theme.border.default};
+  border-radius: ${theme.rounded.full};
+  padding: ${theme.spacing.spacing2};
+`;
+
+export { StyledTag };

src/pages/Strategies/components/StrategyTag/StrategyTag.tsx

@@ -0,0 +1,44 @@
+import { SpanProps, TextProps } from '@/component-library/Text';
+import { StrategyRisk } from '@/types/strategies';
+
+import { StyledTag } from './StrategyTag.style';
+
+const content: Record<StrategyRisk, { color: string; label: string }> = {
+  low: {
+    color: 'success',
+    label: 'Low Risk'
+  },
+  medium: {
+    color: 'warning',
+    label: 'Medium Risk'
+  },
+  high: {
+    color: 'error',
+    label: 'High Risk'
+  }
+};
+
+const getContent = (risk: StrategyRisk) => content[risk];
+
+type Props = {
+  variant: 'risk' | 'passive-income';
+  risk?: StrategyRisk;
+};
+
+type InheritAttrs = Omit<SpanProps, keyof Props>;
+
+type StrategyTagProps = Props & InheritAttrs;
+
+const StrategyTag = ({ variant, risk, ...props }: StrategyTagProps): JSX.Element => {
+  const { color, label } =
+    variant === 'risk' && risk ? getContent(risk) : { label: 'Passive Income', color: undefined };
+
+  return (
+    <StyledTag color={color as TextProps['color']} size='xs' {...props}>
+      {label}
+    </StyledTag>
+  );
+};
+
+export { StrategyTag };
+export type { StrategyTagProps };

src/pages/Strategies/components/StrategyTag/index.tsx

@@ -0,0 +1,2 @@
+export type { StrategyTagProps } from './StrategyTag';
+export { StrategyTag } from './StrategyTag';

src/pages/Strategies/components/index.ts

@@ -1 +1,2 @@
+export { StrategyCard } from './StrategyCard';
 export { StrategyForm } from './StrategyForm';

src/types/strategies.ts

@@ -0,0 +1,18 @@
+import { CurrencyExt } from '@interlay/interbtc-api';
+import Big from 'big.js';
+
+enum StrategyRisk {
+  LOW = 'low',
+  MEDIUM = 'medium',
+  HIGH = 'high'
+}
+
+type StrategyData = {
+  interestType: 'apy' | 'apr';
+  interestPercentage: Big;
+  risk: StrategyRisk;
+  currency: CurrencyExt;
+};
+
+export { StrategyRisk };
+export type { StrategyData };