[UI] wormhole page #425
[UI] wormhole page #425
Conversation
|
✨ Deployment complete! Take a peek over at https://742f81f9.ui-storybook.pages.dev |
Deploying with
|
| Latest commit: |
f8a0655
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2b1a875c.swim-ui.pages.dev |
| Branch Preview URL: | https://ui-wormhole-page.swim-ui.pages.dev |
|
@cyphertrace I think there is an issue with the list container, I cannot scroll to the last element.
|
| readonly status: TransferStatus; | ||
| }; | ||
| // eslint-disable-next-line functional/prefer-readonly-type | ||
| let cacheTransferResults: TransferResult[] = []; |
There was a problem hiding this comment.
why don't we store this to a normal react state?
There was a problem hiding this comment.
This is just a hacky version, I will move all data to store and mutations, it will be more reactive.
The thing is that state wasn't fast enough to update with changes, previous state was always out of date, so I set the small caching to keep the track. But I'm changing that in next PR
There was a problem hiding this comment.
oh, I see. This usually goes away if you use the function form of the updater setState(prev => prev.concat([newTransferInfo]) (something like that) instead of setState(previous.concat([newTransferInfo]))
There was a problem hiding this comment.
I tried something similar (not with concat), but somehow prev wasn't good either, it didn't trig re-render. Maybe I should test with .concat. Thanks for tips!
There was a problem hiding this comment.
Well, with previous and concat, still the same issue with stale data, so I got the repetition
Hopefully introducing store will make it better...
There was a problem hiding this comment.
I didn't run the code, but I guess it is because the reference of transferInfo is not updated to latest yet when you running the function, so when you try to get, it does not exist (using old reference to transferInfo), and thus you append again to the state which lead to duplication. I think a less hacky way to fix that could be using useRef to get the latest reference of transferInfo.
| readonly sourceEcosystemId: EcosystemId; | ||
| readonly targetEcosystemId: EcosystemId; | ||
| readonly amount: string; | ||
| readonly getTransferInfo: ( |
There was a problem hiding this comment.
suggestion: setTransferInfo or addTransferInfo would probably make more sense for something that returns void?
| readonly handleTransfer: (data: TransferData) => void; | ||
| } | ||
|
|
||
| export const useTransfer = (): TransferResult => { |
There was a problem hiding this comment.
suggestion: you might want to refactor this to use react-query mutation? I think you mentioned it somewhere already though so if it will be done in the next iteration feel free to ignore.
There was a problem hiding this comment.
Yes, working on that :)
| // eslint-disable-next-line functional/immutable-data | ||
| formattedTokens.push(wrappedToken); | ||
| } | ||
| return formattedTokens; |
There was a problem hiding this comment.
suggestion: you can also do this with a map so you avoid the disabling of the lint rule
return [token].concat(token.wrappedDetails.map(...))
|
Closing in favour of #439 |
Sorry for ugly code, it was bunch of experimentation and I'm refactoring in better mutations in consecutive PR.
Notion ticket: Ticket
Checklist