Merge branch 'main' into feat/switch-to-sip-030

# Conflicts: # package-lock.json # packages/connect/src/stories/ConnectPage.tsx # packages/connect/src/stories/connect.css
hirosystems · Feb 10, 2025 · df0640c · df0640c
2 parents f8c6c15 + 3dff26e
commit df0640c
Show file tree

Hide file tree

Showing 8 changed files with 321 additions and 5,567 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 22.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`ed9532a`](https://github.com/hirosystems/connect/commit/ed9532ac1b88cbcdb4d909cd6c45030fc00b78dd)]:
+  - @stacks/connect@7.10.1
+
 ## 22.6.1
 
 ### Patch Changes

diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stacks/connect-react",
-  "version": "22.6.1",
+  "version": "22.6.2",
   "license": "MIT",
   "scripts": {
     "build": "concurrently 'tsup src/index.ts' 'npm run types'",
@@ -9,7 +9,7 @@
     "types": "tsc --project tsconfig.json --emitDeclarationOnly"
   },
   "dependencies": {
-    "@stacks/connect": "7.10.0",
+    "@stacks/connect": "7.10.1",
     "jsontokens": "^4.0.1"
   },
   "devDependencies": {

diff --git a/packages/connect/CHANGELOG.md b/packages/connect/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 7.10.1
+
+### Patch Changes
+
+- [#405](https://github.com/hirosystems/connect/pull/405) [`ed9532a`](https://github.com/hirosystems/connect/commit/ed9532ac1b88cbcdb4d909cd6c45030fc00b78dd) Thanks [@martinsvinicius](https://github.com/martinsvinicius)! - Avoid Asigna initialization when the window object is not defined
+
 ## 7.10.0
 
 ### Minor Changes

diff --git a/packages/connect/package.json b/packages/connect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stacks/connect",
-  "version": "7.10.0",
+  "version": "7.10.1",
   "license": "MIT",
   "scripts": {
     "build": "concurrently 'tsup src/index.ts' 'npm run types'",

diff --git a/packages/connect/src/asigna.ts b/packages/connect/src/asigna.ts
@@ -24,6 +24,8 @@ const AsignaIframeProvider = {
 const generateAsignaMessage = (payload: string, key: string) => ({ source, [key]: payload });
 
 export const initializeAsignaProvider = () => {
+  if (typeof window === 'undefined') return;
+
   const isAsignaIframe = !!window.top && document.referrer.endsWith('.asigna.io/');
   if (isAsignaIframe) {
     window['AsignaProvider'] = AsignaIframeProvider;

diff --git a/packages/connect/src/stories/ConnectPage.tsx b/packages/connect/src/stories/ConnectPage.tsx
@@ -15,6 +15,22 @@ import { UserSession } from '../auth';
 import { useForm, FormProvider } from 'react-hook-form';
 import './connect.css';
 import { Cl } from '@stacks/transactions';
+import { AppConfig, UserSession } from '@stacks/auth';
+import { getSelectedProviderId } from '@stacks/connect-ui';
+import { Cl } from '@stacks/transactions';
+import { useReducer, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import {
+  disconnect,
+  showConnect,
+  showContractCall,
+  showContractDeploy,
+  showSignMessage,
+  showSignStructuredMessage,
+  showSignTransaction,
+  showSTXTransfer,
+} from '../ui';
+import './connect.css';
 
 declare global {
   interface BigInt {
@@ -90,7 +106,7 @@ const LegacySignMessageForm = () => {
     <FormProvider {...methods}>
       <section>
         <h3>showSignMessage</h3>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={void onSubmit}>
           <div>
             <label htmlFor="message">Message</label>
             <input
@@ -123,6 +139,7 @@ const LegacySTXTransferForm = () => {
     showSTXTransfer({
       amount,
       recipient,
+      network: 'mainnet',
       appDetails,
       onFinish: d => {
         setResponse(d);
@@ -138,7 +155,7 @@ const LegacySTXTransferForm = () => {
     <FormProvider {...methods}>
       <section>
         <h3>showSTXTransfer</h3>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={void onSubmit}>
           <div>
             <label htmlFor="amount">Amount (uSTX)</label>
             <input id="amount" {...register('amount', { required: true })} defaultValue="1000" />
@@ -198,6 +215,7 @@ const LegacyContractCallForm = () => {
         contractName,
         functionName,
         functionArgs: parsedArgs,
+        network: 'mainnet',
         appDetails,
         onFinish: d => {
           setResponse(d);
@@ -208,6 +226,7 @@ const LegacyContractCallForm = () => {
         },
       });
     } catch (e) {
+      console.error(e);
       setResponse({ error: `Failed to parse arguments: ${e.message}` });
     }
   });
@@ -216,29 +235,29 @@ const LegacyContractCallForm = () => {
     <FormProvider {...methods}>
       <section>
         <h3>showContractCall</h3>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={void onSubmit}>
           <div>
             <label htmlFor="contractAddress">Contract Address</label>
             <input
               id="contractAddress"
               {...register('contractAddress', { required: true })}
-              defaultValue="ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK"
+              defaultValue="SPGSJA8EMYDBAJDX6Z4ED8CWW071B6NB95PJC9WC"
             />
           </div>
           <div>
             <label htmlFor="contractName">Contract Name</label>
             <input
               id="contractName"
               {...register('contractName', { required: true })}
-              defaultValue="example-contract"
+              defaultValue="counters"
             />
           </div>
           <div>
             <label htmlFor="functionName">Function Name</label>
             <input
               id="functionName"
               {...register('functionName', { required: true })}
-              defaultValue="vote"
+              defaultValue="count"
             />
           </div>
           <div>
@@ -269,6 +288,7 @@ const LegacyContractDeployForm = () => {
     showContractDeploy({
       contractName,
       codeBody,
+      network: 'mainnet',
       appDetails,
       onFinish: d => {
         setResponse(d);
@@ -284,7 +304,7 @@ const LegacyContractDeployForm = () => {
     <FormProvider {...methods}>
       <section>
         <h3>showContractDeploy</h3>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={void onSubmit}>
           <div>
             <label htmlFor="contractName">Contract Name</label>
             <input
@@ -333,6 +353,7 @@ const LegacySignTransactionForm = () => {
   const onSubmit = handleSubmit(({ txHex }) => {
     showSignTransaction({
       txHex,
+      network: 'mainnet',
       appDetails,
       onFinish: d => {
         setResponse(d);
@@ -348,7 +369,7 @@ const LegacySignTransactionForm = () => {
     <FormProvider {...methods}>
       <section>
         <h3>showSignTransaction</h3>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={void onSubmit}>
           <div>
             <label htmlFor="txHex">Transaction (hex)</label>
             <textarea
@@ -381,15 +402,17 @@ const LegacySignStructuredMessageForm = () => {
   const onSubmit = handleSubmit(({ message, domain }) => {
     try {
       // Create a structured message using Clarity values
-      const clarityMessage = Cl.stringUtf8(message);
+      const clarityMessage = Cl.parse(message);
       const clarityDomain = Cl.tuple({
-        name: Cl.stringUtf8(domain),
-        version: Cl.stringUtf8('1.0.0'),
+        domain: Cl.stringAscii(domain),
+        version: Cl.stringAscii('1.0.0'),
+        'chain-id': Cl.uint(1),
       });
 
       showSignStructuredMessage({
         message: clarityMessage,
         domain: clarityDomain,
+        network: 'mainnet',
         appDetails,
         onFinish: d => {
           setResponse(d);
@@ -400,6 +423,7 @@ const LegacySignStructuredMessageForm = () => {
         },
       });
     } catch (e) {
+      console.error(e);
       setResponse({ error: 'Failed to create Clarity values' });
     }
   });
@@ -408,7 +432,7 @@ const LegacySignStructuredMessageForm = () => {
     <FormProvider {...methods}>
       <section>
         <h3>showSignStructuredMessage</h3>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={void onSubmit}>
           <div>
             <label htmlFor="domain">Domain</label>
             <input
@@ -422,7 +446,8 @@ const LegacySignStructuredMessageForm = () => {
             <input
               id="structuredMessage"
               {...register('message', { required: true })}
-              defaultValue="Hello, Structured World!"
+              defaultValue='{ structured: "message", num: u3 }'
+              style={{ fontFamily: 'monospace' }}
             />
           </div>
           <button type="submit">Sign Structured Message</button>

diff --git a/packages/connect/src/stories/connect.css b/packages/connect/src/stories/connect.css
@@ -115,6 +115,8 @@ div[data-response] {
   margin-top: 1rem;
   padding-top: 1rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 pre {
@@ -123,6 +125,11 @@ pre {
   border-radius: 4px;
   font-size: 0.875rem;
   margin-bottom: 0;
+  max-height: 200px; /* Approximately 10 lines of text */
+  overflow-y: auto;
+  overflow-x: auto;
+  white-space: pre;
+  word-wrap: normal;
 }
 
 code {