Add royalty details

2023-06-15 13:25:47 +03:00 · 2023-06-15 13:25:47 +03:00 · 6a80af95c2
commit 6a80af95c2
parent 8446caf3f5
1 changed files with 113 additions and 0 deletions
--- a/components/openEdition/RoyaltyDetails.tsx
+++ b/components/openEdition/RoyaltyDetails.tsx
@ -0,0 +1,113 @@
+import { Conditional } from 'components/Conditional'
+import { FormGroup } from 'components/FormGroup'
+import { useInputState } from 'components/forms/FormInput.hooks'
+import { useWallet } from 'contexts/wallet'
+import React, { useEffect, useState } from 'react'
+import { resolveAddress } from 'utils/resolveAddress'
+
+import { NumberInput, TextInput } from '../forms/FormInput'
+
+interface RoyaltyDetailsProps {
+  onChange: (data: RoyaltyDetailsDataProps) => void
+}
+
+export interface RoyaltyDetailsDataProps {
+  royaltyType: RoyaltyState
+  paymentAddress: string
+  share: number
+}
+
+type RoyaltyState = 'none' | 'new'
+
+export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
+  const wallet = useWallet()
+  const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
+
+  const royaltyPaymentAddressState = useInputState({
+    id: 'royalty-payment-address',
+    name: 'royaltyPaymentAddress',
+    title: 'Payment Address',
+    subtitle: 'Address to receive royalties',
+    placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
+  })
+
+  const royaltyShareState = useInputState({
+    id: 'royalty-share',
+    name: 'royaltyShare',
+    title: 'Share Percentage',
+    subtitle: 'Percentage of royalties to be paid',
+    placeholder: '5%',
+  })
+
+  useEffect(() => {
+    void resolveAddress(
+      royaltyPaymentAddressState.value
+        .toLowerCase()
+        .replace(/,/g, '')
+        .replace(/"/g, '')
+        .replace(/'/g, '')
+        .replace(/ /g, ''),
+      wallet,
+    ).then((royaltyPaymentAddress) => {
+      royaltyPaymentAddressState.onChange(royaltyPaymentAddress)
+      const data: RoyaltyDetailsDataProps = {
+        royaltyType: royaltyState,
+        paymentAddress: royaltyPaymentAddressState.value,
+        share: Number(royaltyShareState.value),
+      }
+      onChange(data)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
+
+  return (
+    <div className="py-3 px-8 rounded border-2 border-white/20">
+      <div className="flex justify-center">
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={royaltyState === 'none'}
+            className="peer sr-only"
+            id="royaltyRadio1"
+            name="royaltyRadioOptions1"
+            onClick={() => {
+              setRoyaltyState('none')
+            }}
+            type="radio"
+            value="None"
+          />
+          <label
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+            htmlFor="royaltyRadio1"
+          >
+            No royalty
+          </label>
+        </div>
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={royaltyState === 'new'}
+            className="peer sr-only"
+            id="royaltyRadio2"
+            name="royaltyRadioOptions2"
+            onClick={() => {
+              setRoyaltyState('new')
+            }}
+            type="radio"
+            value="Existing"
+          />
+          <label
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+            htmlFor="royaltyRadio2"
+          >
+            Configure royalty details
+          </label>
+        </div>
+      </div>
+      <Conditional test={royaltyState === 'new'}>
+        <FormGroup subtitle="Information about royalty" title="Royalty Details">
+          <TextInput {...royaltyPaymentAddressState} isRequired />
+          <NumberInput {...royaltyShareState} isRequired />
+        </FormGroup>
+      </Conditional>
+    </div>
+  )
+}