diff --git a/bun.lockb b/bun.lockb index ba366dbc..c439c9e9 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/app/.env.example b/packages/app/.env.example index b1a71694..d308d920 100644 --- a/packages/app/.env.example +++ b/packages/app/.env.example @@ -5,5 +5,7 @@ NEXT_PUBLIC_FATHOM_SITE_ID= RPC_GNOSIS= RPC_MAINNET= RPC_ARBITRUM= +RPC_BASE= + NEXT_STACKLY_SUBGRAPH_API_KEY= \ No newline at end of file diff --git a/packages/app/app/opengraph-image.png b/packages/app/app/opengraph-image.png index bf7a1cd5..c42ae7ab 100644 Binary files a/packages/app/app/opengraph-image.png and b/packages/app/app/opengraph-image.png differ diff --git a/packages/app/app/twitter-image.png b/packages/app/app/twitter-image.png index bf7a1cd5..c42ae7ab 100644 Binary files a/packages/app/app/twitter-image.png and b/packages/app/app/twitter-image.png differ diff --git a/packages/app/components/Avatar.tsx b/packages/app/components/Avatar.tsx new file mode 100644 index 00000000..55c13ac1 --- /dev/null +++ b/packages/app/components/Avatar.tsx @@ -0,0 +1,55 @@ +"use client"; + +import { twMerge } from "tailwind-merge"; +import Image from "next/image"; +import { Address, http } from "viem"; +import { mainnet } from "viem/chains"; +import { createConfig, fallback, useEnsAvatar } from "wagmi"; +import { RPC_LIST } from "@/constants"; + +interface AvatarProps { + address: Address; + className?: string; + size?: number; + ensName?: string; +} + +const mainnetConfigForENS = createConfig({ + chains: [mainnet], + transports: { + [mainnet.id]: fallback([http(RPC_LIST[mainnet.id]), http()]), + }, +}); + +export const Avatar = ({ + address, + ensName, + className, + size = 24, +}: AvatarProps) => { + const { data: ensAvatar } = useEnsAvatar({ + name: ensName ?? undefined, + chainId: mainnet.id, + config: mainnetConfigForENS, + }); + + const GRADIENT_BASED_ON_ADDRESS_URL = "https://avatars.jakerunzer.com"; + const ENS_METADATA_AVATAR_URL = "https://metadata.ens.domains/mainnet/avatar"; + + const avatarGradientUrl = `${GRADIENT_BASED_ON_ADDRESS_URL}/${address}`; + const avatarEnsUrl = `${ENS_METADATA_AVATAR_URL}/${ensName}`; + const avatarUrl = ensName && ensAvatar ? avatarEnsUrl : avatarGradientUrl; + + return ( + {`${ensName} + ); +}; diff --git a/packages/app/components/ConnectButton.tsx b/packages/app/components/ConnectButton.tsx index 5c29ddae..769edc10 100644 --- a/packages/app/components/ConnectButton.tsx +++ b/packages/app/components/ConnectButton.tsx @@ -2,12 +2,13 @@ import { ChainId, WETH, WXDAI } from "@stackly/sdk"; import { ConnectKitButton } from "connectkit"; -import Image from "next/image"; -import { useBalance, useEnsAvatar } from "wagmi"; +import { useBalance } from "wagmi"; +import { formatUnits } from "viem"; import { BodyText, Button, SizeProps } from "@/ui"; import { useAutoConnect } from "@/hooks"; import { useNetworkContext } from "@/contexts"; +import { Avatar } from "@/components/Avatar"; const CustomConnectButton = ({ address, @@ -21,15 +22,12 @@ const CustomConnectButton = ({ size: SizeProps; }) => { const { chainId } = useNetworkContext(); - const { data: avatar } = useEnsAvatar({ - name: ensName, - chainId: ChainId.ETHEREUM, - }); const TOKEN_BY_CHAIN: { [chainId: number]: string } = { [ChainId.ETHEREUM]: WETH[ChainId.ETHEREUM].address, [ChainId.GNOSIS]: WXDAI.address, [ChainId.ARBITRUM]: WETH[ChainId.ARBITRUM].address, + [ChainId.BASE]: WETH[ChainId.BASE].address, }; const { data: balance } = useBalance({ @@ -44,11 +42,11 @@ const CustomConnectButton = ({ )}`; const formattedBalance = (balanceData: NonNullable) => - balanceData.formatted === "0" + balanceData.value === BigInt(0) ? `0 ${balanceData.symbol}` - : `${balanceData.formatted.substring( + : `${formatUnits(balanceData.value, balanceData.decimals).substring( 0, - balanceData.formatted.length - balanceData.decimals + 3 + 5 )} ${balanceData.symbol}`; return ( @@ -56,7 +54,7 @@ const CustomConnectButton = ({ {balance && ( {formattedBalance(balance)} @@ -67,20 +65,18 @@ const CustomConnectButton = ({ iconRight="caret-down" onClick={onClick} width="full" - className="flex border-none shadow-sm rounded-xl hover:bg-surface-25 focus:bg-white focus:ring-0 active:ring-0" + className="flex rounded-xl border-none shadow-sm hover:bg-surface-25 focus:bg-white focus:ring-0 active:ring-0" > - {avatar && ( - {address} - )} + - {truncatedAddress(2)} - {truncatedAddress(4)} + {ensName ? ( + <>{ensName} + ) : ( + <> + {truncatedAddress(2)} + {truncatedAddress(4)} + + )} diff --git a/packages/app/components/SelectNetwork.tsx b/packages/app/components/SelectNetwork.tsx index 47776c63..63800f39 100644 --- a/packages/app/components/SelectNetwork.tsx +++ b/packages/app/components/SelectNetwork.tsx @@ -3,17 +3,31 @@ import { Fragment } from "react"; import { ChainIcon } from "connectkit"; import { Listbox, Transition } from "@headlessui/react"; -import { usePathname } from "next/navigation"; import { Button, Icon } from "@/ui"; -import { useNetworkContext, useStackboxFormContext } from "@/contexts"; -import { PATHNAMES } from "@/constants"; +import { useNetworkContext } from "@/contexts"; +import Image from "next/image"; +import { ChainId } from "@stackly/sdk"; + +const CustomChainIcon = ({ id, size }: { id: number; size: number }) => { + if (id === ChainId.BASE) { + return ( + Base network logo + ); + } + + // Fall back to ConnectKit's ChainIcon for other networks + return ; +}; export const SelectNetwork = () => { const { chains, changeNetwork, chainId, selectedChain } = useNetworkContext(); - const { resetFormValues } = useStackboxFormContext(); - const pathname = usePathname(); - return ( { iconRight="caret-down" size="sm" variant="tertiary" - className="flex h-10 border-none shadow-sm rounded-xl focus:bg-white focus:ring-0 active:ring-0" + className="flex h-10 rounded-xl border-none shadow-sm focus:bg-white focus:ring-0 active:ring-0" >
- + {selectedChain?.name} @@ -42,22 +56,22 @@ export const SelectNetwork = () => { leaveFrom="opacity-100" leaveTo="opacity-0" > - + {chains?.map(({ id, name }) => ( {({ selected }) => { return ( <>
- +

{name}

{selected ? ( -
+
+