Since the upgrade to "micro-stacks": "0.0.36", the authentication pattern previously used in bird-count fails with the error Uncaught (in promise) Error: [useAuthenticate] No authOptions provided. when the user attempts to connect wallet.

There was a naming convention change in micro-stacks from appProviderAtomBuilder to buildMicroStacksAtoms. However, simply making that change isn't enough to get authentication working.

On discord you mentioned the error may mean that it's being used outside of a micro-stacks provider pattern and that it has to be a child of the provider. I thought that the buildMicroStacksAtoms would be how that provider wrapped everything, but perhaps I'm misunderstanding how the new pattern is supposed to work.

What works in earlier versions of micro-stacks for static generation:

// enable SSG
export const getStaticProps = getStaticQueryProps(getQueries)(async _ctx => {
  return { props: {}, revalidate: 60 };
});

...

export default withInitialQueryData(
  Index,
  buildMicroStacksAtoms({
    network: initialNetwork,
    authOptions: {
      appDetails: {
        name: 'BirdCount',
        icon: './stx-favicon.png',
      },
    },
  })
);

https://github.com/aviculturist/bird-count/blob/e81cfe39b74ad418c1e5df22e912d39b9589f430/src/pages/index.tsx#L82

getStxAddress / useWatchStxAddress and/or related state functions returns the current STX address for the active network. But let's say if i need testnet address of the user while the active network is mainnet, that's not possible.

UserData contains the profile url, however, it would be nice to have a hook that contains the actual profile fetched from the profile url.

I'm trying to build a simple auth button, similar to this
https://github.com/hirosystems/nft-nyc-exclusive-app/blob/master/components/auth.js

however getting this error below.

I log the values passed to the hook before calling it and they are there...

on further details it seems I can't pass params into the function, I have to stash them in a jotai atom.
I couldn't quite figure out how to do this, is there an example?
Or is there another component I can use to just pass the params directly?

I saw other docs to wrap everything in MicroStacksProvider, but that doesn't exist now?

// import { MicroStacksProvider } from '@micro-stacks/react'; // does not exist

import { Text, Center, VStack, Button, Link } from '@chakra-ui/react';
import { useAuth } from '@micro-stacks/react';

// import  { MicroStacksProvider } from '@micro-stacks/react';  // does not exist
interface AuthOptions {
  // onFinish?: (payload: StacksSessionState) => void;
  onFinish?: any
  onCancel?: (error?: Error) => void;
  onSignOut?: () => void;
  // scopes?: AuthScope[];
  appDetails: AppDetails;
}

interface AppDetails {
  name: string;
  icon: string;
}

export const AuthenticateButton = () => {
  const { handleSignIn, isLoading } = useAuth();

  const appDetails: AppDetails = {
    name: 'Minter',
    icon: '/assets/astro/zodiac-200.png',
  }

  const authOptions: AuthOptions = {
    appDetails,
    onFinish: (payload: any) => {
      console.log('onFinish', payload);
    }
  }

  const doSignIn = () => {
    console.log('doSignIn.authOptions', authOptions);
    // @ts-ignore
    handleSignIn(authOptions)
  }

  return (
    <Center>
      <VStack>

        <Button
          size='lg'
          p={10}
          onClick={doSignIn}
        >
          <Text>Sign in</Text>
        </Button>
      </VStack>
    </Center>
  )
}


export default AuthenticateButton;

Add Sign in with Stacks similar to https://github.com/spruceid/siwe to micro-stacks following the SIP specification stacksgov/sips#70

Stacks 2.1 adds two new transaction types:

• coinbase-pay-to-alt-recipient, see stacks-network/stacks-core#3164
• versioned-smart-contract, see stacks-network/stacks-core#3192

For reference, deserializers (and some test vectors) have been added for both of these in the Rust library (and typescript defs) here: hirosystems/stacks-encoding-native-js#5, and support for versioned smart contracts is implemented in stacks.js here: hirosystems/stacks.js#1341

you have some docs on
https://docs.micro-stacks.dev/modules/core/clarity/serialization

do you have examples of how to decode the data coming back from the APIs?
eg i sent a buffer in and returns

{
  type: '(optional (buff 64))',
  value: {
    type: '(buff 64)',
    value: '0x36333562663261376537333436376636333363313931353738613938383137313663383633306235373164613034643634303334356331646232333231636537'
  }
}

any docs on how to convert that to a useful value?

https://bloodfuse001.web.app/

I get a blank page when I deploy react app (netlify/firebase)

this is the cause tho. cos when I removed it showed other components

<MicroStacks.ClientProvider
appName="My sick app"
appIconUrl="APP_ICON.png"
network="testnet"
>


</MicroStacks.ClientProvider>

Versions:
"micro-stacks": "^1.1.1",
"@micro-stacks/svelte": "^1.0.3",

Configure the network to be 'testnet' with the hiro web wallet connected to mainnet.

    const config = {
      appName: 'Ecosystem DAO',
      appIconUrl: origin + '/img/logo.png',
      network: 'testnet'
    };
    mountClient(config)

On openContractCall, the wallet opens connected to 'testnet' but looks up the contract on mainnet leading to screen shot;

If I repeat but change the network in the web wallet I get the correct behaviour - i.e. the web wallet looks up the contract on correct network.

The contract is deployed here https://explorer.stacks.co/txid/1f5c4ce7187fa1949be5911aa5dfc2c0b7d4c9a012f75307820c075c9a3b351e?chain=testnet

When a user arrives on the page, they might try to do something that requires signing into the wallet, even if they don't have the wallet installed. Or they might have the wallet installed but not connected to the site. Or the wallet might be installed and connected, in which case they can proceed.

At the moment, one needs to check isSignedIn, if the user isn't signed in, wrap handleSignIn in a try{}catch{}, but that doesn't actually return anything, so thereafter, one needs to check the session as returned from useAuth and if it's null, prompt the user to install the wallet.

I've got a mockup implementation that I believe covers all these onboarding scenarios but it would be cleaner if it were handled directly in the API

https://github.com/aviculturist/bird-count/blob/e54272466f3444d65cf3e0798df3568dc21eb008/src/components/bird-count-buttongroup.tsx#L64

This might be me not understanding the rules.

Background: if you've got a wallet button component useAuth returns a boolean in isLoading that will correctly change button state like this:

{isLoading ? "Loading..." : isSignedIn ? "Sign out" : "Connect Stacks Wallet"}

Problem: isLoading won't provide its state to another component.

Here's an example. If one sets open to true within the LoadingBackdrop component, the backdrop will display, but when one opens the wallet (which means isLoading=true it doesn't display. If one moves the Loading inside the same component as the button, it works.

LoadingBackdrop component:
https://github.com/aviculturist/bird-count/blob/e54272466f3444d65cf3e0798df3568dc21eb008/src/components/loading-backdrop.tsx#L18

WalletConnectButton:
https://github.com/aviculturist/bird-count/blob/e54272466f3444d65cf3e0798df3568dc21eb008/src/components/wallet-connect-button.tsx#L30

Where LoadingBackdrop is placed on the page:
https://github.com/aviculturist/bird-count/blob/e54272466f3444d65cf3e0798df3568dc21eb008/src/components/bird-count-app.tsx#L115

micro-stacks.store local storage value always has Mainnet address, even if there's both network="testnet" supplied to ClientProvider and Hiro Wallet signs in to Testnet. Same for ClientProvider onPersistState dehydratedState, so it seems impossible to SSR correctly on Testnet becauseuseAccount stxAddress is always the Mainnet one (even though useNetwork isMainnet is correctly false).

Using:
"micro-stacks": "^1.1.4",
"@noble/secp256k1": "^1.7.1"

Comparing getPublicKeyFromSignature from "micro-stacks/connect" to recoverPublicKey from '@noble/secp256k1'

The latter allows the flag compressed=true to be passed whereas the former hard codes it to false.

The recoverPublicKey recovers the correct pubkey / stxAddress from a signature signed with getOpenSignMessage from '@micro-stacks/svelte whereas incorrect pubkey returned from getPublicKeyFromSignature .

I am investigating using micro-stacks for Sigle and saw that resolveZoneFileToProfile is not exported

I noticed that the response auth token is not verified when handling the response from the wallet. Is this on purpose? Stacks.js does some verification: https://github.com/hirosystems/stacks.js/blob/master/packages/auth/src/verification.ts#L211

The documentation does not say anything about it: https://micro-stacks.dev/guides/stacks-apps#authentication

Description: When logging in using testnet the useAccount hook will only return the mainnet stxAddress.

Steps to reproduce:

1. Initialize a new microstacks template project
2. Login using a test net account
3. Observe account address

Im attaching some images from the microstacks template app:

Regardless of how I set the network in my svelte application the web wallet ignores the fact that I should be connected to devnet / localhost.

Versions:

    "@micro-stacks/svelte": "^1.0.3",
    "micro-stacks": "^1.1.1",

E.g.

In following config I've tried not passing network and passing various other values; 'local', 'mocknet', 'devnet' etc also a new StacksMocknet() from micro-stacks/network

    const config = {
      appName: 'Ecosystem DAO',
      appIconUrl: origin + '/img/logo.png',
      //network: ChainUtils.network()
    };
    mountClient(config)

in all cases the following

await $contractCall.openContractCall({
    postConditions: [],
    postConditionMode: PostConditionMode.Deny,
    contractAddress: deployer,
    contractName: 'executor-dao',
    functionName: 'construct',
    functionArgs: [bootstrap],
    onFinish: data => {
      console.log('finished contract call!', data);
      txId = data.txId;
    },
    onCancel: () => {
      console.log('popup closed!');
    },
  });

opens with the web wallet connected to the Hiro testnet (as opposed to local devnet)..

Both createSTXPostCondition and createFungiblePostCondition accepts values higher than 18446744073709551615 (max value of u64) and as a result they produce invalid post-conditions.

From https://github.com/stacksgov/sips/blob/main/sips/sip-005/sip-005-blocks-and-transactions.md

A STX post condition body is encoded as follows:

...
An 8-byte value encoding the literal number of microSTX

A Fungible token post-condition body is encoded as follows:

...
An 8-byte value encoding the literal number of token units

8-byte value (u64) not 16-byte value (u128)

This started with testing a simple Clarity contract that can stack its own STX through pool delegation.

The Short Story

Would there be an issue if the hexToBytes function were to check if the string starts with 0x, and remove it before processing the string?

Happy to submit a PR! 🚀

The Long Story

There were two function parameters that needed to be (buff 1) and (buff 20) to represent the pox address in delegate-stx.

The hex values were each stored in a constant:
(incorrect code below for illustration)

const poxVer = "0x01";
const poxHash = "0x13effebe0ea4bb45e35694f5a15bb5b96e851afb";

My first instinct was to use bufferCVFromString() on these two values, but the buffers were not the correct length as they were literally processing the string and returning (buff 3) and (buff 40). This made makeContractCall() fail with the tx options.

Next step was @friedger's suggestion to use bufferCV() and hexToBytes(), and after passing the string the contract call would be created but the broadcastTransaction() step would fail due to BadFunctionArguments.

After updating the constant to remove the leading 0x everything worked as expected, but it was quite the fight to get there and identify each problem.
(correct code below)

const poxVer = "01";
const poxHash = "13effebe0ea4bb45e35694f5a15bb5b96e851afb";

Relevant TX:
https://explorer.stacks.co/txid/0xdbbecf8113b530bd12ca67c425cc1c27a0bf7916ded65e106cf0ecc8fb28c75a?chain=mainnet

I created a basic create ustx cli based off vite-create, but in talking with @hstove it would be better to have some kind of CLI that would let folks scaffold out a more complete starter where you take different features. Initially, this is what I was thinking:

• pick a framework
  • react
    • next.js
    • remix
    • SPA
  • vue
    • nuxt
    • SPA
  • svelte
    • sveltekit
    • SPA
  • solid
• pick a language
  • JS
  • TS
• include sponsored tx api?
• clarinet wrapper

Basically, we need a CLI tool that can merge multiple different types of projects together.

I'd love a guide on how to save data; both to decentralized storage such as Gaia as well as centralized storage through an ORM such as Prisma.

Now that xverse supports wallet connect on mobile, would love to see it integrated in micro-stacks to let our users connect easily.

Hey found an issue that started to pop in the last weeks but didn't see it was related to micro-stacks at first. For information the same code is working fine with stacks.js. Not sure if it could be related to an API change for stacks 2.1?
We are using micro-stacks in Sigle server-side and found this issue which makes us unable to resolve some usernames to the gaia config.

Error: TypeError: Failed to parse URL from https://.

Reproducing example

https://codesandbox.io/p/sandbox/quiet-frog-rb4gqp?file=%2Findex.js&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A13%7D%5D

const { lookupProfile: stacksLookupProfile } = require("@stacks/auth");
const { lookupProfile: microLookupProfile } = require("micro-stacks/storage");

const run = async () => {
  const data = await stacksLookupProfile({ username: "sigle.btc" });
 // Working fine
  console.log(data);

  const data2 = await microLookupProfile({ username: "sigle.btc" });
// throwing an error but should work fine
  console.log(data2);
};

run();

I think @kyranjamie could provide more details, but there have been some recent changes to @stacks/connect to support signing in using a ledger device. This relates to signing the JWT used in transactionRequest and similar calls to the web wallet, and the app doesn't have appPrivateKey in that instance.

Relevant commit in Connect: hirosystems/connect@e7aae49

I'm not super familiar with the latest on this, I just wanted to post this as a placeholder and FYI. More details in this thread: leather-wallet/extension#951 (comment)

Signing PSBTs in web wallet is now possible and support for this is coming in stacks.js.

Is support in micro-stacks for this feature also in the pipeline ?

https://github.com/fungible-systems/micro-stacks/blob/main/docs/react-quick-start.md

Great to see a helpful library like this, but with the major updates the outdated documentation can make it pretty confusing. One idea is to remove this page, and create a new quickstart guide at micro-stacks-react

The fetchZoneFile() fetcher uses the stacks address instead of the name when trying to look up the zone file. This results in an invalid api call.

  const lookup_key = { "key": cvToHex(uintCV(asset_id)) }
  
  const mapEntry = await fetchContractDataMapEntry({
    url: network.getCoreApiUrl(),
    contract_name,
    contract_address,
    map_name,
    lookup_key
  });

fails with SyntaxError: Unexpected end of JSON input at line 0, col 0

Not sure if this is my lookup_key, but it appears that the body being sent to the api is not being set as application/json.

Noticed that I had a hard time finding the tab in my too many tabs open as there is no favicon 😅