Add withdrawal amount input to airdrop management UI

contracts/cw20/merkleAirdrop/contract.ts

@@ -67,7 +67,7 @@ export interface CW20MerkleAirdropInstance {
   ) => Promise<string>
   claim: (stage: number, amount: string, proof: string[], signedMessage?: SignedMessage) => Promise<string>
   burn: (stage: number) => Promise<string>
-  withdraw: (stage: number, address: string) => Promise<string>
+  withdraw: (stage: number, address: string, amount?: number) => Promise<string>
   pause: (stage: number) => Promise<string>
   resume: (stage: number, newExpiration?: Expiration) => Promise<string>
   registerAndReleaseEscrow: (
@@ -103,7 +103,7 @@ export interface CW20MerkleAirdropMessages {
   ) => ClaimMessage
   fundWithSend: (recipient: string, amount: string) => FundWithSendMessage
   burn: (airdropAddress: string, stage: number) => BurnMessage
-  withdraw: (airdropAddress: string, stage: number, address: string) => WithdrawMessage
+  withdraw: (airdropAddress: string, stage: number, address: string, amount?: number) => WithdrawMessage
   pause: (airdropAddress: string, stage: number) => PauseMessage
   resume: (airdropAddress: string, stage: number, new_expiration?: Expiration) => ResumeMessage
 }
@@ -193,6 +193,7 @@ export interface WithdrawMessage {
     withdraw: {
       stage: number
       address: string
+      amount?: number
     }
   }
   funds: Coin[]
@@ -331,8 +332,13 @@ export const CW20MerkleAirdrop = (client: SigningCosmWasmClient, txSigner: strin
       return result.transactionHash
     }
 
-    const withdraw = async (stage: number, address: string): Promise<string> => {
-      const result = await client.execute(txSigner, contractAddress, { withdraw: { stage, address } }, fee)
+    const withdraw = async (stage: number, address: string, amount?: number): Promise<string> => {
+      const result = await client.execute(
+        txSigner,
+        contractAddress,
+        { withdraw: { stage, address, amount: amount?.toString() } },
+        fee,
+      )
       return result.transactionHash
     }
 
@@ -631,14 +637,15 @@ export const CW20MerkleAirdrop = (client: SigningCosmWasmClient, txSigner: strin
         funds: [],
       }
     }
-    const withdraw = (airdropAddress: string, stage: number, address: string): WithdrawMessage => {
+    const withdraw = (airdropAddress: string, stage: number, address: string, amount?: number): WithdrawMessage => {
       return {
         sender: txSigner,
         contract: airdropAddress,
         msg: {
           withdraw: {
             stage,
             address,
+            amount,
           },
         },
         funds: [],

pages/airdrops/manage.tsx

@@ -33,6 +33,7 @@ const ManageAirdropPage: NextPage = () => {
   const [loading, setLoading] = useState(false)
   const [airdrop, setAirdrop] = useState<AirdropProps | null>(null)
   const [amount, setAmount] = useState('0')
+  const [withdrawalAmount, setWithdrawalAmount] = useState<number | undefined>()
   const [contractAddress, setContractAddress] = useState(
     typeof router.query.contractAddress === 'string' ? router.query.contractAddress : '',
   )
@@ -52,7 +53,7 @@ const ManageAirdropPage: NextPage = () => {
   const withdrawMessage: any = airdrop
     ? merkleAirdropContract
         ?.messages()
-        ?.withdraw(airdrop.contractAddress, 1, recipientAddress ? recipientAddress : wallet.address)
+        ?.withdraw(airdrop.contractAddress, 1, recipientAddress ? recipientAddress : wallet.address, withdrawalAmount)
     : null
   const pauseMessage: any = airdrop ? merkleAirdropContract?.messages()?.pause(airdrop.contractAddress, 1) : null
   const resumeMessage: any = airdrop
@@ -209,6 +210,7 @@ const ManageAirdropPage: NextPage = () => {
       await merkleAirdropContractMessages.withdraw(
         withdrawMessage.msg.withdraw.stage,
         withdrawMessage.msg.withdraw.address,
+        withdrawMessage.msg.withdraw.amount,
       )
       setLoading(false)
 
@@ -433,12 +435,23 @@ const ManageAirdropPage: NextPage = () => {
                 <fieldset className="p-4 pl-0 space-y-4 rounded">
                   <Conditional test={Boolean(airdrop && !airdrop.escrow && !airdrop.processing)}>
                     <Input
-                      className="w-full"
+                      className="w-3/4"
                       onChange={(e) => setRecipientAddress(e.target.value)}
-                      placeholder="Enter recipient address"
+                      placeholder="Enter recipient address (wallet address by default)"
                       type="string"
                       value={recipientAddress?.toString()}
                     />
+                    <Input
+                      className="w-3/4"
+                      onChange={(e) => {
+                        Number(e.target.value) === 0
+                          ? setWithdrawalAmount(undefined)
+                          : setWithdrawalAmount(Number(e.target.value))
+                      }}
+                      placeholder="Enter the amount to be withdrawn"
+                      type="number"
+                      value={withdrawalAmount === 0 ? undefined : withdrawalAmount}
+                    />
                     <Button
                       isDisabled={!isExpired && !isPaused}
                       isLoading={loading}