Merge development

env.d.ts

@@ -27,6 +27,7 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_ESCROW_CONTRACT_ADDRESS: string
     readonly NEXT_PUBLIC_NETWORK: string
     readonly NEXT_PUBLIC_WEBSITE_URL: string
+    readonly NEXT_PUBLIC_AIRDROP_ACCOUNT_LIMIT: string
 
     readonly NEXT_PUBLIC_S3_BUCKET: string
     readonly NEXT_PUBLIC_S3_ENDPOINT: string

pages/airdrops/create.tsx

@@ -6,6 +6,7 @@ import { AirdropsStepper } from 'components/AirdropsStepper'
 import { Alert } from 'components/Alert'
 import { Anchor } from 'components/Anchor'
 import { Button } from 'components/Button'
+import { Conditional } from 'components/Conditional'
 import { FormControl } from 'components/FormControl'
 import { Input } from 'components/Input'
 import { InputDateTime } from 'components/InputDateTime'
@@ -311,7 +312,7 @@ const CreateAirdropPage: NextPage = () => {
   }
 
   const isValidToCreate =
-    projectName !== '' && accountsFile !== null && tokenType === 'native' ? true : cw20TokenAddress !== ''
+    projectName !== '' && fileContents !== null && tokenType === 'native' ? true : cw20TokenAddress !== ''
 
   return (
     <div className="relative py-6 px-12 space-y-8">
@@ -488,26 +489,19 @@ const CreateAirdropPage: NextPage = () => {
               />
             </div>
           )}
-          {/* TODO: replace with JsonPreview component */}
-          {accountsFile && (
-            <div className="flex flex-col bg-stone-800/80 rounded border-2 border-white/20">
-              <div className="flex justify-center py-2 px-4 space-x-2 border-b-2 border-white/20">
-                <span className="font-mono">{accountsFile.name}</span>
-                <button
-                  className="flex items-center text-plumbus hover:text-plumbus-light rounded-full"
-                  onClick={removeFileOnClick}
-                  type="button"
-                >
-                  <IoCloseSharp size={22} />
-                </button>
-              </div>
-              {fileContents && (
-                <div className="overflow-auto p-2 h-[400px] font-mono text-sm hover:resize-y">
-                  <pre>{JSON.stringify(fileContents, null, 2).trim()}</pre>
-                </div>
-              )}
+          <Conditional test={accountsFile !== null}>
+            <div className="flex justify-center py-2 px-4 space-x-2">
+              <span className="font-mono">{accountsFile?.name}</span>
+              <button
+                className="flex items-center text-plumbus hover:text-plumbus-light rounded-full"
+                onClick={removeFileOnClick}
+                type="button"
+              >
+                <IoCloseSharp size={22} />
+              </button>
             </div>
-          )}
+            <JsonPreview content={fileContents} initialState={false} />
+          </Conditional>
         </FormControl>
       </div>
 

utils/constants.ts

@@ -21,6 +21,8 @@ export const BLOCK_EXPLORER_URL = process.env.NEXT_PUBLIC_BLOCK_EXPLORER_URL
 
 export const WEBSITE_URL = process.env.NEXT_PUBLIC_WEBSITE_URL
 
+export const AIRDROP_ACCOUNT_LIMIT = parseInt(process.env.NEXT_PUBLIC_AIRDROP_ACCOUNT_LIMIT, 10)
+
 export interface AirdropProps {
   name: string
   contractAddress: string

utils/isValidAccountsFile.ts

@@ -1,5 +1,6 @@
 import { toast } from 'react-hot-toast'
 
+import { AIRDROP_ACCOUNT_LIMIT } from './constants'
 import { isValidAddress } from './isValidAddress'
 
 export interface AccountProps {
@@ -8,9 +9,14 @@ export interface AccountProps {
 }
 
 export const isValidAccountsFile = (file: AccountProps[]) => {
-  const duplicateCheck = file
-    .map((account) => account.address)
-    .filter((address, index, self) => self.indexOf(address) !== index)
+  // TODO: Think about duplicate values again
+  // const duplicateCheck = file
+  //   .map((account) => account.address)
+  //   .filter((address, index, self) => self.indexOf(address) !== index)
+
+  if (file.length > AIRDROP_ACCOUNT_LIMIT) {
+    throw new Error(`Accounts file must have less than ${AIRDROP_ACCOUNT_LIMIT} accounts`)
+  }
 
   const checks = file.map((account) => {
     // Check if address is valid bech32 address
@@ -44,10 +50,10 @@ export const isValidAccountsFile = (file: AccountProps[]) => {
     return false
   }
 
-  if (duplicateCheck.length > 0) {
-    toast.error('The file contains duplicate addresses.')
-    return false
-  }
+  // if (duplicateCheck.length > 0) {
+  //   toast.error('The file contains duplicate addresses.')
+  //   return false
+  // }
 
   return true
 }