Keep the amount in context
Balance, exchange rate, estimated received amount and percentage shortcuts stay beside the input and its action.
↳ Original deposit and withdrawal panels← Selected work
Product frontend / Project recording
stNXM
A liquid-staking frontend, from product introduction to dashboard and withdrawal states.
My role
Frontend development
The scope
Landing page · Dashboard · Deposit & withdrawal UI
Project status
Recorded implementation
The project, at a glance
- The challenge
- A financial dashboard needs to connect balances and performance with deposit, withdrawal and request states.
- My contribution
- I developed the public introduction and application frontend using reusable components, responsive layouts, charts and motion.
- What came out of it
- A recorded application covering deposits, withdrawals, pending requests, performance and allocation.
Frontend development / stNXMUnderstand the position.
Understand the position.
Choose the next action.
01See the overview02Deposit or withdraw03Track the request
Original application dashboard · Recorded interface data
stNXMOriginal application · Captured from the full walkthrough
01 / The question behind the work
From understanding the product to using the app.
From the product story to the product
The public page introduces stNXM. The application then brings balances, deposit and withdrawal controls, performance charts and allocation information into one workspace.
My contribution
Frontend development across the public page and application, using responsive layouts, reusable components, charts and motion. The original recording shows the implemented interface and its state changes.
What the interface makes visible
A user can compare an available balance with an entered amount, change between deposit and withdrawal, inspect performance across time ranges, and distinguish a waiting request from one ready to complete.
02 / Design decisionsThe thinking
The thinking
in the details.
Specific choices, connected to the work you can see.
Expose the waiting state
The withdrawal view displays its processing notice before the action. A separate request dialog distinguishes time remaining from a completion action.
↳ Original withdrawal notice and pending requestsGive the numbers different jobs
Summary cards establish the overview. Time-range charts, staking periods, liquidity and protocol exposure provide distinct ways to inspect the details.
↳ Original dashboard and allocation views03 / Connecting the experience
How the pieces connect.
Select a stage to explore its purpose.
The moment
Read the balances and protocol summary.
The design intention
Keep the position visible before choosing an action.
New portfolio explanation based on the documented implementation and original project material.
04 / Inside the experienceInside the dashboard.
Inside the dashboard.
Through the actual states.
Six distinct selections from the original walkthrough: deposit, withdrawal, pending requests, performance, allocation and the public introduction.
Put the deposit in context
The original deposit panel places the available balance and exchange rate above the amount. Percentage shortcuts and the approval action belong to the same task.
Show what changes when withdrawing
Switching tabs changes the direction of the exchange, the received token and the action. The original interface also surfaces a processing-time notice before submission.
Separate waiting from ready
The original request dialog shows a remaining wait beside one withdrawal and a completion action beside another. The request state determines the next step.
Make performance inspectable
The original performance panel combines current, average and peak APY with a chart and time-range controls. The walkthrough shows the chart changing with the selected period.
Explain how the position is distributed
Staking periods, liquidity uses and protocol exposure are separate but related views. The original application combines compact cards, proportions and a horizontally navigable protocol row.
Give the application a clear entry point
The public page introduces the product and leads into the app. Its visual language carries through to the dashboard shown at the start of this case.
The complete original recording / 1:01The app.
The app.
In use.
Start at the dashboard, or choose a chapter to follow the public page, application controls and request states. Original video, at its recorded resolution. Silent playback.
Figures and wallet states belong to the original recording.
Original presentation boards7 source artifacts +
The complete originals behind this case study. Open a board to inspect the source presentation.
01Dashboard overview: balances, deposit controls and performance. Original recording at 00:37.↗02Deposit: available balance, exchange rate, amount and approval. Original recording at 00:44.↗03Withdrawal: receive amount, processing notice and withdrawal action. Original recording at 00:46.↗04Pending withdrawals: waiting and ready-to-complete requests. Original recording at 00:58.↗05Performance: APY summaries, time ranges and chart. Original recording at 00:44.↗06Allocation: staking periods, liquidity breakdown and protocol exposure. Original recording at 00:54.↗07Public landing page: product introduction and entry into the app. Original recording at 00:06.↗
05 / What this work brings togetherstNXM
stNXM
in perspective.
The result
A recorded frontend connecting a public product introduction with dashboard metrics, deposit and withdrawal states, performance charts and allocation views.
Sources & presentation notes +
All screens are exact selections from the supplied 61-second recording. Amounts, yields, wallet identifiers and request dates are recorded interface content, not current protocol data or measured portfolio outcomes. The recording establishes frontend presentation and interaction states; it does not verify live transaction execution.
The journey diagrams and editorial explanations were prepared for this portfolio from the available project evidence. They are not additional historical research or measured outcomes.
Keep exploring / Next project
A launchpad interface connecting community ideas and builders.