Merge pull request #1 from 0xsks/frontend

Enjoy Frontend

package.json

@@ -35,5 +35,9 @@
   "devDependencies": {
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.12.4",
+    "react-countdown": "^2.3.5"
   }
 }

packages/nextjs/app/Farm/Farm.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useMemo } from 'react'
+import { getMasterChefContract } from '~~/app/tokens/utils'
+import { getContract } from '~~/app/utils/erc20'
+
+import Spacer from '~~/app/components/Spacer'
+import useFarm from '~~/app/hooks/useFarm'
+import useRedeem from '~~/app/hooks/useRedeem'
+import Button from '~~/app/components/Button'
+import Harvest from './components/Harvest'
+import Stake from './components/Stake'
+import useETH from '~~/app/hooks/useETH'
+
+
+
+
+const Farm: React.FC = () => {
+  const farmId = "1"
+  const {
+    pid,
+    lpToken,
+    lpTokenAddress,
+    tokenAddress,
+    earnToken,
+    name,
+    icon,
+  } = useFarm(farmId) || {
+    pid: 0,
+    lpToken: '',
+    lpTokenAddress: '',
+    tokenAddress: '',
+    earnToken: '',
+    name: '',
+    icon: '',
+  }
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
+  const vbtc:unknown = "" 
+  const { eth } = useETH()
+  const provider = eth?.provider
+
+  const lpContract = useMemo(() => {
+    return getContract(provider, lpTokenAddress)
+  }, [provider, lpTokenAddress])
+
+  const { onRedeem } = useRedeem(getMasterChefContract(vbtc as Vbtc))
+
+  const lpTokenName = useMemo(() => {
+    return lpToken.toUpperCase()
+  }, [lpToken])
+
+  const earnTokenName = useMemo(() => {
+    return earnToken.toUpperCase()
+  }, [earnToken])
+
+  const getSymbol = (icon: string): any => {
+    switch (icon) {
+      case '1':
+        return ''
+      case '2':
+        return ''
+      case '3':
+        return ''
+      default:
+        return icon
+    }
+  }
+
+  return (
+    <>
+      <Spacer size="sm" />
+      <Spacer size="lg" />
+      <>
+        <>
+          <>
+            <Harvest pid={pid} />
+          </>
+          <Spacer />
+          <>
+            <Stake
+              lpContract={lpContract}
+              pid={pid}
+              icon={icon}
+              tokenName={lpToken.toUpperCase()}
+            />
+          </>
+        </>
+        <Spacer size="lg" />
+        <>
+          ⭐️ Every time you stake and unstake LP tokens, the contract will
+          automagically harvest $TRDL rewards for you!
+        </>
+        <Spacer size="lg" />
+      </>
+    </>
+  )
+}
+
+const StyledFarm = `
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`
+
+const StyledCardsWrapper = `
+  display: flex;
+  width: 600px;
+  @media (max-width: 768px) {
+    width: 100%;
+    flex-flow: column nowrap;
+    align-items: center;
+  }
+`
+
+const StyledCardWrapper = `
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  @media (max-width: 768px) {
+    width: 80%;
+  }
+`
+
+const StyledInfo = `
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+`
+
+export default Farm

packages/nextjs/app/Farm/components/DepositModal.tsx

@@ -0,0 +1,67 @@
+import BigNumber from 'bignumber.js'
+import React, { useCallback, useMemo, useState } from 'react'
+import Button from '~~/app/components/Button'
+import Modal, { ModalProps } from '~~/app/components/Modal'
+import ModalActions from '~~/app/components/ModalActions'
+import ModalTitle from '~~/app/components/ModalTitle'
+import TokenInput from '~~/app/components/TokenInput'
+import { getFullDisplayBalance } from '~~/app/utils/formatBalance'
+
+interface DepositModalProps extends ModalProps {
+  max: BigNumber
+  onConfirm: (amount: string) => void
+  tokenName?: string
+}
+
+const DepositModal: React.FC<DepositModalProps> = ({
+  max,
+  onConfirm,
+  onDismiss,
+  tokenName = '',
+}) => {
+  const [val, setVal] = useState('')
+  const [pendingTx, setPendingTx] = useState(false)
+
+  const fullBalance = useMemo(() => {
+    return getFullDisplayBalance(max)
+  }, [max])
+
+  const handleChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => {
+      setVal(e.currentTarget.value)
+    },
+    [setVal],
+  )
+
+  const handleSelectMax = useCallback(() => {
+    setVal(fullBalance)
+  }, [fullBalance, setVal])
+
+  return (
+    <Modal>
+      <ModalTitle text={`Deposit ${tokenName} Tokens`} />
+      <TokenInput
+        value={val}
+        onSelectMax={handleSelectMax}
+        onChange={handleChange}
+        max={fullBalance}
+        symbol={tokenName}
+      />
+      <ModalActions>
+        <Button text="Cancel" variant="secondary" onClick={onDismiss} />
+        <Button
+          disabled={pendingTx}
+          text={pendingTx ? 'Pending Confirmation' : 'Confirm'}
+          onClick={async () => {
+            setPendingTx(true)
+            await onConfirm(val)
+            setPendingTx(false)
+            onDismiss()
+          }}
+        />
+      </ModalActions>
+    </Modal>
+  )
+}
+
+export default DepositModal

packages/nextjs/app/Farm/components/Harvest.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import Button from '~~/app/components/Button'
+import Card from '~~/app/components/Card'
+import CardContent from '~~/app/components/CardContent'
+import CardIcon from '~~/app/components/CardIcon'
+import Label from '~~/app/components/Label'
+import Value from '~~/app/components/Value'
+import useEarnings from '~~/app/hooks/useEarnings'
+import useReward from '~~/app/hooks/useReward'
+import { getBalanceNumber } from '~~/app/utils/formatBalance'
+import StrudelIcon from '~~/app/assets/img/STRDL_icon.svg'
+interface HarvestProps {
+  pid: number
+}
+
+const Harvest: React.FC<HarvestProps> = ({ pid }) => {
+  const earnings = useEarnings(pid)
+  const [pendingTx, setPendingTx] = useState(false)
+  const { onReward } = useReward(pid)
+
+  return (
+    <Card>
+      <CardContent>
+        <StyledCardContentInner>
+          <StyledCardHeader>
+            <CardIcon>
+              <img src={StrudelIcon} height="55px" />
+            </CardIcon>
+            <Value value={getBalanceNumber(earnings)} />
+            <Label text="STRUDEL Earned" />
+          </StyledCardHeader>
+          <StyledCardActions>
+            <Button
+              disabled={!earnings.toNumber() || pendingTx}
+              text={pendingTx ? 'Collecting STRUDEL' : 'Harvest'}
+              onClick={async () => {
+                setPendingTx(true)
+                await onReward()
+                setPendingTx(false)
+              }}
+            />
+          </StyledCardActions>
+        </StyledCardContentInner>
+      </CardContent>
+    </Card>
+  )
+}
+
+const StyledCardHeader = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+`
+const StyledCardActions = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`
+
+const StyledSpacer = styled.div`
+  height: ${(props) => props.theme.spacing[4]}px;
+  width: ${(props) => props.theme.spacing[4]}px;
+`
+
+const StyledCardContentInner = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+export default Harvest