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.

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

feat: Add balance to SwapAmountInput #548

Merged
merged 7 commits into from
Jun 13, 2024
Merged

Conversation

abcrane123
Copy link
Contributor

@abcrane123 abcrane123 commented Jun 13, 2024

What changed? Why?

  • integrate wagmi useBalance hook
  • display balance and max button

Screenshot 2024-06-13 at 5 15 33 PM

Notes to reviewers

  • balance will also appear on to token

How has it been tested?

</div>
<div className="flex w-full items-center justify-between">
<TokenChip token={token} />
{type === "from" && (
<button
className="flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px] bg-gray-100 px-3 py-2 text-base font-medium not-italic leading-6 text-gray-500"
Copy link
Contributor

Choose a reason for hiding this comment

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

Add the cn utility here so you can split in two line

import { cn } from "../../utils/cn";
import { SwapContext } from "../context";
import type { SwapAmountInputReact } from "../types";
import { useBalance, type UseBalanceReturnType } from "wagmi";
Copy link
Contributor

Choose a reason for hiding this comment

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

split this in two line, one for import useBalance and one for the type.

});

const roundedBalance = useMemo(() => {
if (tokenBalanceData?.formatted && token?.address) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This block can be his own utils getRoundedBalance

@github-actions github-actions bot added the root label Jun 13, 2024
@abcrane123 abcrane123 requested a review from Zizzamia June 13, 2024 21:18
@abcrane123 abcrane123 marked this pull request as ready for review June 13, 2024 21:18
@abcrane123 abcrane123 requested a review from kyhyco June 13, 2024 21:20
@@ -37,6 +40,17 @@ export function SwapAmountInput({ label, token, type }: SwapAmountInputReact) {
return setFromToken;
}, [type, setFromToken, setToToken]);

const balanceResponse: UseBalanceReturnType = useBalance({
Copy link
Contributor

Choose a reason for hiding this comment

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

Screenshot 2024-06-13 at 2 24 23 PM

think this might only work with eth

Copy link
Contributor

Choose a reason for hiding this comment

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

@abcrane123 let's refactor this later today. Thank you @kyhyco

Copy link
Contributor

@kyhyco kyhyco left a comment

Choose a reason for hiding this comment

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

Perhaps we address the useBalance for non-native tokens on a follow up PR

Rest looks good!

@Zizzamia Zizzamia merged commit 2fe1b7a into main Jun 13, 2024
10 checks passed
@Zizzamia Zizzamia deleted the alissa.crane/token-balance branch June 13, 2024 21:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

3 participants