Archive: a SolidJS, Tailwind CSS, and Web3 prototype

This 2022 post records how I used a small prototype to learn SolidJS, Tailwind CSS, and Web3.js. It is not a current starter kit. The framework templates, dependency versions, environment-variable conventions, and wallet APIs have changed.

What I was trying to learn

I wanted one small application that could answer three practical questions: how SolidJS composes an interface, how Tailwind CSS fits into that project, and how a browser application reads a value from an Ethereum provider.

The prototype displayed a block number and exposed a wallet-connection action. That was enough to exercise a reactive component, a styling pipeline, a provider connection, and a user-approved account request without pretending that the result was a complete decentralised application.

The historical outline

The original walkthrough used a SolidJS template, added Tailwind CSS and Web3.js, configured an Infura key through an environment file, then built a component that:

  1. created a provider for an Ethereum RPC endpoint;
  2. requested accounts from a browser wallet after the user initiated the action; and
  3. read and rendered the current block number.

The original source used npx degit solidjs/templates, Yarn, Web3, and an INFURA_KEY variable. Those details belong to the 2022 experiment. They should be replaced with the current setup guidance from the relevant project before starting a new application.

The parts worth carrying forward

Keep secrets out of client bundles. Ask for a wallet connection only after a clear user action. Treat a wallet address, a network selection, and a signed transaction as different states. Make the network and expected contract explicit before presenting a signing request.

The prototype was a learning exercise, not a security review or a production wallet integration. A current application also needs an explicit chain policy, dependency review, error handling, transaction-state handling, and a clear account of where data and signing authority travel.