Update frontend website with new features

[kpachhai]

We need to update the frontend a bit to make it more user friendly and as such we need the add the following features:

• [x] Leave some gaps between the different boxes. Right now, everything is so crowded so anything to improve this would be great

  

• [x] Add a dropdown button on the some of the boxes that lets users choose their storage(whether to choose "snap" or "googledrive". We will only need these dropdowns on some boxes that need them(eg. getSpecificVC, getAllVCs, createVC, removeVC, deleteAllVCs)

• [x] At the top of the page right underneath where it says "Get started by editing src/index.ts", we should show the currently connected info that displays info such as:

  • status(whether any account is connected to the website). Can show either "Connected" or "Disconnected". And clicking this should automatically execute the "Reconnect" feature of the snap. This is handled by handleConnectClick within the code
  • The account address that is currently connected
  • The network the account is connected to(eg. Ethereum, Hedera, etc). You can get this info by checking for the chain_id. For now, we only need to show either Ethereum or Hedera. But for any other chain_ids, just show the chain id. For hedera, also be sure to compare against all the different chain_ids as there are mainnet, testnet for hedera. You can refer to this at https://github.com/tuum-tech/identity-snap/blob/main/packages/snap/src/hedera/config.ts
  • If it's a hedera account, also show the accountid. You can get this info by interacting with getHederaAccountId API of the snap

• [x] Expand the textbox to show the entire text on some of the boxes like in the following:

  

  For example, on the getSpecificVC, we should be able to see the entire text in the input box. On some boxes like verifyVC and verifyVP, the user needs to enter the JSON object. We should show the entire JSON object and in a pretty format in multiple lines so we can see the entire JSON object clearly.

• [x] Change the alert boxes to modals so we can see the entire text on a modal rather than an alert box like right now

• [x] Make any other UX improvements on this page that you think is necessary to make it more appealing

• [x] We currently have another page that lives on http://localhost:8000/login but we don't have any link on the main page http://localhost:8000 from where we can get to this page. Add a menu at the top of the home page with a link to the login page titled "DID Auth Login"

• [x] Make the same UX changes to the http://localhost:8000/login page as http://localhost:8000. Currently, there are only 3 boxes on this page but that's ok. Feel free to improve this UI. Maybe you can just create new React components that you can reuse on both the home page and the login page.

[kpachhai]

Some feedback for the PR at https://github.com/tuum-tech/identity-snap/pull/50/files#diff-1839e4f2f77cc3e3003afb483a675849ec4f323adb7ab66ead563f664b35c227

• When you don't select any store, it throws an error right now. We should change this behavior so that if no store is selected, we don't throw any error because in the snap API, if no store is passed, it defaults to using "snap"
• Let's display the JSON result in a pretty format on the modal
• Currently, getAccountInfo snap API returns everything from the state. We SHOULD NEVER do this because the state contains private keys to the user's wallet and we don't want any apps tricking users to giving their account info. Rather, we should only return the relevant info such as evmaddress, public key and accountId(for hedera). NOTE: I have fixed this while merging your PR into main so don't worry about it but just wanted to let you know.