Skip to content

feat(send): the designer's sprout animation, with its failure branches - #1911

Open
juanky201271 wants to merge 9 commits into
devfrom
feat/send-sprout-animation
Open

juanky201271 wants to merge 9 commits into
devfrom
feat/send-sprout-animation

Conversation

@juanky201271

@juanky201271 juanky201271 commented Nov 9, 2026 •

Copy link
Copy Markdown
Contributor

What and why

The sending screen now follows the designer's sprout animation (mockup), for a send and for a shield, and it shows the real state of the transaction.

For the designer to test on a device

Moment What should happen
Creating The sprout grows from the coin and the plane unfolds
Through NYM The plane flies the route, the nodes light up and leaves fall
In the mempool The plane waits among other transactions
Confirming The badge ring fills one third per block
Sent The check draws, sparks fly and the sprout stretches
TEX address A second, smaller plane rides behind the first
Fails while creating The sprout wilts and Error details appears, with copy and Send Email
Fails through NYM The plane falls from the middle node to a red cross
Expires in NYM or in the mempool The ring runs out around the plane, then it falls to a red clock

The normal path shows up on any send. Failures are hard to provoke on a real wallet; the Failed, Failed Sending and Expired stories show how each one ends.

Where it differs from the mockup

  • Error details also appears when sending fails or the node rejects, because it is the only place that shows the reason. The mockup shows it only for Creating.
  • A node rejection keeps its own text, "Rejected by the network", with the NYM failure drawing.
  • No leaves fall on the last stretch before a failure.
  • The NYM subtitle keeps the existing copy.

Behaviour

  • A send that failed to send and later appears in the mempool or a block carries on from there. A failure to send does not prove the network never got it.
  • An expiry is drawn at the last step the transaction was seen at.
  • The same screen now draws every failure, so SentMark is gone. The illustration's colours are in app/theme/sendArt.ts.

The motion has not been run on a device yet, only in unit tests and static captures. The es, pt, ru and tr strings are machine-written and worth a read.

Checklist

  • Tests or stories cover the change.
  • New strings are in the five catalogs (en, es, pt, ru, tr).

UI changes (skip if this PR touches no screen or component):

  • Built from app/theme and the shared primitives and widgets (DESIGN.md, "Components"); no fontSize, radius, colour or icon size by hand.
  • A new token, variant, component or exception was approved by the designer, and DESIGN.md changes in this PR (CI fails when app/theme values change without it).
  • Visual review checked; /visual-accept only after reading the report.

Also in this PR: memo routes, from the designer's swap proposals 3, 4 and 6

Buying ZEC, Maya and THORChain route on a memo that exchanges and token transfers cannot add.

  • Routes sheet: a memo route says "Needs a memo. Exchanges can’t add it."; the others say "Address only". Paid with a token, the address-only route is selected when it is within 1% of the best. "Best" does not move.
  • Review: a "How you pay" row. With a token on a memo route, a checkbox before the address is requested.
  • Deposit: a token paid to Maya or THORChain gets a note instead of the QR, a plain memo hint and no "Copy as hex data". The QR caption says when it carries only the address. NEAR and Flashnet deposits get a note for exchange withdrawals on every network.
  • Swap.tsx loses its exhaustive-deps disable for the React Compiler gate. The USD fill-in still runs only when the price changes.

The sprout now draws in one 300 x 220 Svg (no viewBox-scaled layers), with each moving part animating its group's matrix: the leaves, coin and ring vanished on Android while they moved.

🤖 Generated with Claude Code

juanky201271 and others added 2 commits November 9, 2026 12:08
…branches

The sending screen tells each step on one drawing: the sprout grows while
creating, a paper plane flies the mixnet route, waits in the mempool and fills
the badge per confirmation. A TEX send draws a second plane.

A send that fails ends where it is: the sprout wilts when it could not be
created, the plane falls from a mix node when it could not be sent, and a
clock closes it when it expires in NYM or in the mempool. The error can be
copied or mailed to support. A send that failed to send and turns up in the
mempool or a block goes on, since the screen shows the real state.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
No effect disables exhaustive-deps any more, and the hooks that receive a
shared value write it through set, which the jest mock now offers too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Nov 9, 2026 •

Copy link
Copy Markdown

Visual review — ⚠️ changes detected

Head vs visual/__baseline__. Open the review page — Current, Animations, and Image diffs tabs.

If the change is intended, comment /visual-accept on this PR. It pulls this run's capture into the baseline, commits, and pushes. Needs write access and a finished run for the current commit.

Or accept from a terminal on this branch:

yarn visual:accept   # pulls this run's capture into visual/__baseline__
git add visual/__baseline__ && git commit -m "test(visual): accept <what changed>"

juanky201271 and others added 2 commits November 9, 2026 14:10
The ring and its sparks reach past the drawing, and Android clips an Svg to
its own box whatever its overflow says.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@karentaponte

Copy link
Copy Markdown
Contributor

/visual-accept

Co-authored-by: karentaponte <190538197+karentaponte@users.noreply.github.com>
@zingo-visual-accept

Copy link
Copy Markdown
Contributor

Baseline accepted from run 42703412252 and pushed. Visual review is re-running on the new commit.

juanky201271 and others added 4 commits November 9, 2026 19:28
The leaves, the coin and its ring vanished on Android while they moved.
They were drawn in Svgs scaled by a viewBox with a negative origin, each
inside an Animated.View whose transform changed every frame. The sprout
is now one 300 x 220 Svg with the parts in a scaled group, and each
moving part animates its group's matrix.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Buying ZEC, Maya and THORChain route on a memo that exchanges and token
transfers cannot add. From the designer's proposals 3, 4 and 6:

- Routes: a memo route says so under its price; the others say
  "Address only". Paid with a token, the address-only route is selected
  when it is within 1% of the best; "Best" does not move.
- Review: a "How you pay" row, and with a token a checkbox before the
  address is requested.
- Deposit: a token paid to Maya or THORChain gets a note instead of the
  QR, a plain memo hint and no hex copy. The QR caption says when it
  carries only the address, and NEAR and Flashnet deposits get a note
  for exchange withdrawals on every network.

Swap.tsx loses its exhaustive-deps disable for the React Compiler gate:
the USD fill-in runs when the price changes, as before, adjusted during
render.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants