From 6a80af95c24d8e8d5aadc23e665aee69ac5a1336 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Thu, 15 Jun 2023 13:25:47 +0300
Subject: [PATCH] Add royalty details

---
 components/openEdition/RoyaltyDetails.tsx | 113 ++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 components/openEdition/RoyaltyDetails.tsx

diff --git a/components/openEdition/RoyaltyDetails.tsx b/components/openEdition/RoyaltyDetails.tsx
new file mode 100644
index 0000000..8364ac8
--- /dev/null
+++ 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>
+  )
+}