Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stop using loader functions for swap page #1316

Merged
merged 9 commits into from
Jun 20, 2024
Merged

Stop using loader functions for swap page #1316

merged 9 commits into from
Jun 20, 2024

Conversation

jessepinho
Copy link
Contributor

@jessepinho jessepinho commented Jun 18, 2024 •
edited
Loading

This PR removes the loader function from the swap route, and instead uses ZQuery, resulting in instant route changes when a user navigates to /swap.

Closes #1243

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jun 18, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 8bc397d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@jessepinho jessepinho force-pushed the jessepinho/stop-using-loader-functions-part-2-web-1243 branch from eaa38b3 to dd22cc6 Compare June 18, 2024 17:56
@TalDerei
Copy link
Contributor

TalDerei commented Jun 18, 2024 •
edited
Loading

@jessepinho can you fold in this comment to reduce code duplication and have the warning use our shiny new zquery loaders?

@jessepinho jessepinho force-pushed the jessepinho/stop-using-loader-functions-web-1243 branch from e69f8f1 to ca1b276 Compare June 19, 2024 17:54
Base automatically changed from jessepinho/stop-using-loader-functions-web-1243 to main June 19, 2024 18:10
@jessepinho jessepinho force-pushed the jessepinho/stop-using-loader-functions-part-2-web-1243 branch from c8bb4a6 to 0e2be0a Compare June 19, 2024 18:24
@jessepinho jessepinho force-pushed the jessepinho/stop-using-loader-functions-part-2-web-1243 branch from 0e2be0a to 447cbb8 Compare June 19, 2024 19:53
jessepinho
jessepinho commented Jun 19, 2024
View reviewed changes
apps/minifront/src/components/send/send-form/index.tsx Outdated
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not strictly related to this PR, just something I noticed while working on it

jessepinho
jessepinho commented Jun 19, 2024
View reviewed changes
apps/minifront/src/components/swap/swap-loader.ts
Comment on lines -24 to -25
useStore.getState().swap.setAssetIn(balancesResponses[0]);
useStore.getState().swap.setAssetOut(swappableAssets[0]!);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two set* calls are now made in the ZQuery object's fetch function.

jessepinho
jessepinho commented Jun 19, 2024
View reviewed changes
apps/minifront/src/components/swap/swap-loader.ts
if (balancesResponses[0]) {
useStore.getState().swap.setAssetIn(balancesResponses[0]);
useStore.getState().swap.setAssetOut(swappableAssets[0]!);
useStore.getState().swap.setStakingAssetMetadata(stakingTokenAssetMetadata);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is now accessed via useStakingTokenMetadata

jessepinho
jessepinho commented Jun 19, 2024
View reviewed changes
apps/minifront/src/components/swap/swap-loader.ts
Comment on lines -38 to -39
useStore.getState().swap.setBalancesResponses(balancesResponses);
useStore.getState().swap.setSwappableAssets(swappableAssets);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are now ZQuery objects

jessepinho
jessepinho commented Jun 19, 2024
View reviewed changes
apps/minifront/src/components/swap/swap-form/token-swap-input.tsx
<AssetSelector assets={swappableAssets} value={assetOut} onChange={setAssetOut} />
{assetOut && <BalanceValueView valueView={assetOutBalance} />}
</div>
<FadeIn condition={!!balancesResponses.data && !!swappableAssets.data}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fades in the input/output selectors once the necessary data has loaded:

screencap

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we handle the error case as well? Maybe some red text with a loading error message?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@jessepinho jessepinho changed the title WIP: Stop using loader functions, part 2 Stop using loader functions for swap page Jun 19, 2024
jessepinho
jessepinho commented Jun 19, 2024
View reviewed changes
apps/minifront/src/components/swap/swap-form/token-swap-input.tsx
// State to manage privacy warning display
const [showNonNativeFeeWarning, setshowNonNativeFeeWarning] = useState(false);
const [showNonNativeFeeWarning, setShowNonNativeFeeWarning] = useState(false);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo fix

@jessepinho jessepinho marked this pull request as ready for review June 19, 2024 22:34
@jessepinho jessepinho requested a review from a team June 19, 2024 22:34
@jessepinho jessepinho mentioned this pull request Jun 20, 2024
Merged
grod220
grod220 approved these changes Jun 20, 2024
View reviewed changes
Copy link
Contributor

@grod220 grod220 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

apps/minifront/src/components/swap/swap-form/token-swap-input.tsx
<AssetSelector assets={swappableAssets} value={assetOut} onChange={setAssetOut} />
{assetOut && <BalanceValueView valueView={assetOutBalance} />}
</div>
<FadeIn condition={!!balancesResponses.data && !!swappableAssets.data}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we handle the error case as well? Maybe some red text with a loading error message?

@jessepinho jessepinho force-pushed the jessepinho/stop-using-loader-functions-part-2-web-1243 branch from e3e05f8 to 8c45d66 Compare June 20, 2024 20:28
@jessepinho
Copy link
Contributor Author

@TalDerei

@jessepinho can you fold in this comment to reduce code duplication and have the warning use our shiny new zquery loaders?

Ah, sure — but I'm going to do that as a separate super-small PR, since as part of that, I want to calculate showNonNativeFeeWarning via a selector too, and that's out of scope for this PR.

@jessepinho jessepinho merged commit 2f0a8e4 into main Jun 20, 2024
6 checks passed
@jessepinho jessepinho deleted the jessepinho/stop-using-loader-functions-part-2-web-1243 branch June 20, 2024 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@grod220 grod220 grod220 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Stop using loader functions
3 participants
@jessepinho @TalDerei @grod220