Merge pull request #793 from hirosystems/major/stacks.js-update

feat: update stacks.js to next

Author: ryanwaits

.env-example

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_ALGOLIA_APP_ID=
 NEXT_PUBLIC_ALGOLIA_API_KEY=
 NEXT_PUBLIC_ALGOLIA_INDEX=
-NEXT_PUBLIC_GTM_ID=
+NEXT_PUBLIC_GTM_ID=

app/global.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @layer base {
   :root {
     --background: 40 14.3% 95.9%;
@@ -74,7 +73,6 @@
   .dark .bitcoin {
     --primary: 0 0% 100%;
     --icon: 0 0% 100%;
-    
   }
 }
 
@@ -126,22 +124,42 @@ a[aria-label="Hiro Platform"] {
   padding: 0;
 }
 
-
 a[aria-label="Hiro Platform"] div:hover {
   background-color: hsla(var(--muted-foreground) / 0.1);
 }
 
-h1, h2, h3, h4, h5, h6, code, button, .step {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+code,
+button,
+.step {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
-a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, option {
+a,
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a,
+option {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
 /* TODO: div.prose is for targeting the <Callout> title, need to fix this approach */
 /* TODO: div.prose .flex-1 span is for targeting the text inside the <Property> component */
-a, p, li, table, input, div.prose .w-0, div.prose .flex-1 span {
+a,
+p,
+li,
+table,
+input,
+div.prose .w-0,
+div.prose .flex-1 span {
   font-family: var(--font-inter), sans-serif;
 }
 
@@ -179,7 +197,14 @@ p {
   line-height: 1.75;
 }
 
-body > div.guides > div > article > div.prose > figure:nth-child(37) > div > div {
+body
+  > div.guides
+  > div
+  > article
+  > div.prose
+  > figure:nth-child(37)
+  > div
+  > div {
   background: hsl(var(--code));
 }
 
@@ -244,21 +269,32 @@ nav a[href="/guides"] {
   text-decoration: underline;
 }
 
-[data-radix-scroll-area-viewport] .flex.flex-col.gap-8.pb-10.pt-4.max-md\:px-4.md\:pr-3.md\:pt-10 {
-    gap: 0;
+[data-radix-scroll-area-viewport]
+  .flex.flex-col.gap-8.pb-10.pt-4.max-md\:px-4.md\:pr-3.md\:pt-10 {
+  gap: 0;
 }
 
 /* Target the header toggle */
 
-body > div > header > nav > div.rounded-md.border.bg-background.p-1.text-sm.text-muted-foreground.max-md\:absolute.max-md\:left-\[50\%\].max-md\:translate-x-\[-50\%\] > a.rounded-md.px-2.py-1.transition-colors.hover\:text-accent-foreground.bg-background.text-accent-foreground {
+body
+  > div
+  > header
+  > nav
+  > div.rounded-md.border.bg-background.p-1.text-sm.text-muted-foreground.max-md\:absolute.max-md\:left-\[50\%\].max-md\:translate-x-\[-50\%\]
+  > a.rounded-md.px-2.py-1.transition-colors.hover\:text-accent-foreground.bg-background.text-accent-foreground {
   background-color: hsl(var(--inverted));
   color: hsl(var(--background));
 }
 
 /* Target the search component */
 
-body > div > header > nav > div.flex.flex-1.flex-row.items-center.justify-end.md\:gap-2 > button.inline-flex.w-full.max-w-\[240px\].items-center.gap-2.rounded-full.border.bg-secondary\/50.p-1\.5.text-sm.text-muted-foreground.transition-colors.hover\:bg-accent.hover\:text-accent-foreground.max-md\:hidden {
-  background-color: hsl(var(--background))
+body
+  > div
+  > header
+  > nav
+  > div.flex.flex-1.flex-row.items-center.justify-end.md\:gap-2
+  > button.inline-flex.w-full.max-w-\[240px\].items-center.gap-2.rounded-full.border.bg-secondary\/50.p-1\.5.text-sm.text-muted-foreground.transition-colors.hover\:bg-accent.hover\:text-accent-foreground.max-md\:hidden {
+  background-color: hsl(var(--background));
 }
 
 p.first\:mt-0 {
@@ -280,7 +316,9 @@ p.first\:mt-0:before {
   margin: 0;
 }
 
-div.not-prose, div.prose-no-margin, div[role="tablist"] {
+div.not-prose,
+div.prose-no-margin,
+div[role="tablist"] {
   background: hsl(var(--background));
 }
 
@@ -295,7 +333,8 @@ form.not-prose.flex.flex-col.gap-4.rounded-lg.border.bg-card.p-4 {
 }
 
 /* overrides the background of APIInfo and adjusts sticky header on scroll */
-div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 {
+div.prose-no-margin
+  .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 {
   background: hsl(var(--background));
   top: 4.5rem;
 }
@@ -310,21 +349,24 @@ div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.roun
 }
 
 /* Style for the POST span */
-.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 > span:first-child {
+.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10
+  > span:first-child {
   position: absolute;
   top: 0.75rem;
   left: 0.75rem;
 }
 
 /* Style for the button */
-.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 > button {
+.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10
+  > button {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
 }
 
 /* Target the inner div containing the endpoint spans */
-.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 > div {
+.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10
+  > div {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -340,7 +382,10 @@ div.prose div.footer.not-prose {
   font-family: var(--font-aeonikFono), sans-serif !important;
 }
 
-.steps > div:nth-child(2) > figure:nth-child(3) > div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 {
+.steps
+  > div:nth-child(2)
+  > figure:nth-child(3)
+  > div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 {
   background: hsl(var(--background)) !important;
 }
 
@@ -355,7 +400,7 @@ div.api-example div.max-xl\:hidden > div:nth-child(1) {
   background-color: hsl(var(--inverted));
 }
 
-.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   text-decoration-color: var(--secondary) !important;
 }
 
@@ -373,8 +418,8 @@ div.api-example div.max-xl\:hidden > div:nth-child(1) {
 }
 
 .size-10 {
-  width: 2.5rem/* 20px */;
-  height: 2.5rem/* 20px */;
+  width: 2.5rem /* 20px */;
+  height: 2.5rem /* 20px */;
 }
 
 /* Add a deprecated strike through to sidebar links */
@@ -394,4 +439,4 @@ a[href="/stacks/api/fees/fee-rate"] {
 
 div.divide-y.divide-border.overflow-hidden.rounded-lg.border.bg-card {
   background: hsl(var(--background));
-}
+}

components/card.tsx

@@ -21,6 +21,7 @@ export type CardProps = {
   icon?: ReactNode;
   title: string;
   description: string;
+  innerClassName?: string;
 } & Omit<LinkProps, "title">;
 
 export function Card({
@@ -38,7 +39,12 @@ export function Card({
         props.className
       )}
     >
-      <div className="group relative z-10 bg-card p-4 rounded-md hover:bg-accent">
+      <div
+        className={cn(
+          "group relative z-10 bg-card p-4 rounded-[7px] hover:bg-accent",
+          props.innerClassName
+        )}
+      >
         {icon ? (
           <div className="mb-2 w-fit rounded-md border group-hover:bg-border p-2 text-muted-foreground [&_svg]:size-4">
             {icon}

content/docs/stacks/stacks.js/concepts/accounts-and-addresses.mdx

@@ -1,5 +1,5 @@
 ---
-title: Accounts and addresses
+title: Accounts & Addresses
 description: Learn how to get an address from an account.
 ---
 
@@ -11,46 +11,52 @@ Mainnet: `SP3FGQ8Z7JY9BWYZ5WM53E0M9NK7WHJF0691NZ159`
 
 Testnet: `ST2F4BK4GZH6YFBNHYDDGN4T1RKBA7DA1BJZPJEJJ`
 
-## Get an address
-
-<Tabs items={['Using Connect', 'Using a mnemonic']}>
-  <Tab value="Using Connect">
-    ```ts
-    // [!code word:user.profile.stxAddress.mainnet]
-    import { showConnect } from '@stacks/connect';
-
-    showConnect({
-      appDetails,
-      userSession,
-      onFinish: () => {
-        const user = userSession.loadUserData();
-        const address = user.profile.stxAddress.mainnet;
-        
-        console.log(address); // SP1MXSZF4NFC8JQ1TTYGEC2WADMC7Y3GHVZYRX6RF
-      },
-    });
-    ```
-  </Tab>
-  <Tab value="Using a mnemonic">
-  ```ts
-  // [!code word:getStxAddress]
-  import { TransactionVersion } from "@stacks/transactions";
-  import { generateSecretKey, generateWallet, getStxAddress } from "@stacks/wallet-sdk";
-
-  const mnemonic = generateSecretKey();
-
-  const wallet = await generateWallet({
-    secretKey: mnemonic,
-    password: 'optional-password',
-  });
-
-  const account = wallet.accounts[0];
-  const mainnetAddress = getStxAddress({
-    account,
-    transactionVersion: TransactionVersion.Mainnet
-  });
-  
-  console.log(mainnetAddress); // SP1MXSZF4NFC8JQ1TTYGEC2WADMC7Y3GHVZYRX6RF
-  ```
-  </Tab>
-</Tabs>
+## Getting an address
+
+### Using Stacks Connect
+
+```ts
+// [!code word:user.profile.stxAddress.mainnet]
+import { showConnect } from '@stacks/connect';
+
+showConnect({
+  appDetails,
+  userSession,
+  onFinish: () => {
+    const user = userSession.loadUserData();
+    const address = user.profile.stxAddress.mainnet;
+    // 'SP1MXSZF4NFC8JQ1TTYGEC2WADMC7Y3GHVZYRX6RF'
+  },
+});
+```
+
+### Using a seed phrase / mnemonic / private key
+
+```ts
+// [!code word:privateKeyToAddress]
+import { randomSeedPhrase, generateWallet, privateKeyToAddress } from "@stacks/wallet-sdk";
+
+const seed = randomSeedPhrase();
+
+const wallet = await generateWallet({
+  secretKey: seed,
+  password: 'secret',
+});
+
+const address = privateKeyToAddress(wallet.accounts[0].stxPrivateKey, 'mainnet');
+// 'SP1MXSZF4NFC8JQ1TTYGEC2WADMC7Y3GHVZYRX6RF'
+```
+
+### Using a public key
+
+```ts
+// [!code word:publicKeyToAddress]
+import { publicKeyToAddress } from '@stacks/transactions';
+
+const address = publicKeyToAddress(publicKey, 'mainnet');
+// 'SP1MXSZF4NFC8JQ1TTYGEC2WADMC7Y3GHVZYRX6RF'
+```
+
+{/* todo: add accounts code sections, once we have better abstractions */}
+
+{/* todo: multisig */}