diff --git a/package.json b/package.json index 40fa3cf..5e11a6f 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "dependencies": { "@hookform/resolvers": "3.9.1", - "@inkonchain/ink-kit": "0.9.1-beta.16", + "@inkonchain/ink-kit": "0.9.1-beta.18", "@next/third-parties": "15.1.6", "@octokit/auth-app": "7.1.3", "@octokit/rest": "21.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2bdcf64..dbc1490 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: 3.9.1 version: 3.9.1(react-hook-form@7.54.1(react@19.0.0)) '@inkonchain/ink-kit': - specifier: 0.9.1-beta.16 - version: 0.9.1-beta.16(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1)) + specifier: 0.9.1-beta.18 + version: 0.9.1-beta.18(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1)) '@next/third-parties': specifier: 15.1.6 version: 15.1.6(next@15.1.6(@babel/core@7.26.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.77.6))(react@19.0.0) @@ -865,8 +865,8 @@ packages: cpu: [x64] os: [win32] - '@inkonchain/ink-kit@0.9.1-beta.16': - resolution: {integrity: sha512-D0dg38/gexXur14myJ9Dlo8Rg0UOVnP+xSYr7RVl1Uf3D1keKq7vgYfvKDhd+HnJfnsRlylOekNjxyjwq0573w==} + '@inkonchain/ink-kit@0.9.1-beta.18': + resolution: {integrity: sha512-+OfUKB36QP9PIxGF7jXSS7gWlgB23rWDHTTxG1oP/8WQaCT2QOl1EWwV4cHWzamZJRt7uwkd8Wj6YBRpcCH0vg==} peerDependencies: '@tanstack/react-query': ^5 react: 19.0.0 @@ -7247,7 +7247,7 @@ snapshots: '@img/sharp-win32-x64@0.33.5': optional: true - '@inkonchain/ink-kit@0.9.1-beta.16(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1))': + '@inkonchain/ink-kit@0.9.1-beta.18(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1))': dependencies: '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@tanstack/react-query': 5.60.6(react@19.0.0) diff --git a/src/app/[locale]/_components/LayoutColumns.tsx b/src/app/[locale]/_components/LayoutColumns.tsx new file mode 100644 index 0000000..d179847 --- /dev/null +++ b/src/app/[locale]/_components/LayoutColumns.tsx @@ -0,0 +1,16 @@ +import { OnlyWithFeatureFlag } from "@/components/OnlyWithFeatureFlag"; + +import { WalletPanel } from "./Wallet/WalletPanel"; + +export function LayoutColumns({ children }: { children: React.ReactNode }) { + return ( + +
+
{children}
+
+ +
+
+ + ); +} diff --git a/src/app/[locale]/_components/Wallet/WalletPanel.tsx b/src/app/[locale]/_components/Wallet/WalletPanel.tsx new file mode 100644 index 0000000..0b8d248 --- /dev/null +++ b/src/app/[locale]/_components/Wallet/WalletPanel.tsx @@ -0,0 +1,102 @@ +"use client"; +import { toast } from "react-toastify"; +import { Button, InkIcon } from "@inkonchain/ink-kit"; +import { useEnsAddress } from "wagmi"; + +import { ConnectWalletButton } from "@/components/ConnectWalletButton"; +import { useWallet } from "@/contexts/WalletProvider"; +import { truncateAddress, truncateEnsName } from "@/util/formatWallet"; + +export function WalletPanel() { + const { isConnected, address } = useWallet(); + + function notYet() { + toast.info("Not yet implemented"); + } + + return ( +
+
+ {!isConnected && ( +
+ +
+ )} +
+
Balance
+ {isConnected && ( + + )} +
+
+
+
$0.00
+
+ +
+
+
+
+ } + label="Receive" + onClick={notYet} + /> + } + label="Send" + onClick={notYet} + /> + } + label="Bridge" + onClick={notYet} + /> + } + label="Deposit" + onClick={notYet} + /> +
+
+ ); +} + +const EnsOrAddress = ({ address }: { address: string }) => { + const { data: ens } = useEnsAddress(); + return ( +
+ {ens ? truncateEnsName(ens) : truncateAddress(address)} +
+ ); +}; + +const WalletPanelButton = ({ + icon, + label, + onClick, +}: { + icon: React.ReactNode; + label: string; + onClick: () => void; +}) => { + return ( +
+ +
{label}
+
+ ); +}; diff --git a/src/app/[locale]/apps/_components/AppsCategoryFilter.tsx b/src/app/[locale]/apps/_components/AppsCategoryFilter.tsx index 67242f1..e7c9cd9 100644 --- a/src/app/[locale]/apps/_components/AppsCategoryFilter.tsx +++ b/src/app/[locale]/apps/_components/AppsCategoryFilter.tsx @@ -47,7 +47,7 @@ export const AppsCategoryFilter = ({ [selected, query] ); return ( - +
-
+
{ @@ -197,7 +197,7 @@ export function AppsContent({ currentCategory }: AppsContentProps) { }); }} /> -
+
{ diff --git a/src/app/[locale]/apps/_components/AppsGrid.tsx b/src/app/[locale]/apps/_components/AppsGrid.tsx index d6052f1..0560bae 100644 --- a/src/app/[locale]/apps/_components/AppsGrid.tsx +++ b/src/app/[locale]/apps/_components/AppsGrid.tsx @@ -3,6 +3,7 @@ import { Tag } from "@inkonchain/ink-kit"; import Image from "next/image"; import { useTranslations } from "next-intl"; +import { useFeatureFlag } from "@/hooks/useFeatureFlag"; import { classNames } from "@/util/classes"; import { AppLinks } from "./AppLinks"; @@ -14,6 +15,7 @@ export const AppsGrid: React.FC<{ noAppsFound: React.ReactNode; network: InkAppNetwork; }> = ({ apps, featuredApps, noAppsFound, network }) => { + const walletColumn = useFeatureFlag("walletColumn"); return (
{apps.length === 0 ? ( @@ -21,7 +23,14 @@ export const AppsGrid: React.FC<{ {noAppsFound}
) : ( -
+
{featuredApps.map((app) => ( ))} diff --git a/src/app/[locale]/community/_components/LetsGetSocial.tsx b/src/app/[locale]/community/_components/LetsGetSocial.tsx index 84dfa7b..1f9ccbe 100644 --- a/src/app/[locale]/community/_components/LetsGetSocial.tsx +++ b/src/app/[locale]/community/_components/LetsGetSocial.tsx @@ -4,12 +4,15 @@ import { useTranslations } from "next-intl"; import { FlyWhenIntoView } from "@/components/FlyWhenIntoView"; import { newLayoutSectionClasses } from "@/components/styles/container"; +import { useFeatureFlag } from "@/hooks/useFeatureFlag"; import { EXTERNAL_LINKS, Link } from "@/routing"; +import { classNames } from "@/util/classes"; import { PageHeader } from "../../_components/PageHeader"; export const LetsGetSocial = () => { const t = useTranslations("Community"); + const walletColumn = useFeatureFlag("walletColumn"); return ( @@ -20,7 +23,14 @@ export const LetsGetSocial = () => { size="section" />
-
+
- {children} + {children}
diff --git a/src/components/ConnectWalletButton.tsx b/src/components/ConnectWalletButton.tsx index 27b013f..a44decc 100644 --- a/src/components/ConnectWalletButton.tsx +++ b/src/components/ConnectWalletButton.tsx @@ -1,18 +1,11 @@ "use client"; -import { Button, InkIcon } from "@inkonchain/ink-kit"; +import { Button, ButtonProps, InkIcon } from "@inkonchain/ink-kit"; import { ConnectButton } from "@rainbow-me/rainbowkit"; import Image from "next/image"; import { classNames } from "@/util/classes"; - -const truncateEnsName = (ensName: string, maxLength = 16) => { - if (!ensName || !ensName.endsWith(".eth")) return ensName; - - const namePart = ensName.slice(0, -4); // Remove .eth - if (namePart.length <= maxLength) return ensName; - return `${namePart.slice(0, maxLength)}...eth`; -}; +import { truncateEnsName } from "@/util/formatWallet"; interface ConnectWalletButtonProps { className?: string; @@ -20,6 +13,7 @@ interface ConnectWalletButtonProps { shrinkOnMobile?: boolean; noIcon?: boolean; size?: "md" | "lg"; + variant?: ButtonProps["variant"]; } export const ConnectWalletButton: React.FC = ({ @@ -28,6 +22,7 @@ export const ConnectWalletButton: React.FC = ({ shrinkOnMobile = false, size = "md", noIcon = false, + variant = "transparent", }) => { return ( @@ -59,7 +54,7 @@ export const ConnectWalletButton: React.FC = ({ type="button" className={classNames(className)} size={size} - variant="transparent" + variant={variant} > {!noIcon && (
@@ -83,7 +78,7 @@ export const ConnectWalletButton: React.FC = ({ className )} size={size} - variant="transparent" + variant={variant} rounded="full" > @@ -99,7 +94,7 @@ export const ConnectWalletButton: React.FC = ({ className )} size={size} - variant="transparent" + variant={variant} >
{account.ensAvatar && account.ensName ? ( diff --git a/src/util/feature-flags.ts b/src/util/feature-flags.ts index 8cdb329..e91e0db 100644 --- a/src/util/feature-flags.ts +++ b/src/util/feature-flags.ts @@ -11,6 +11,7 @@ export const hardcodedFeatureFlags = { fakeEvents: 0, verifyPage: false, grantsSection: false, + walletColumn: false, }; export type FeatureFlagKey = keyof typeof hardcodedFeatureFlags; diff --git a/src/util/formatWallet.ts b/src/util/formatWallet.ts new file mode 100644 index 0000000..c33c5ed --- /dev/null +++ b/src/util/formatWallet.ts @@ -0,0 +1,11 @@ +export const truncateEnsName = (ensName: string, maxLength = 16) => { + if (!ensName || !ensName.endsWith(".eth")) return ensName; + + const namePart = ensName.slice(0, -4); // Remove .eth + if (namePart.length <= maxLength) return ensName; + return `${namePart.slice(0, maxLength)}...eth`; +}; + +export const truncateAddress = (address: string) => { + return `${address.slice(0, 4)}...${address.slice(-4)}`; +};