CR fixes

Joystream · Sep 15, 2023 · 682a7d5 · 682a7d5
1 parent 58071c2
commit 682a7d5
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/packages/atlas/src/components/_crt/StartRevenueShareModal/StartRevenueShareModal.tsx b/packages/atlas/src/components/_crt/StartRevenueShareModal/StartRevenueShareModal.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 
 import { FlexBox } from '@/components/FlexBox/FlexBox'
@@ -41,7 +41,6 @@ const datePickerItemsFactory = (days: number[]) =>
 const endDateItems = datePickerItemsFactory([7, 14, 30])
 
 export const StartRevenueShare = ({ tokenId, onClose, show }: SellTokenModalProps) => {
-  const [tokens, setTokens] = useState<number | null>(null)
   const smMatch = useMediaMatch('sm')
   const { patronageRate, userBalance, title } = getTokenDetails(tokenId)
 
@@ -51,33 +50,34 @@ export const StartRevenueShare = ({ tokenId, onClose, show }: SellTokenModalProp
     endDate: AuctionDatePickerProps['value'] | null
   }>()
   const { trigger, control, watch } = form
+  const [startDate, endDate, tokens] = watch(['startDate', 'endDate', 'tokens'])
 
   const details = useMemo(
     () => [
       {
         title: 'You will receive',
         content: (
           <FlexBox alignItems="baseline" width="fit-content">
-            <NumberFormat value={(tokens ?? 0) * patronageRate} as="p" variant="t100" color="colorText" withToken />
+            <NumberFormat value={(tokens || 0) * patronageRate} as="p" variant="t100" color="colorText" withToken />
             <Text variant="t100" as="p" color="colorText">
               ({Math.round(patronageRate * 100)}%)
             </Text>
           </FlexBox>
         ),
       },
       {
-        title: 'You will spend',
+        title: 'Your holders will receive',
         content: (
           <FlexBox alignItems="baseline" width="fit-content">
             <NumberFormat
-              value={(tokens ?? 0) * (1 - patronageRate)}
+              value={(tokens || 0) * (1 - patronageRate)}
               as="p"
               variant="t100"
               color="colorText"
               withToken
             />
             <Text variant="t100" as="p" color="colorText">
-              ( {Math.round(1 - patronageRate) * 100}%)
+              ( {Math.round((1 - patronageRate) * 100)}%)
             </Text>
           </FlexBox>
         ),
@@ -86,8 +86,6 @@ export const StartRevenueShare = ({ tokenId, onClose, show }: SellTokenModalProp
     [patronageRate, tokens]
   )
 
-  const [startDate, endDate] = watch(['startDate', 'endDate'])
-
   const selectDurationToDate = useCallback((value: AuctionDatePickerProps['value'], base?: Date) => {
     if (value?.type === 'date') {
       return value.date
@@ -121,24 +119,30 @@ export const StartRevenueShare = ({ tokenId, onClose, show }: SellTokenModalProp
             withDenomination
           />
         </FlexBox>
-        <FormField
-          label="Amount to share"
-          description="Those tokens will be withdrawn from your channel balance and divided between you and your token holders."
-        >
-          <TokenInput
-            value={tokens}
-            onChange={setTokens}
-            placeholder="0"
-            nodeEnd={
-              <FlexBox gap={2} alignItems="baseline">
-                <Text variant="t300" as="p" color="colorTextMuted">
-                  $0.00
-                </Text>
-                <TextButton>Max</TextButton>
-              </FlexBox>
-            }
-          />
-        </FormField>
+        <Controller
+          name="tokens"
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <FormField
+              label="Amount to share"
+              description="Those tokens will be withdrawn from your channel balance and divided between you and your token holders."
+            >
+              <TokenInput
+                value={value}
+                onChange={onChange}
+                placeholder="0"
+                nodeEnd={
+                  <FlexBox gap={2} alignItems="baseline">
+                    <Text variant="t300" as="p" color="colorTextMuted">
+                      $0.00
+                    </Text>
+                    <TextButton>Max</TextButton>
+                  </FlexBox>
+                }
+              />
+            </FormField>
+          )}
+        />
 
         <FlexBox flow="column" gap={2}>
           {details.map((row) => (