Add table of choices to Commitment modal

src/components/Modal/TACoCommitmentModal/index.tsx

@@ -1,35 +1,133 @@
-import { FC } from "react"
+import { FC, useState } from "react"
 import {
+  AlertBox,
   BodyLg,
+  BodyXs,
   Button,
-  Card,
-  H5,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  LabelSm,
-  BodyMd,
-  List,
-  ListItem,
+  Radio,
+  RadioGroup,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
 } from "@threshold-network/components"
 import TransactionSuccessModal from "../TransactionSuccessModal"
-import StakingStats from "../../StakingStats"
 import InfoBox from "../../InfoBox"
 import { BaseModalProps } from "../../../types"
-import { StakeData } from "../../../types/staking"
 import withBaseModal from "../withBaseModal"
-import { UnstakeType, ExternalHref } from "../../../enums"
-import Link from "../../Link"
-import ModalCloseButton from "../ModalCloseButton"
+import {
+  OnErrorCallback,
+  OnSuccessCallback,
+  useSendTransactionFromFn,
+} from "../../../web3/hooks"
+import { useThreshold } from "../../../contexts/ThresholdContext"
+import { stakingAppNameToThresholdAppService } from "../../../hooks/staking-applications/useStakingAppContract"
 
 export type TACoCommitProps = BaseModalProps & {
   stakingProvider: string
 }
 
+const submitCommitment = async (stakingProvider: string, choice: string) => {
+  console.log("submitting commitment")
+  console.log(stakingProvider)
+  console.log(parseInt(choice))
+  const threshold = useThreshold()
+  useSendTransactionFromFn(
+    threshold.multiAppStaking[stakingAppNameToThresholdAppService["taco"]]
+      .approveAuthorizationDecrease
+  )
+}
+
 // TACo Commitment Modal
 //  has two buttons, one for committing and one for canceling
-const TACoCommitmentModal: FC<TACoCommitProps> = ({}) => {
-  return <Card>{/* Header */}</Card>
+const TACoCommitmentModal: FC<TACoCommitProps> = ({
+  stakingProvider,
+  closeModal,
+}) => {
+  const [value, setValue] = useState("")
+  return (
+    <>
+      <ModalHeader>TACo App Commitment</ModalHeader>
+      <ModalBody>
+        <InfoBox mt="0" variant="modal">
+          <BodyLg>
+            You have the option of locking up your tokens for longer durations
+            in order to receive a yield bonus of corresponding size. There are 4
+            choices:
+          </BodyLg>
+        </InfoBox>
+        <RadioGroup onChange={setValue} value={value}>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th></Th>
+                <Th>Lock-up Duration</Th>
+                <Th>Yield Bonus</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              <Tr>
+                <Td>
+                  <Radio value="0" />
+                </Td>
+                <Td>9 months</Td>
+                <Td>0.5%</Td>
+              </Tr>
+              <Tr>
+                <Td>
+                  <Radio value="1" />
+                </Td>
+                <Td>12 months</Td>
+                <Td>1%</Td>
+              </Tr>
+              <Tr>
+                <Td>
+                  <Radio value="2" />
+                </Td>
+                <Td>18 months</Td>
+                <Td>2%</Td>
+              </Tr>
+              <Tr>
+                <Td>
+                  <Radio value="3" />
+                </Td>
+                <Td>24 months</Td>
+                <Td>3%</Td>
+              </Tr>
+            </Tbody>
+          </Table>
+        </RadioGroup>
+        <AlertBox
+          status="warning"
+          withIcon={false}
+          alignItems="center"
+          p={"8px 10px"}
+        >
+          <BodyXs>
+            Note that these durations include the obligatory and universal 6
+            month deauthorization delay.
+          </BodyXs>
+        </AlertBox>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={closeModal} variant="outline" mr={2}>
+          Cancel
+        </Button>
+        <Button
+          onClick={() => submitCommitment(stakingProvider, value)}
+          type="submit"
+        >
+          Commit
+        </Button>
+      </ModalFooter>
+    </>
+  )
 }
 
 export default withBaseModal(TACoCommitmentModal)

src/threshold-ts/applications/index.ts

@@ -414,6 +414,16 @@ export class Application implements IApplication {
     return await this._application.bondOperator(stakingProvider, operator)
   }
 
+  makeCommitment = async (
+    stakingProvider: string,
+    commitmentDuration: number
+  ): Promise<ContractTransaction> => {
+    return await this._application.makeCommitment(
+      stakingProvider,
+      commitmentDuration
+    )
+  }
+
   stakingProviderToOperator = async (
     stakingProvider: string
   ): Promise<string> => {