feat: wallet pay dapp

advanced/dapps/react-dapp-v2/package.json

@@ -26,12 +26,12 @@
     "@solana/web3.js": "^1.36.0",
     "@stacks/network": "^7.0.2",
     "@stacks/transactions": "^7.0.6",
-    "@walletconnect/core": "2.21.8",
+    "@walletconnect/core": "2.21.10-canary-a-1",
     "@walletconnect/encoding": "^1.0.1",
     "@walletconnect/jsonrpc-utils": "^1.0.8",
-    "@walletconnect/types": "2.21.8",
-    "@walletconnect/universal-provider": "2.21.8",
-    "@walletconnect/utils": "2.21.8",
+    "@walletconnect/types": "2.21.10-canary-a-1",
+    "@walletconnect/universal-provider": "2.21.10-canary-a-1",
+    "@walletconnect/utils": "2.21.10-canary-a-1",
     "@reown/appkit": "1.7.5",
     "axios": "^1.0.0",
     "@mysten/sui": "^1.29.1",
@@ -55,8 +55,11 @@
     "react-scripts": "^4.0.3",
     "solana-wallet": "^1.0.1",
     "styled-components": "^6.1.15",
-    "tronweb": "^4.4.0",
-    "web-vitals": "^0.2.4"
+    "tronweb": "^6.0.4",
+    "web-vitals": "^0.2.4",
+    "@ton/crypto": "^3.3.0",
+    "@ton/core": "^0.61.0",
+    "@ton/ton": "^15.3.1"
   },
   "devDependencies": {
     "@types/eth-sig-util": "^2.1.1",
@@ -111,14 +114,14 @@
       "next@>=9.5.5 <14.2.15": ">=14.2.15",
       "ansi-html@<0.0.8": ">=0.0.8",
       "axios@<1.8.2": ">=1.8.2",
-      "@walletconnect/core@": ">=2.21.8",
+      "@walletconnect/core@": "2.21.10-canary-a-1",
       "@walletconnect/encoding@": ">=1.0.1",
       "@walletconnect/jsonrpc-utils@": ">=1.0.8",
-      "@walletconnect/types@": ">=2.21.8",
-      "@walletconnect/universal-provider@": ">=2.21.8",
-      "@walletconnect/sign-client@": ">=2.21.8",
-      "@walletconnect/utils@": ">=2.21.8",
-      "@walletconnect/ethereum-provider@": ">=2.21.8"
+      "@walletconnect/types@": "2.21.10-canary-a-1",
+      "@walletconnect/universal-provider@": "2.21.10-canary-a-1",
+      "@walletconnect/sign-client@": "2.21.10-canary-a-1",
+      "@walletconnect/utils@": "2.21.10-canary-a-1",
+      "@walletconnect/ethereum-provider@": "2.21.10-canary-a-1"
     }
   }
-}
+}

advanced/dapps/react-dapp-v2/src/components/Blockchain.tsx

@@ -16,6 +16,7 @@ import {
   ChainData,
 } from "../helpers";
 import { fonts } from "../styles";
+import Icon from "./Icon";
 
 interface AccountStyleProps {
   rgb: string;
@@ -88,6 +89,48 @@ const SBlockchainChildrenContainer = styled(SFullWidthContainer)`
   flex-direction: column;
 `;
 
+const STooltipContainer = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  cursor: help;
+
+  & svg {
+    display: block;
+  }
+
+  &:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 12px;
+    background-color: rgba(0, 0, 0, 0.9);
+    color: white;
+    border-radius: 6px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 1000;
+    margin-bottom: 8px;
+    pointer-events: none;
+  }
+
+  &:hover::before {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: rgba(0, 0, 0, 0.9);
+    margin-bottom: 2px;
+    z-index: 1000;
+    pointer-events: none;
+  }
+`;
+
 interface BlockchainProps {
   chainData: ChainNamespaces;
   fetching?: boolean;
@@ -97,6 +140,7 @@ interface BlockchainProps {
   onClick?: (chain: string) => void;
   balances?: AccountBalances;
   actions?: AccountAction[];
+  isAuthenticated?: boolean;
 }
 
 interface BlockchainDisplayData {
@@ -134,6 +178,7 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
     active,
     balances,
     actions,
+    isAuthenticated,
   } = props;
   if (!Object.keys(chainData).length) return null;
 
@@ -148,6 +193,7 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
     typeof account !== "undefined" && typeof balances !== "undefined"
       ? balances[account]
       : [];
+
   return (
     <React.Fragment>
       <SAccount
@@ -159,7 +205,39 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
           <img src={chain.meta.logo} alt={name} />
           <p>{name}</p>
         </SChain>
-        {!!address && <p>{ellipseAddress(address)}</p>}
+        {!!address && (
+          <p>
+            {ellipseAddress(address)}{" "}
+            {isAuthenticated && (
+              <STooltipContainer data-tooltip="Address ownership has been verified by a signature">
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2L4 6V11C4 16.55 7.84 21.74 12 23C16.16 21.74 20 16.55 20 11V6L12 2Z"
+                    fill="#10B981"
+                    fillOpacity="0.2"
+                    stroke="#10B981"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M9 12L11 14L15 10"
+                    stroke="#10B981"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </STooltipContainer>
+            )}
+          </p>
+        )}
         <SBlockchainChildrenContainer>
           {fetching ? (
             <Column center>

advanced/dapps/react-dapp-v2/src/contexts/ClientContext.tsx

@@ -4,6 +4,7 @@ import { AppKit, CaipNetwork, CaipNetworkId } from "@reown/appkit";
 import { createAppKit } from "@reown/appkit/core";
 import { defineChain } from "@reown/appkit/networks";
 import {
+  ConnectParams,
   IUniversalProvider,
   NamespaceConfig,
   UniversalProvider,
@@ -23,7 +24,15 @@ import {
   useState,
 } from "react";
 
-import { getAppMetadata, getSdkError } from "@walletconnect/utils";
+import {
+  formatMessage,
+  getAppMetadata,
+  getDidAddress,
+  getDidAddressNamespace,
+  getDidChainId,
+  getSdkError,
+  parseChainId,
+} from "@walletconnect/utils";
 import {
   DEFAULT_LOGGER,
   DEFAULT_PROJECT_ID,
@@ -32,6 +41,7 @@ import {
 import { AccountBalances, apiGetAccountBalance } from "../helpers";
 import { getRequiredNamespaces } from "../helpers/namespaces";
 import { getPublicKeysFromAccounts } from "../helpers/solana";
+import { isValidSignature } from "./JsonRpcContext";
 
 /**
  * Types
@@ -55,6 +65,7 @@ interface IContext {
   setRelayerRegion: any;
   origin: string;
   setAccounts: any;
+  authenticatedAddresses: string[];
 }
 
 /**
@@ -80,6 +91,9 @@ export function ClientContextProvider({
   const [isFetchingBalances, setIsFetchingBalances] = useState(false);
   const [isInitializing, setIsInitializing] = useState(false);
   const prevRelayerValue = useRef<string>("");
+  const [authenticatedAddresses, setAuthenticatedAddresses] = useState<
+    string[]
+  >([]);
 
   const [balances, setBalances] = useState<AccountBalances>({});
   const [accounts, setAccounts] = useState<string[]>([]);
@@ -182,16 +196,36 @@ export function ClientContextProvider({
           }
         });
 
+        const authentication: ConnectParams["authentication"] = [
+          {
+            uri: window.location.origin,
+            domain: window.location.host,
+            chains: [
+              ...Object.values(namespacesToRequest)
+                .map((namespace) => namespace?.chains?.join(",") || "")
+                .flat(),
+            ],
+            nonce: "1",
+            ttl: 1000,
+          },
+        ];
+
+        console.log("authentication", authentication);
+
         provider.namespaces = undefined;
         const session = await provider.connect({
           pairingTopic: pairing?.topic,
           optionalNamespaces: namespacesToRequest as NamespaceConfig,
+          authentication,
         });
 
         if (!session) {
           throw new Error("Session is not connected");
         }
 
+        const authenticationResults = session.authentication;
+        validateAuthenticationResults(authenticationResults);
+
         console.log("Established session:", session);
         await onSessionConnected(session);
         // Update known pairings after session is connected.
@@ -227,6 +261,41 @@ export function ClientContextProvider({
     reset();
   }, [client, session]);
 
+  const validateAuthenticationResults = useCallback(
+    async (authenticationResults: SessionTypes.Struct["authentication"]) => {
+      console.log("authenticationResults", authenticationResults);
+      if (!authenticationResults) return;
+      for (const cacao of authenticationResults) {
+        console.log("cacao", cacao);
+        const { s, p } = cacao;
+        const message = formatMessage(cacao.p, p.iss);
+        const valid = await isValidSignature({
+          message,
+          iss: p.iss,
+          signature: s.s,
+          signatureMeta: s.m,
+        });
+        try {
+          // finish this
+          if (valid) {
+            const namespace = getDidAddressNamespace(p.iss);
+            const reference = getDidChainId(p.iss)!;
+            const address = getDidAddress(p.iss)!;
+            setAuthenticatedAddresses((prev) => [
+              ...prev,
+              `${namespace}:${reference}:${address}`,
+            ]);
+          }
+
+          console.log("isValid", valid);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+    []
+  );
+
   const _subscribeToEvents = useCallback(
     async (_client: Client) => {
       if (typeof _client === "undefined") {
@@ -278,6 +347,9 @@ export function ClientContextProvider({
         );
         console.log("RESTORED SESSION:", _session);
         await onSessionConnected(_session);
+
+        const authenticationResults = _session.authentication;
+        validateAuthenticationResults(authenticationResults);
         return _session;
       }
     },
@@ -444,6 +516,7 @@ export function ClientContextProvider({
       setRelayerRegion,
       origin,
       setAccounts,
+      authenticatedAddresses,
     }),
     [
       pairings,
@@ -462,6 +535,7 @@ export function ClientContextProvider({
       setRelayerRegion,
       origin,
       setAccounts,
+      authenticatedAddresses,
     ]
   );