Connect wallet

Small app developed with SvelteKit 5, TypeScript and TailwindCSS that allows you to connect to your MetaMask wallet on the Sepolia network and fetch your USDT balance.

You can see it live!

Extras

• Added prettier-plugin-tailwindcss to automatically reorder Tailwind utility classes. Makes reading code much easier and consistent, it's great.
• Deployed it in Vercel: https://connect-wallet-svelte.vercel.app/wallet
• For notifications I chose toasts. I think they are good for transient messages and to give immediate feedback to the user, I really like them. I decided to use a toast library to speed things up, but custom ones can also be implemented to match a design system. I investigated and found svelte-toast, looked easy to implement and went ahead with it. It allowed a nice bit of customization, although I think it could be even more minimal with special toasts for most common occurences like "Success" and "Error", where it would automatically style with green or red, for example. Overall works fine to add some elegant alerts when things are happening.
• Added animations with Tailwind and transitions with Svelte.

Considerations

• Some of Tailwind sizes are not pixel perfect according to Figma, I know it's possible to set custom specific sizes, but I remained inside the default utility classes provided for consistency. That's the beauty of Tailwind, great defaults. For example font-light provides a font-weight of 300, and in Figma says 400 for certain element.
• Didn't use feature branches, just pushed to main directly to speed things up and simplify. Could have done a feature branch called feat/connect-wallet-ui or something like that, then raise a PR and merge to main for the complete process.
• Built it with a mobile-first approach, as recommended by Tailwind.
• This was my first time with Svelte and Web3. Overall I really liked it, Svelte docs are pretty good and was able to transfer most React knowledge. Web3 concepts took a bit more to settle but slowly things make more sense. Great experience!

Improvements

• Responsive design for tablets could be improved a bit, I think it suits better the mobile layout and not the desktop one.
• The Svelte transition that I used to show the balance could be refined a bit more. Also, the button or the text of the button that changes could also be transitioned in.
• The disable of the button could be done more elegant if we used something like TanStack Query that provides callbacks when executing mutations or queries. For example disable the button while it's performing the action. Right now it's done with a state and flipping the value to true and false in multiple places, which could quickly become hard to follow and bug-prone if more conditions want to be considered.
• State could be grouped into a single object called wallet that manages all the wallet related state, maybe something like a Store.
• Unit testing could be added with a tool like vitest

Run the project

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

npm run build