Quirks

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 { getAddress, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const address = getAddress(store, chainName);

getChain

Returns chain info by chainName

import { getChain, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const chain = getChain(store, chainName);

getOfflineSigner

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

import { getOfflineSigner, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainId = "osmosis-1";
const signer = getOfflineSigner(store, chachainIdinId, "auto");

getSigningStargateClient

Returns an instance of CosmJS Signing Stargate Client

import { getSigningStargateClient, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const signer = getSigningStargateClient(store, chainchainNameName, "auto");

getSigningCosmWasmClient

Returns an instance of CosmJS Signing CosmWasm Stargate Client

import { getSigningCosmWasmClient, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const signer = getSigningCosmWasmClient(store, chainchainNameName, "auto");

sign

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

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

import { sign, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const txRaw = sign(
  store,
  chainName,
  [],
  "auto",
  "auto",
  "memo",
  {
    accountNumber: 0,
    sequence: 0,
    chainId: "",
  },
  BigInt(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 { signCW, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const txRaw = signCW(
  store,
  chainName,
  [],
  "auto",
  "auto",
  "memo",
  {
    accountNumber: 0,
    sequence: 0,
    chainId: "",
  },
  BigInt(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 { signArbitrary, getAddress, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
 
const chainName = "osmosis";
const chainId = "osmosis-1";
const address = await getAddress(store, chainName);
const signature = signArbitrary(store, chainId, address, "string to sign");

broadcast

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

import { sign, broadcast, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
const chainName = "osmosis";
const txRaw = await sign(store, chainName, [], "auto", "auto", undefined);
const txResponse = await broadcast(store, chainName, txRaw, 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 { sign, broadcastSync, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
  wallets: [],
  chains: [],
  assetsLists: [],
});
const chainName = "osmosis";
const txRaw = await sign(store, chainName, [], "auto", "auto", undefined);
const txResponse = await broadcastSync(store, chainName, txRaw);

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 { sign, getAddress, broadcast, createConfig } from "@quirks/store";
 
/**
* Your global store instance
*/
const store = createConfig({
wallets: [],
chains: [],
assetsLists: [],
});
 
export const send = async () => {
  const cosmos = (await import("osmojs")).cosmos;
  const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl;
 
  const address = getAddress(store, "osmosis");
 
  const msg = send({
    amount: [
      {
        denom: "uosmo",
        amount: "1",
      },
    ],
    toAddress: address,
    fromAddress: address,
  });
 
  const txRaw = await sign(store, "osmosis", [msg]);
 
  const res = await broadcast(store, "osmosis", txRaw);
 
  return res;
 
};

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 { send } from "./send";
 
export const SendComponent = () => {
    return <button onClick={send}>Send</button>;
};

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