Creating the Necessary Block Scoped Constants

export default function Home() {
  const [message, setMessage] = useState("");
  const [balance, setBalance] = useState(0);
  const [allocationList, setAllocationList] = useState([]);
  const [selectedAllocation, setSelectedAllocation] = useState();
  const [allocationDetails, setAllocationDetails] = useState();
  const [filesForUpload, setFilesForUpload] = useState([]);
  const [fileList, setFilesList] = useState([]);
  const [destFileList, setDestFilesList] = useState([]);
  const [selectedFile, setSelectedFile] = useState();
  const [clientId, setClientId] = useState(newWallet.clientId);
  const [privateKey, setPrivateKey] = useState(newWallet.privateKey);
  const [publicKey, setPublicKey] = useState(newWallet.publicKey);
  const [sendTo, setSendTo] = useState(
    "0ab9c5ab5effbe47db31299aff6464e7b447e7fb372109758c0d9dcd596b5429"
  );
  const [sendAmount, setSendAmount] = useState("10000000000");
  const [authTicket, setAuthTicket] = useState(
    "eyJjbGllbnRfaWQiOiIiLCJvd25lcl9pZCI6IjdkMzVhNmMzYmE1MDY2ZTYyOTg5ZDM0Y2VlN2RkNDM0ZDA4MzNkNWVhOWZmMDA5MjhhYTg5OTk0ZDgwZTQ3MDAiLCJhbGxvY2F0aW9uX2lkIjoiMDZmNzRhYWE1OWVmM2E5M2I1NmNkM2E3NTMxODlkODkzNjMzMDllYzk4NWNmMTRiMmMyMTBkYzhkYTFkZmVhNyIsImZpbGVfcGF0aF9oYXNoIjoiODc1MTA4NDFhZDJkZjViZjUwMTA3Yzg1MWNmMDU0ZDVkYzc0YTU2ZTg0NjFjYzBmYmNhZTMzNGVhNzJmNWRlYSIsImFjdHVhbF9maWxlX2hhc2giOiI1ZWRiN2E5ZTIyM2ZkMzVlODczYzJhMzQzZjFhZWZjMGE5ZjE0MWY0YzdkZDZmNzYxOTA4N2YxNGI1OGUyYjU2IiwiZmlsZV9uYW1lIjoiMS5wbmciLCJyZWZlcmVuY2VfdHlwZSI6ImYiLCJleHBpcmF0aW9uIjowLCJ0aW1lc3RhbXAiOjE2NzY0NDQ4OTgsImVuY3J5cHRlZCI6ZmFsc2UsInNpZ25hdHVyZSI6IjcxNzhiODBjYjQ1M2Q3NWUyYzg1YThiNTM4YjAxYjQ1ZTBhY2UwYjdmOGZiZmNjN2RlYzE3NTQ5OTNiZmUwOTMifQ=="
  );
  const [allocationSize, setAllocationSize] = useState(2147483648);
  const [dirName, setDirName] = useState("/test");
  const [output, setOutput] = useState("");
  const [encryptKey, setEncryptKey] = useState("");
  const [mnemonic, setMnemonic] = useState(
    "plunge tray magic student meat basic wheel mountain elevator neglect ginger oyster gallery hen ensure roast lake stage color oval antenna plug orchard initial"
  );
  const [txHash, setTxHash] = useState("abc");

  const configJson = {
    chainId: "0afc093ffb509f059c55478bc1a60351cef7b4e9c008a53a6cc8241ca8617dfe",
    signatureScheme: "bls0chain",
    minConfirmation: 50,
    minSubmit: 50,
    confirmationChainLength: 3,
    blockWorker: "https://dev.zus.network/dns",
    zboxHost: "https://0box.dev.zus.network",
    zboxAppType: "vult",
  };

  const config = [
    configJson.chainId,
    configJson.blockWorker,
    configJson.signatureScheme,
    configJson.minConfirmation,
    configJson.minSubmit,
    configJson.confirmationChainLength,
    configJson.zboxHost,
    configJson.zboxAppType,
  ];

Describing Code :

• Line 2 to 50 define various variables under the Home function to assign and set values ,const is a signal that the variables won’t be reassigned and React useState Hook allows us to track state of various values assigned to variables.

  Here is the list of variables and their description

  message: Track Message

  balance : Track Wallet Balance

  allocationList : Track List of Allocations

  selectedAllocation : Track Selected Allocation

  allocationDetails : Track Allocation Details

  filesForUpload : TrackList of files selected for upload

  fileList : Track all available files.

  destFileList : Track list of all files available at the destination.

  selectedFile : Track the selected file by the user.

  clientId : Track value of wallet clientID

  privateKey : Track Value of wallet private key.

  publicKey: Track Value of wallet public key.

  sendTo : Track value of sendTo Wallet Client ID

  sendAmount : Track the amount send to sender's wallet.

  authTicket : Track the wallet AuthTicket. allocationSize : Track allocation Size.Current is 2GB dirName:Track directory name ("/test"); output : Track output . encryptKey : Track Wallet Encryption Key mnemonic : Track Wallet Mnemonic Phrase txHash : Track Transaction Hash configJson: Contains data related to Züs network configuration in json format. config: Contains data related to Züs network config.

Note : the set variables for all the variables described above set values provided by use state.