This is an exercise from the Solana development course. I didn't use React dependencies as suggested in the course. Instead, I decided to make a Vue3 project. Key features of the project include connecting and interacting with the user's wallet, making calls to Solana program, fetching accounts, sorting them, and implementing search with pagination.
One of the shortcomings of this app is that it relies on a third-party wallet provider (solana-wallets-vue) to connect to a user's wallet. The connection to the wallet is returned synchronously, preventing smooth routing UX. When the app is mounted we cannot wait this information in an asynchronous way, which may result in a flash of content. On top of that, sometimes the request's fail or they take to long. There is no additional retry logic or timeouts, since optimization in this area is not a concern of this exercise.
I would like to take a closer look at the solana-wallets-vue to see if Wallet can be connected asynchronously.
Install dependencies by running and starting the development server
npm install && npm run devIf you you're using Alchemy to test your apps, you can simply copy the .env.example file and rename it to .env
cp .env.example .envNow replace <YOUR-API-KEY> with Alchemy's app ID
VITE_PUBLIC_ALCHEMY_RPC_URL="https://solana-devnet.g.alchemy.com/v2/<YOUR-API-KEY>"