01 / Case study
The challenge
A crypto exchange flow must coordinate assets, networks, balance, input amounts, recipient addresses and wallet state. Estimates lead to service requests and on-chain payments, whose results must remain associated with the original exchange. The challenge was making these stages understandable and traceable from asset selection to the final result.
My contribution
My responsibility covered frontend development and Solidity smart contracts. Work included the React interface, wallet connection, asset and network selection, exchange estimates and operation status. ethers.js and Web3 connect the interface to contracts, while the exchange flow combines API services with on-chain operations. The supplied source version places the project in 1401 SH (2022–2023).
Assets & exchange route
Tokens & networks
Select sending and receiving assets, each side's network and the recipient address. Token details and chain IDs are passed to the exchange analysis request.
Balance & input amount
Display wallet balance and a maximum-amount action, accept the sending amount and handle displayed precision with tools for cryptocurrency values.
Estimates & refresh
Retrieve the estimated receiving amount from the analysis service before proceeding. The interface includes manual refresh and refresh timing controls.
Wallet & network coordination
Wallet connection
Connect MetaMask and WalletConnect, identify the account and show connection state through a shared wallet layer used by application components.
Switching & adding networks
Request wallet network changes according to user selections and support network connection details. Handle account changes, chain changes and disconnections.
Signed requests
Obtain a wallet message signature and include it with the account address when creating exchanges, confirming transactions and retrieving history, associating service requests with the wallet account.
On-chain payment & confirmation
The implemented flow connects the interface, API and network transactions in distinct stages.
Exchange request creation
Send assets, networks, amount and account information to the exchange service, then use the returned payment information for the transaction stage.
Native assets & tokens
Separate paths handle native network assets and tokens. Native assets use either a direct transfer or a contract payment call according to the service response.
Solidity contracts & results
My role included Solidity contract development. The supplied contract interface exposes payment and transfer functions. After submission, the transaction hash is sent to the confirmation service and its result displayed.
Tracking & user experience
Exchange history
Retrieve wallet-related transactions and display them in a history dialog, allowing users to review previous operations within the exchange experience.
Results & tracking code
Display the exchange result message and a copyable tracking code, providing a reference for subsequent follow-up.
Pending & error states
Present waiting states and messages for insufficient balance, rejected network changes or payment failures. Enable exchange actions only when required selections and an estimate are available.