Implement Add Keys for Badge Actions > Actions

components/badges/actions/Action.tsx

@@ -29,7 +29,7 @@ import { toast } from 'react-hot-toast'
 import { FaArrowRight } from 'react-icons/fa'
 import { useMutation } from 'react-query'
 import * as secp256k1 from 'secp256k1'
-import { sha256 } from 'utils/hash'
+import { generateKeyPairs, sha256 } from 'utils/hash'
 import { isValidAddress } from 'utils/isValidAddress'
 import { resolveAddress } from 'utils/resolveAddress'
 
@@ -57,9 +57,10 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
   const [resolvedOwnerAddress, setResolvedOwnerAddress] = useState<string>('')
   const [editFee, setEditFee] = useState<number | undefined>(undefined)
   const [triggerDispatch, setTriggerDispatch] = useState<boolean>(false)
-  const [keyPairs, setKeyPairs] = useState<string[]>([])
+  const [keyPairs, setKeyPairs] = useState<{ publicKey: string; privateKey: string }[]>([])
   const [signature, setSignature] = useState<string>('')
   const [ownerList, setOwnerList] = useState<string[]>([])
+  const [numberOfKeys, setNumberOfKeys] = useState(0)
 
   const actionComboboxState = useActionsComboboxState()
   const type = actionComboboxState.value?.id
@@ -250,7 +251,7 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
     owner: resolvedOwnerAddress,
     pubkey: pubKeyState.value,
     signature,
-    keys: [],
+    keys: keyPairs.map((keyPair) => keyPair.publicKey),
     limit: limitState.value || undefined,
     owners: [
       ...new Set(
@@ -379,6 +380,21 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
       handleGenerateSignature(badgeId, resolvedOwnerAddress, privateKeyState.value)
   }, [privateKeyState.value, resolvedOwnerAddress])
 
+  useEffect(() => {
+    if (numberOfKeys > 0) {
+      setKeyPairs(generateKeyPairs(numberOfKeys))
+    }
+  }, [numberOfKeys])
+
+  const handleDownloadKeys = () => {
+    const element = document.createElement('a')
+    const file = new Blob([JSON.stringify(keyPairs)], { type: 'text/plain' })
+    element.href = URL.createObjectURL(file)
+    element.download = `badge-${badgeId.toString()}-keys.json`
+    document.body.appendChild(element)
+    element.click()
+  }
+
   const { isLoading, mutate } = useMutation(
     async (event: FormEvent) => {
       if (!wallet.client) {
@@ -529,6 +545,44 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
           {showPubKeyField && <TextInput className="mt-2" {...pubKeyState} />}
           {showPrivateKeyField && <TextInput className="mt-2" {...privateKeyState} />}
           {showLimitState && <NumberInput className="mt-2" {...limitState} />}
+          <Conditional test={isEitherType(type, ['purge_owners', 'purge_keys'])}>
+            <Alert className="mt-4" type="info">
+              This action is only available if the badge with the specified id is either minted out or expired.
+            </Alert>
+          </Conditional>
+
+          <Conditional test={type === 'add_keys'}>
+            <div className="flex flex-row justify-start py-3 mt-4 mb-3 w-full rounded border-2 border-white/20">
+              <div className="grid grid-cols-2 gap-24">
+                <div className="flex flex-col ml-4">
+                  <span className="font-bold">Number of Keys</span>
+                  <span className="text-sm text-white/80">
+                    The number of public keys to be whitelisted for minting badges
+                  </span>
+                </div>
+                <input
+                  className="p-2 mt-4 w-1/2 max-w-2xl h-1/2 bg-white/10 rounded border-2 border-white/20"
+                  onChange={(e) => setNumberOfKeys(Number(e.target.value))}
+                  required
+                  type="number"
+                  value={numberOfKeys}
+                />
+              </div>
+            </div>
+          </Conditional>
+
+          <Conditional test={numberOfKeys > 0 && type === 'add_keys'}>
+            <Alert type="info">
+              <div className="pt-2">
+                <span className="mt-2">
+                  Make sure to download the whitelisted public keys together with their private key counterparts.
+                </span>
+                <Button className="mt-2" onClick={() => handleDownloadKeys()}>
+                  Download Key Pairs
+                </Button>
+              </div>
+            </Alert>
+          </Conditional>
 
           <Conditional test={showOwnerList}>
             <div className="mt-4">

components/badges/actions/actions.ts

@@ -28,11 +28,6 @@ export const BY_KEY_ACTION_LIST: ActionListItem[] = [
     name: 'Edit Badge',
     description: `Edit badge metadata for the badge with the specified ID`,
   },
-  {
-    id: 'purge_owners',
-    name: 'Purge Owners',
-    description: `Purge owners from the badge with the specified ID`,
-  },
   {
     id: 'mint_by_key',
     name: 'Mint by Key',
@@ -43,6 +38,11 @@ export const BY_KEY_ACTION_LIST: ActionListItem[] = [
     name: 'Airdrop by Key',
     description: `Airdrop badges to a list of specified addresses`,
   },
+  {
+    id: 'purge_owners',
+    name: 'Purge Owners',
+    description: `Purge owners from the badge with the specified ID`,
+  },
 ]
 
 export const BY_KEYS_ACTION_LIST: ActionListItem[] = [
@@ -51,6 +51,11 @@ export const BY_KEYS_ACTION_LIST: ActionListItem[] = [
     name: 'Edit Badge',
     description: `Edit badge metadata for the badge with the specified ID`,
   },
+  {
+    id: 'mint_by_keys',
+    name: 'Mint by Keys',
+    description: `Mint a new badge with a whitelisted private key`,
+  },
   {
     id: 'add_keys',
     name: 'Add Keys',
@@ -66,11 +71,6 @@ export const BY_KEYS_ACTION_LIST: ActionListItem[] = [
     name: 'Purge Owners',
     description: `Purge owners from the badge with the specified ID`,
   },
-  {
-    id: 'mint_by_keys',
-    name: 'Mint by Keys',
-    description: `Mint a new badge with a whitelisted private key`,
-  },
 ]
 
 export const BY_MINTER_ACTION_LIST: ActionListItem[] = [
@@ -79,16 +79,16 @@ export const BY_MINTER_ACTION_LIST: ActionListItem[] = [
     name: 'Edit Badge',
     description: `Edit badge metadata for the badge with the specified ID`,
   },
-  {
-    id: 'purge_owners',
-    name: 'Purge Owners',
-    description: `Purge owners from the badge with the specified ID`,
-  },
   {
     id: 'mint_by_minter',
     name: 'Mint by Minter',
     description: `Mint a new badge to specified owner addresses`,
   },
+  {
+    id: 'purge_owners',
+    name: 'Purge Owners',
+    description: `Purge owners from the badge with the specified ID`,
+  },
 ]
 
 export interface DispatchExecuteProps {