[core] Bumped @aptos-connect/wallet-adapter-plugin to "^2.2.1" (#442)

* [core] Bumped `@aptos-connect/wallet-adapter-plugin` to "^2.2.1"

* [example-dapp] Added flow for testing claims

* [workspace] Generated changeset

.changeset/mean-apricots-pay.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-core": minor
+---
+
+Bumped the Aptos Connect plugin to support claims

apps/nextjs-example/components.json

@@ -12,6 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
+    "hooks": "@/hooks",
     "utils": "@/lib/utils"
   }
 }

apps/nextjs-example/package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
+    "@tanstack/react-query": "^5.59.16",
     "@telegram-apps/sdk": "^2.0.0",
     "@trustwallet/aptos-wallet-adapter": "^0.1.6",
     "antd": "^5.1.2",

apps/nextjs-example/src/app/layout.tsx

@@ -9,6 +9,7 @@ import type { Metadata } from "next";
 import { Inter as FontSans } from "next/font/google";
 import { PropsWithChildren } from "react";
 import { AutoConnectProvider } from "@/components/AutoConnectProvider";
+import { ReactQueryClientProvider } from '@/components/ReactQueryClientProvider';
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -37,10 +38,12 @@ export default function RootLayout({ children }: PropsWithChildren) {
           disableTransitionOnChange
         >
           <AutoConnectProvider>
-            <WalletProvider>
-              {children}
-              <Toaster />
-            </WalletProvider>
+            <ReactQueryClientProvider>
+              <WalletProvider>
+                {children}
+                <Toaster />
+              </WalletProvider>
+            </ReactQueryClientProvider>
           </AutoConnectProvider>
         </ThemeProvider>
       </body>

apps/nextjs-example/src/components/ReactQueryClientProvider.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+
+const queryClient = new QueryClient();
+
+export function ReactQueryClientProvider({ children }: PropsWithChildren) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}

apps/nextjs-example/src/components/WalletProvider.tsx

@@ -10,13 +10,17 @@ import { TrustWallet } from "@trustwallet/aptos-wallet-adapter";
 import { FewchaWallet } from "fewcha-plugin-wallet-adapter";
 import { PropsWithChildren } from "react";
 import { Network } from "@aptos-labs/ts-sdk";
+import { useClaimSecretKey } from '@/hooks/useClaimSecretKey';
 import { useAutoConnect } from "./AutoConnectProvider";
 import { useToast } from "./ui/use-toast";
 
 export const WalletProvider = ({ children }: PropsWithChildren) => {
   const { autoConnect } = useAutoConnect();
   const { toast } = useToast();
 
+  // Enables claim flow when the `claim` query param is detected
+  const claimSecretKey = useClaimSecretKey();
+
   const wallets = [
     new BitgetWallet(),
     new FewchaWallet(),
@@ -34,7 +38,11 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
       dappConfig={{
         network: Network.TESTNET,
         aptosApiKey: process.env.NEXT_PUBLIC_APTOS_API_KEY,
-        aptosConnect: { dappId: "57fa42a9-29c6-4f1e-939c-4eefa36d9ff5" },
+        aptosConnect: {
+          claimSecretKey,
+          dappId: "57fa42a9-29c6-4f1e-939c-4eefa36d9ff5",
+          frontendBaseURL: 'http://localhost:3000'
+        },
         mizuwallet: {
           manifestURL:
             "https://assets.mz.xyz/static/config/mizuwallet-connect-manifest.json",

apps/nextjs-example/src/hooks/useClaimSecretKey.ts

@@ -0,0 +1,64 @@
+import { Account, AccountAddress, Aptos, AptosConfig, Ed25519PrivateKey, Network } from '@aptos-labs/ts-sdk';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo } from 'react';
+
+const claimSecretKeyStorageKey = '@wallet-adapter-example-dapp/claimSecretKey';
+
+const config = new AptosConfig({ network: Network.TESTNET });
+const aptos = new Aptos(config);
+
+function getPersistedClaimSecretKey() {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  const currentValue = window.localStorage.getItem(claimSecretKeyStorageKey) ?? undefined;
+  if (currentValue) {
+    return currentValue;
+  }
+  const newValue = Ed25519PrivateKey.generate().toString();
+  window.localStorage.setItem(claimSecretKeyStorageKey, newValue);
+  return newValue;
+}
+
+export function useClaimSecretKey() {
+  const claimEnabled = typeof window !== 'undefined' && new URL(window.location.href).searchParams.get('claim') !== null;
+  const claimSecretKey = claimEnabled ? getPersistedClaimSecretKey() : undefined;
+  const claimAccountAddress = useMemo(() => {
+    if (!claimSecretKey) {
+      return undefined;
+    }
+    const secretKey = new Ed25519PrivateKey(claimSecretKey);
+    const account = Account.fromPrivateKey({ privateKey: secretKey });
+    return account.accountAddress;
+  }, [claimSecretKey]);
+
+  const { data: claimableBalance } = useQuery({
+    queryKey: ['accounts', claimAccountAddress, 'aptBalance'],
+    queryFn: async () => aptos.getAccountCoinAmount({
+      accountAddress: claimAccountAddress!,
+      coinType: '0x1::aptos_coin::AptosCoin',
+    }),
+    enabled: claimAccountAddress !== undefined,
+  });
+
+  const { isPending: isFunding, mutate: fundAccount, isSuccess: isFunded } = useMutation({
+    mutationFn: async (accountAddress: AccountAddress) => aptos.fundAccount({
+      accountAddress,
+      amount: 1e8 - (claimableBalance ?? 0),
+    }),
+  });
+
+  useEffect(() => {
+    if (claimAccountAddress === undefined || claimableBalance === undefined) {
+      return;
+    }
+
+    if (claimableBalance < 1e4 && !isFunded && !isFunding) {
+      fundAccount(claimAccountAddress);
+    }
+  }, [claimAccountAddress, claimSecretKey, claimableBalance, fundAccount, isFunded, isFunding]);
+
+  return claimSecretKey;
+}

packages/wallet-adapter-core/package.json

@@ -50,7 +50,7 @@
     "typescript": "^4.5.3"
   },
   "dependencies": {
-    "@aptos-connect/wallet-adapter-plugin": "^2.1.1",
+    "@aptos-connect/wallet-adapter-plugin": "^2.2.1",
     "@aptos-labs/wallet-standard": "^0.2.0",
     "@atomrigslab/aptos-wallet-adapter": "^0.1.20",
     "@mizuwallet-sdk/aptos-wallet-adapter": "^0.3.1",