A crypto exchange frontend built around wallet connections
A trading platform is only as approachable as its wallet connection flow. For this crypto exchange, delivered under NDA, we worked on the frontend: letting users link external wallets through WalletConnect and manage balances and transfers in web wallet screens, without the browser layer ever holding their private keys.
The engagement ran for four months from July 2021. The team was compact — a team lead, a backend developer and two frontend developers — and we filled one of the two frontend roles.
Key features
- WalletConnect integration — session pairing with external wallet apps, transaction signing requests and connection state handling.
- Web wallet flows — balances, transfers and transaction confirmation screens, built end to end.
- Lit web components — reusable interface building blocks packaged as standard custom elements and used inside the React application.
- Backend communication — the frontend talks to the exchange's Express.js services, which keep their data in MongoDB.
How WalletConnect shapes an exchange frontend
WalletConnect lets a web app work with a wallet the user already has. The app opens a session — typically through a QR code on desktop or a deep link on mobile — and from then on each sensitive action is a request the user approves or rejects inside their own wallet. The exchange frontend never touches a private key.
That model moves real work into the interface. The frontend has to show whether a session is live, wait for a signature that may arrive in seconds or not at all, and recover when the user closes the wallet app or ends the session from the other side. Transfer screens that treat "sent to wallet", "signed" and "rejected" as distinct states save users from guessing whether a transfer went through.
Architecture and tech stack
Frontend
The exchange interface is written in React, with reusable components built in Lit. Lit components are standard web components, so they render inside React without depending on it. The boundary needs care: rich data is set as element properties rather than attributes, and changes come back as DOM events rather than React callbacks.
Wallet connectivity
WalletConnect carries the link between the exchange and external wallet apps — pairing, session state and signing requests. The web wallet flows for balances, transfers and confirmations are built on top of it.
Backend and data
The frontend communicates with an Express.js backend that stores its data in MongoDB. On the frontend side of that boundary sit the requests, the loading and error states, and keeping wallet screens consistent with what the API returns.
Our role
We worked as one of two frontend developers in a four-person team, alongside a team lead and a backend developer. Our scope covered the exchange frontend in React and Lit, the WalletConnect integration and the web wallet flows. Further project details remain under NDA.
Related work
For another wallet-connected interface, see our TronLink frontend for a natural-resource trading DAO, or the crypto exchange with custody features, where we led the team. Frontends like this fall under our web app development service.
