fix: session key demo: improve timers, styles, and error handling #1368
Conversation
jakehobbs
requested review from
moldy530,
rthomare,
dancoombs,
mokok123,
dphilipson,
linnall,
adamegyed,
howydev,
Zer0dot,
jaypaik,
Blu-J,
noam-alchemy and
archit2407
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd the label graphite-merge-queue to this PR to add it to the merge queue. You must have a Graphite account in order to use the merge queue. # using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
| timeToBuy?: number; // timestamp when the txn will initiate | ||
| secUntilBuy?: number; // seconds until the txn will initiate |
There was a problem hiding this comment.
noob question: why do we need the timestamp here in addition to the countdown? could the countdown also serve as the time to reveal the transaction component's contents?
There was a problem hiding this comment.
The timeToBuy is used to calculate the number of seconds remaining each time the interval ticks. At first I was just trying to only have the timeToBuy and NOT include the secToBuy here, but I ran into a lot of annoying edge cases where it would be off by 1 due to re-renders, i.e. sometimes it would start from 11 sec and other times from 9 sec. This solution resulted in the cleanest UX, since we explicitly start the timer at 10 sec.
There was a problem hiding this comment.
i think i found another good solution! will push shortly.
| console.error("no session key client"); | ||
| setCardStatus("initial"); | ||
| // Handle the ticking of the timers. | ||
| useEffect(() => { |
There was a problem hiding this comment.
related question re: timestamp and interval - could the reveal be handled in the 10s countdown promise? Not super high pri, just curious if we could simplify
There was a problem hiding this comment.
Not totally following what you mean.
There was a problem hiding this comment.
Hmm, we could probably just give each of them the time they should fire at the beginning and set the timeouts to 0, 10, and 20 sec right away. But doing it how it is now also results in waiting extra time before starting the next txn if the current txn takes longer than 10 sec, which I think is nice to have.
Pull Request Checklist
yarn test)sitefolder, and guidelines for updating/adding docs can be found in the contribution guide)feat!: breaking change)yarn lint:check) and fix any issues? (yarn lint:write)PR-Codex overview
This PR focuses on improving the UI and functionality of transaction handling in the small cards component. It enhances layout styles, modifies transaction states, and refines the logic for recurring transactions.
Detailed summary
Wrapper.tsxfor better layout.MintCard.tsx.TransactionsCard.tsx.Transactions.tsx.timeToBuytoTransactionTypeinuseRecurringTransactions.ts.