Skip to content

fix: Resolve provider creation error & add fallback for wallets without wallet_getAssets support #822

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

Merged
KannuSingh merged 7 commits into from
Feb 17, 2025
Merged

fix: Resolve provider creation error & add fallback for wallets without wallet_getAssets support #822

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
adbcf53
chore:remove unnecessary lockfile
KannuSingh Feb 17, 2025
b8409a8
chore: update deps
KannuSingh Feb 17, 2025
10af00f
chore:rename file
KannuSingh Feb 17, 2025
973a1e6
allow adding donut more than balance with warning
KannuSingh Feb 17, 2025
dbb1c63
Merge branch 'main' into fix/deps-and-lock-file-conflict
KannuSingh Feb 17, 2025
dd2614d
update lock file
KannuSingh Feb 17, 2025
6d988f4
refactor: remove disabled state from max button for better UX
KannuSingh Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion advanced/dapps/chain-abstraction-demo/components/GiftDonutModalTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
import { Button } from "./ui/button";
import GiftDonutModal from "./GiftDonutModal";
import { GiftDonutModalViews } from "./gift-donut-modal-views";
import { useWalletGetAssets } from "@/context/WalletAssetsProvider";
import { useWalletGetAssets } from "@/hooks/useWalletGetAssets";
import { useAppKitNetwork } from "@reown/appkit/react";
import { supportedNetworks } from "@/data/EIP155Data";

Expand Down
62 changes: 39 additions & 23 deletions advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Button } from "../ui/button";
import Image from "next/image";
import React from "react";
import { cn } from "@/lib/utils";
import { ArrowRight, ChevronRight, X } from "lucide-react";
import { AlertTriangle, ArrowRight, ChevronRight, X } from "lucide-react";
import CoinSVG from "../assets/CoinSVG";
import NetworkSVG from "../assets/NetworkSVG";
import {
Expand Down Expand Up @@ -39,18 +39,19 @@ function GiftDonutForm({

const selectedToken = giftDonutModalManager.getToken();
const selectedNetwork = giftDonutModalManager.getNetwork();
const tokenBalance = giftDonutModalManager.getBalanceBySymbol(
selectedToken.name,
);
const tokenBalance = giftDonutModalManager.getBalanceBySymbol(selectedToken.name);
const maxDonutPurchasable = Math.trunc(parseFloat(tokenBalance) / 1.0);

// Allow any count >= 0.
const setDonutCount = (newCount: number) => {
if (newCount < 0) return;
if (newCount > maxDonutPurchasable) return;
setCount(newCount);
giftDonutModalManager.setDonutCount(newCount);
};

// Check whether the selected count exceeds the available balance.
const isExceeded = count > maxDonutPurchasable;

return (
<div className={cn("flex flex-col items-start gap-4", className)}>
<div className="grid grid-cols-3 items-center w-full">
Expand All @@ -63,7 +64,7 @@ function GiftDonutForm({
</Button>
</div>
</div>
<div className="flex items-center gap-2 w-full bg-primary-foreground p-4 rounded-3xl ">
<div className="flex items-center gap-2 w-full bg-primary-foreground p-4 rounded-3xl">
<Image src="/donut-cover.png" alt="Gift Donut" width={80} height={80} />
<div className="flex flex-col gap-2 w-full h-full">
<p className="text-primary font-bold">Donut #1</p>
Expand All @@ -74,7 +75,7 @@ function GiftDonutForm({
variant="link"
size="sm"
onClick={() => setDonutCount(maxDonutPurchasable)}
disabled={count >= maxDonutPurchasable}
disabled={count === maxDonutPurchasable}
Copy link
Member

@chris13524 chris13524 Feb 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Should we just remove this attribute instead? This greys out text when it's exactly equal, but not sure why that would be desired.

Suggested change
disabled={count === maxDonutPurchasable}

className="text-xs h-auto p-0 text-secondary hover:text-primary"
>
Max: {maxDonutPurchasable}
Expand All @@ -98,12 +99,12 @@ function GiftDonutForm({
onClick={() => setDonutCount(count + 1)}
style={{ backgroundColor: "var(--tertiary-foreground)" }}
className="h-8 w-8 rounded-full p-0"
disabled={count >= maxDonutPurchasable}
>
+
</Button>
</div>
</div>
{/* Removed inline error message block */}
</div>
</div>
</div>
Expand All @@ -112,8 +113,7 @@ function GiftDonutForm({
<div
className="w-10 h-10 rounded-full flex items-center justify-center"
style={{
background:
"var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
background: "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
}}
>
<CoinSVG />
Expand Down Expand Up @@ -147,8 +147,7 @@ function GiftDonutForm({
<div
className="w-10 h-10 rounded-full flex items-center justify-center"
style={{
background:
"var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
background: "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
}}
>
<NetworkSVG />
Expand Down Expand Up @@ -179,28 +178,47 @@ function GiftDonutForm({
</div>
</div>
</div>
{/* Total Section Updated with Tooltip and Warning Icon */}
<div className="flex justify-between w-full items-center">
<p className="text-secondary">Total</p>
<p className="text-md font-bold text-primary">
${(count * 1.0).toFixed(2)}
</p>
{isExceeded ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-2">
<AlertTriangle className="h-4 w-4 text-yellow-500" />
<p className="text-md font-bold text-yellow-500">
${(count * 1.0).toFixed(2)}
</p>
</div>
</TooltipTrigger>
<TooltipContent className="bg-primary-foreground">
<p className="text-xs text-primary">
Warning: Your selected count exceeds your token balance
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
<p className="text-md font-bold text-primary">
${(count * 1.0).toFixed(2)}
</p>
)}
</div>
<div className="flex gap-2 w-full">
<button
onClick={onClose}
type="button"
style={{
border:
"1px solid var(--border-border-secondary, rgba(79, 79, 79, 1))",
border: "1px solid var(--border-border-secondary, rgba(79, 79, 79, 1))",
}}
className="flex flex-1 text-primary items-center justify-center border-secondary rounded-lg"
>
Cancle
Cancel
</button>
<Button
style={{
background:
"var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1))",
background: "var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1))",
}}
onClick={() => onViewChange("CheckoutReceipentAddress")}
type="button"
Expand All @@ -209,9 +227,7 @@ function GiftDonutForm({
>
<p
className="flex items-center"
style={{
color: "var(--text-text-accent-primary, rgba(9, 136, 240, 1))",
}}
style={{ color: "var(--text-text-accent-primary, rgba(9, 136, 240, 1))" }}
>
Next <ArrowRight className="w-4 h-4" />
</p>
Expand Down
11 changes: 0 additions & 11 deletions ...ion-demo/context/WalletAssetsProvider.tsx → ...traction-demo/hooks/useWalletGetAssets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,6 @@ import {
} from "@/types/ERC7811";
import { Capabilities } from "@/types/ERC5792";

interface WalletAssetsContextType {
balances: TokenBalance[];
isLoading: boolean;
refetch: () => Promise<void>;
getBalanceBySymbol: (symbol: string) => string;
getBalanceByAddress: (address: `0x${string}`) => string;
}
const WalletAssetsContext = React.createContext<
WalletAssetsContextType | undefined
>(undefined);

async function getAssetDiscoveryCapabilities({
provider,
chainIdAsHex,
Expand Down
Loading