test: stx_signMessage

Author: kyranjamie

package.json

@@ -146,15 +146,15 @@
     "@hirosystems/token-metadata-api-client": "1.2.0",
     "@hookform/resolvers": "3.9.1",
     "@leather.io/analytics": "2.0.1",
-    "@leather.io/bitcoin": "0.19.18",
+    "@leather.io/bitcoin": "0.19.19",
     "@leather.io/constants": "0.15.5",
-    "@leather.io/crypto": "1.6.34",
+    "@leather.io/crypto": "1.6.35",
     "@leather.io/models": "0.25.1",
-    "@leather.io/query": "2.26.19",
-    "@leather.io/stacks": "1.5.19",
-    "@leather.io/tokens": "0.12.10",
-    "@leather.io/ui": "1.48.2",
-    "@leather.io/utils": "0.25.1",
+    "@leather.io/query": "2.26.21",
+    "@leather.io/stacks": "1.5.20",
+    "@leather.io/tokens": "0.12.11",
+    "@leather.io/ui": "1.48.3",
+    "@leather.io/utils": "0.25.2",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",
     "@noble/secp256k1": "2.1.0",
@@ -173,7 +173,7 @@
     "@sentry/tracing": "7.106.0",
     "@stacks/auth": "7.0.2",
     "@stacks/common": "7.0.2",
-    "@stacks/connect": "7.4.0",
+    "@stacks/connect-jwt": "npm:@stacks/connect@7.4.0",
     "@stacks/encryption": "7.0.2",
     "@stacks/network": "7.0.2",
     "@stacks/network-v6": "npm:@stacks/[email protected]",
@@ -266,20 +266,20 @@
     "@actions/core": "1.10.1",
     "@chromatic-com/storybook": "3.2.2",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": " 0.8.9",
+    "@leather.io/panda-preset": "0.8.10",
     "@leather.io/prettier-config": "0.6.0",
-    "@leather.io/rpc": "2.5.5",
+    "@leather.io/rpc": "2.5.6",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.46.1",
-    "@playwright/test": "1.48.2",
+    "@playwright/test": "1.50.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.13",
     "@redux-devtools/cli": "4.0.0",
     "@redux-devtools/remote": "0.9.3",
     "@schemastore/web-manifest": "0.0.6",
     "@sentry/react": "8.26.0",
     "@sentry/webpack-plugin": "2.17.0",
-    "@stacks/connect-react": "22.2.0",
+    "@stacks/connect-react-jwt": "npm:@stacks/connect-react@22.2.0",
     "@stacks/stacks-blockchain-api-types": "7.8.2",
     "@storybook/addon-docs": "8.4.4",
     "@storybook/addon-essentials": "8.4.4",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import type { TransactionInput } from '@scure/btc-signer/psbt';
-import { PsbtPayload } from '@stacks/connect';
+import { PsbtPayload } from '@stacks/connect-jwt';
 import { decodeToken } from 'jsontokens';
 
 import type { Money } from '@leather.io/models';

src/app/common/psbt/requests.ts

@@ -1,5 +1,5 @@
 import type { Transaction } from '@scure/btc-signer';
-import type { SignatureData } from '@stacks/connect';
+import type { SignatureData } from '@stacks/connect-jwt';
 import type { StacksTransactionWire } from '@stacks/transactions';
 import type { StacksTransaction } from '@stacks/transactions-v6';
 

src/app/common/publish-subscribe.ts

@@ -1,3 +1,4 @@
+import type { SignatureData } from '@stacks/connect-jwt';
 import isEqual from 'lodash.isequal';
 
 import type { UnsignedMessage } from '@shared/signature/signature-types';
@@ -6,7 +7,7 @@ import { GlobalAppEvents, appEvents } from '@app/common/publish-subscribe';
 
 export async function listenForStacksMessageSigning(
   unsignedMessage: UnsignedMessage
-): Promise<any> {
+): Promise<SignatureData> {
   return new Promise((resolve, reject) => {
     function stacksMessageSignedHandler(msg: GlobalAppEvents['ledgerStacksMessageSigned']) {
       if (isEqual(msg.unsignedMessage, unsignedMessage)) {

src/app/features/ledger/flows/stacks-message-signing/stacks-message-signing-event-listeners.ts

@@ -63,7 +63,6 @@ export function StacksMessageSigning({
   return (
     <MessageSigningRequestLayout>
       <MessageSigningHeader name={origin} origin={origin} />
-
       {isUtf8MessageType(messageType) && payload.messageType === 'utf8' && (
         <StacksSignatureRequestMessageContent
           isLoading={isLoading}

src/app/features/stacks-message-signer/stacks-message-signing.tsx

@@ -10,7 +10,7 @@ import { createDelay } from '@shared/utils';
 
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
-export const improveUxWithShortDelayAsStacksSigningIsSoFast = createDelay(1000);
+export const improveUxWithShortDelayAsStacksSigningIsSoFast = createDelay(600);
 
 export function useMessageSignerStacksSoftwareWallet() {
   const account = useCurrentStacksAccount();

src/app/features/stacks-message-signer/stacks-message-signing.utils.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { SignatureData } from '@stacks/connect';
+import { SignatureData } from '@stacks/connect-jwt';
 
 import { logger } from '@shared/logger';
 import { UnsignedMessage } from '@shared/signature/signature-types';

src/app/features/stacks-message-signer/use-sign-stacks-message.ts

@@ -45,6 +45,7 @@ export function useRpcStacksMessagePayload() {
       appName,
     } satisfies Utf8Payload;
   }
+
   if (isStructuredMessageType(messageType)) {
     if (!domain) return null;
 
@@ -96,7 +97,10 @@ export function useRpcSignStacksMessage() {
         tabId,
         makeRpcSuccessResponse('stx_signMessage', {
           id: requestId,
-          result: { signature: messageSignature.signature },
+          result: {
+            signature: messageSignature.signature,
+            publicKey: messageSignature.publicKey,
+          },
         })
       );
       closeWindow();

src/app/pages/rpc-sign-stacks-message/use-rpc-sign-stacks-message.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { bytesToHex } from '@stacks/common';
-import { type ContractCallPayload, TransactionTypes } from '@stacks/connect';
+import { type ContractCallPayload, TransactionTypes } from '@stacks/connect-jwt';
 import { PostConditionMode } from '@stacks/transactions';
 import { serializeCV } from '@stacks/transactions-v6';
 import type { RouteQuote } from 'bitflow-sdk';

src/app/pages/swap/providers/use-stacks-swap.tsx

@@ -1,5 +1,5 @@
 import { hexToBytes } from '@stacks/common';
-import type { ContractCallPayload } from '@stacks/connect';
+import type { ContractCallPayload } from '@stacks/connect-jwt';
 import {
   AnchorMode,
   BytesReader,

src/app/store/transactions/contract-call-v6.ts

@@ -64,7 +64,7 @@ export async function rpcSignStacksMessage(
     requestParams.push(['network', message.params.network.toString()]);
   }
 
-  if (isDefined(message.params.domain)) {
+  if ('domain' in message.params) {
     requestParams.push([
       'domain',
       (message.params as StxSignMessageRequestParamsStructured).domain.toString(),

src/background/messaging/rpc-methods/sign-stacks-message.ts

@@ -1,4 +1,4 @@
-import type { StacksProvider } from '@stacks/connect';
+import type { StacksProvider } from '@stacks/connect-jwt';
 
 import { type LeatherRpcMethodMap, type RpcParameter, RpcRequest } from '@leather.io/rpc';
 

src/inpage/inpage.ts

@@ -1,4 +1,4 @@
-import { SignatureData } from '@stacks/connect';
+import { SignatureData } from '@stacks/connect-jwt';
 
 import { ExternalMethods, MESSAGE_SOURCE, SignatureResponseMessage } from '@shared/message-types';
 

src/shared/actions/finalize-message-signature-format.ts

@@ -1,4 +1,4 @@
-import { SignatureData } from '@stacks/connect';
+import { SignatureData } from '@stacks/connect-jwt';
 
 import { closeWindow } from '@shared/utils';
 

src/shared/actions/finalize-message-signature.ts

@@ -1,4 +1,4 @@
-import { PsbtData } from '@stacks/connect';
+import { PsbtData } from '@stacks/connect-jwt';
 
 import { ExternalMethods, MESSAGE_SOURCE, PsbtResponseMessage } from '@shared/message-types';
 import { closeWindow } from '@shared/utils';

src/shared/actions/finalize-psbt.ts

@@ -1,5 +1,5 @@
 import { type PrivateKey, bytesToHex } from '@stacks/common';
-import { SignatureData } from '@stacks/connect';
+import { SignatureData } from '@stacks/connect-jwt';
 import { hashMessage } from '@stacks/encryption';
 import {
   ClarityValue,

src/shared/crypto/sign-message.ts

@@ -3,7 +3,7 @@ import {
   PsbtData,
   SignatureData,
   SponsoredFinishedTxPayload,
-} from '@stacks/connect';
+} from '@stacks/connect-jwt';
 import { PublicProfile } from '@stacks/profile';
 
 export const MESSAGE_SOURCE = 'stacks-wallet';

src/shared/message-types.ts

@@ -4,7 +4,7 @@ import {
   ContractDeployPayload as ConnectContractDeployPayload,
   ProfileUpdatePayload as ConnectProfileUpdatePayload,
   STXTransferPayload as ConnectSTXTransferPayload,
-} from '@stacks/connect';
+} from '@stacks/connect-jwt';
 import type { StacksNetwork } from '@stacks/network';
 import type { PostCondition, PostConditionWire } from '@stacks/transactions';
 import { decodeToken } from 'jsontokens';

src/shared/utils/legacy-requests.ts

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { AppState, defaultState } from '@common/context';
 import { AppConfig, UserSession } from '@stacks/auth';
-import { AuthOptions } from '@stacks/connect';
+import { AuthOptions } from '@stacks/connect-jwt';
 
 export function useAuth() {
   const [state, setState] = React.useState<AppState>(defaultState());

test-app/src/common/use-auth.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { AppContext } from '@common/context';
 import { useAuth } from '@common/use-auth';
 import { Home } from '@components/home';
-import { Connect } from '@stacks/connect-react';
+import { Connect } from '@stacks/connect-react-jwt';
 import { Box, styled } from 'leather-styles/jsx';
 import { Flex } from 'leather-styles/jsx';
 

test-app/src/components/app.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useConnect } from '@stacks/connect-react';
+import { useConnect } from '@stacks/connect-react-jwt';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { Box, styled } from 'leather-styles/jsx';
 

test-app/src/components/auth.tsx

@@ -4,8 +4,8 @@ import { AppContext } from '@common/context';
 import { stacksTestnetNetwork } from '@common/utils';
 import * as btc from '@scure/btc-signer';
 import { bytesToHex, hexToBytes } from '@stacks/common';
-import { PsbtData, PsbtRequestOptions } from '@stacks/connect';
-import { useConnect } from '@stacks/connect-react';
+import { PsbtData, PsbtRequestOptions } from '@stacks/connect-jwt';
+import { useConnect } from '@stacks/connect-react-jwt';
 import { StacksNetwork } from '@stacks/network';
 import { styled } from 'leather-styles/jsx';
 

test-app/src/components/bitcoin.tsx

@@ -4,7 +4,7 @@ import { IntCV, deserializeCV } from '@blockstack/stacks-transactions';
 import { AppContext } from '@common/context';
 import { getRPCClient, stacksTestnetNetwork as network } from '@common/utils';
 import { ExplorerLink } from '@components/explorer-link';
-import { useConnect } from '@stacks/connect-react';
+import { useConnect } from '@stacks/connect-react-jwt';
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
 export const CounterActions: React.FC = () => {

test-app/src/components/counter-actions.tsx

@@ -9,7 +9,7 @@ import {
   stacksTestnetNetwork,
 } from '@common/utils';
 import { hexToBytes } from '@stacks/common';
-import { useConnect } from '@stacks/connect-react';
+import { useConnect } from '@stacks/connect-react-jwt';
 import { STACKS_TESTNET } from '@stacks/network';
 import { type StacksTestnet } from '@stacks/network-v6';
 import {

test-app/src/components/debugger.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SampleContracts } from '@common/contracts';
-import { useConnect } from '@stacks/connect-react';
+import { useConnect } from '@stacks/connect-react-jwt';
 import { Box, styled } from 'leather-styles/jsx';
 
 import { ExplorerLink } from './explorer-link';

test-app/src/components/deploy.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { useAuth } from '@common/use-auth';
 import { stacksMainnetNetwork, stacksTestnetNetwork } from '@common/utils';
-import { openProfileUpdateRequestPopup } from '@stacks/connect';
+import { openProfileUpdateRequestPopup } from '@stacks/connect-jwt';
 import { StacksNetwork } from '@stacks/network';
 import { PublicPersonProfile, PublicProfile } from '@stacks/profile';
 import { TestAppSelectors } from '@tests/selectors/test-app.selectors';

test-app/src/components/profile.tsx

@@ -1,14 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import React from 'react';
 
-import {
-  stacksTestnetNetwork as network,
-  stacksMainnetNetwork,
-  stacksTestnetNetwork,
-} from '@common/utils';
+import { stacksTestnetNetwork as network, stacksTestnetNetwork } from '@common/utils';
 import { sha256 } from '@noble/hashes/sha256';
 import { bytesToHex } from '@noble/hashes/utils';
-import { SignatureData } from '@stacks/connect';
-import { useConnect } from '@stacks/connect-react';
+import { SignatureData } from '@stacks/connect-jwt';
+import { useConnect } from '@stacks/connect-react-jwt';
 import { hashMessage, verifyMessageSignatureRsv } from '@stacks/encryption';
 import { StacksNetwork } from '@stacks/network';
 import {
@@ -34,6 +31,14 @@ import {
 } from '@stacks/transactions';
 import { Box, styled } from 'leather-styles/jsx';
 
+import { LeatherProvider } from '@leather.io/rpc';
+
+declare global {
+  interface Window {
+    LeatherProvider?: LeatherProvider;
+  }
+}
+
 export const Signature = () => {
   const [signature, setSignature] = useState<SignatureData | undefined>();
   const [signatureStructured, setSignatureStructured] = useState<SignatureData | undefined>();
@@ -125,13 +130,24 @@ export const Signature = () => {
   };
 
   const signMessageRpc = async (message: string) => {
+    if (!window.LeatherProvider) throw new Error('LeatherProvider not found');
+
     clearState();
     setCurrentMessage(message);
 
-    await window.btc?.request('stx_signMessage', {
+    const result = await window.LeatherProvider.request('stx_signMessage', {
       message,
       messageType: 'utf8',
     });
+
+    const isValid = verifyMessageSignatureRsv({
+      ...result.result,
+      message: hashMessage(message),
+    });
+
+    console.log('Is message valid', isValid);
+
+    console.log('signature from rpc', result);
   };
 
   const domain = tupleCV({
@@ -162,18 +178,22 @@ export const Signature = () => {
   };
 
   const signStructureRpc = async (message: ClarityValue, domain: TupleCV) => {
+    if (!window.LeatherProvider) throw new Error('LeatherProvider not found');
+
     clearState();
     setCurrentStructuredData({ message, domain });
 
     // ClarityValue -> Uint8Array -> Buffer -> string (hex)
-    const stringMessage = Buffer.from(serializeCV(message)).toString('hex');
-    const stringDomain = Buffer.from(serializeCV(domain)).toString('hex');
+    const stringMessage = serializeCV(message);
+    const stringDomain = serializeCV(domain);
 
-    await window.btc?.request('stx_signMessage', {
+    const result = await window.LeatherProvider.request('stx_signMessage', {
       message: stringMessage,
       messageType: 'structured',
       domain: stringDomain,
     });
+
+    setSignatureStructured(result.result);
   };
 
   const sip18Test = [
@@ -196,14 +216,10 @@ export const Signature = () => {
           </styled.span>
         </styled.span>
       )}
-      <styled.button mt={3} onClick={() => signMessage(signatureMessage, stacksMainnetNetwork)}>
+      <styled.button mt={3} onClick={() => signMessage(signatureMessage)}>
         Signature (Mainnet)
       </styled.button>
-      <styled.button
-        mt={3}
-        ml={3}
-        onClick={() => signMessage(signatureMessage, stacksTestnetNetwork)}
-      >
+      <styled.button mt={3} ml={3} onClick={() => signMessage(signatureMessage)}>
         Signature (Testnet)
       </styled.button>
       <br />

test-app/src/components/signature.tsx

@@ -11,7 +11,7 @@ import {
 import { useSTXAddress } from '@common/use-stx-address';
 import { getRPCClient, stacksTestnetNetwork as network } from '@common/utils';
 import { TxCard } from '@components/tx-card';
-import { useConnect } from '@stacks/connect-react';
+import { useConnect } from '@stacks/connect-react-jwt';
 import type { ContractCallTransaction } from '@stacks/stacks-blockchain-api-types';
 import { Box, Flex, styled } from 'leather-styles/jsx';
 

test-app/src/components/status.tsx

@@ -23,7 +23,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "paths": {
       "@store/*": ["./store/*"],
       "@store": ["./store/index"],