Signing

As described earlier, one of the features of Quirks is its ability to let you access its state globally, regardless of the framework you are using.

In addition, to improve the development experience, we have been working on some features that deal with signing a transaction. For this reason we provide you with a number of utilities within @quirks/store.

Note

The functions presented below, are not reactive, it is recommended to use the specific packages of each framework for reactive behaviors, such as @quirks/react or @quirks/vue

getAddress

Returns the current account address by chainName

import {  } from "@quirks/store";
 
const  = "osmosis";
const  = ();

getChain

Returns chain info by chainName

import {  } from "@quirks/store";
 
const  = "osmosis";
const  = ();

getOfflineSigner

Returns a valid signer class by chainId and signerType (auto, amino or direct).

import {  } from "@quirks/store";
 
const  = "osmosis-1";
const  = (, "auto
amino
directauto");

getSigningStargateClient

Returns an instance of CosmJS Signing Stargate Client

import {  } from "@quirks/store";
 
const  = "osmosis";
const  = (, "auto
amino
directauto");

getSigningCosmWasmClient

Returns an instance of CosmJS Signing CosmWasm Stargate Client

import {  } from "@quirks/store";
 
const  = "osmosis";
const  = (, "auto
amino
directauto");

sign

Signs a transaction using CosmJS Stargate Client on a given chainName.

Allows specifying messages, fees, signer type, memo, explicitSignerData and timeoutHeight.

import {  } from "@quirks/store";
 
const  = "osmosis";
const  = (
  ,
  [],
  "auto",
  "auto",
  "memo",
  {
    : 0,
    : 0,
    : "",
  },
  (0),
);

signCW

Signs a CosmWasm transaction using CosmJS Stargate Client on a given chainName.

Allows specifying messages, fees, signer type, memo, explicitSignerData and timeoutHeight.

import {  } from "@quirks/store";
 
const  = "osmosis";
const  = (
  ,
  [],
  "auto",
  "auto",
  "memo",
  {
    : 0,
    : 0,
    : "",
  },
  (0),
);

signArbitrary

Signs an arbitrary message using the wallet on a given chainId. Allows specifying the signer and message data. (Useful for use cases such as auth token generation).

import { ,  } from "@quirks/store";
 
const  = "osmosis";
const  = "osmosis-1";
const  = await ();
const  = (, , "string to sign");

broadcast

Broadcasts a TxRaw transaction on a given chainName. Optional parameters allow specifying timeout and poll interval.

import { ,  } from "@quirks/store";
 
const  = "osmosis";
const  = await (, [], "auto", "auto", );
const  = await (, , 60_000, 3_000);

broadcastSync

Broadcasts a TxRaw transaction synchronously on a given chainName.
It returns the hash of the transaction (no waiting through polling). It's useful for use cases where you want to trace the tx using some other method, such as websocket or state machines.

import { ,  } from "@quirks/store";
 
const  = "osmosis";
const  = await (, [], "auto", "auto", );
const  = await (, );

Sign a `send` message

In this example we want to sign a send message. We'll use the osmojs library to compose the message, but you can use whatever library is most convenient for you.

Install osmojs

npm install osmojs

Connect a wallet using the methods described in the "Getting Started" section, based on your framework (react or vue).

Create a send function. For example purposes only, we will make a "self-send" to the same connected address on the Osmosis chain.

send.ts

 
import { , ,  } from "@quirks/store";
 
export const  = async () => {
  const  = (await import("osmojs")).cosmos;
  const {  } = ....;
 
  const  = ("osmosis");
 
  const  = ({
    : [
      {
        : "uosmo",
        : "1",
      },
    ],
    : ,
    : ,
  });
 
  const  = await ("osmosis", []);
 
  const  = await ("osmosis", );
 
  return ;
 
};

As you may have noticed, osmojs is imported using dynamic imports, to optimise the bundle size.

Call the function from anywhere you want to use it. For example, in React, you could do something like this.

send-button.ts

import {  } from "./send";
 
export const  = () => {
    return < ={}>Send</>;
};

To track the state of transactions and your dapp in general, we recommend using tanstack query. New code examples will be provided in the future.

Signing

On this page