Quirks

By using cookies, supporting RSCs becomes possible, and there are various utilities available to ease their integration with the App router.

Notice

This functionality requires a version of @quirks/store >= 0.25.0

All the following utilities requires you to pass a raw cookie string to them, so then they'll be able to parse it and return you to correct state result.

For example using nextjs you can retrieve by doing this:

import { cookies } from 'next/headers';
 
const getQuirksState = async () => {
  const results = await cookies();
  const quirks = results.get('quirks');
 
  return quirks?.value;
}

getConnect

Returns information about the current wallet and about the status of the connection.

import { getConnect } from "@quirks/ssr";
 
 
const {
  status,
  setupStatus,
  connected,
  connecting,
  disconnected,
  connectionError,
  rejected,
  walletName,
} = getConnect(quirksRawCookie);

getChain

If you use the name of a previously configured chain as parameter, it will return information about that chain. If the wallet is connected, it will also return the address for that wallet/chain pair.

Note

The list of supported chains depends on the wallet you are using; not all wallets allow you to add custom chains. Therefore, it may not be possible to get information for some chains.

import { getChain } from "@quirks/ssr";
 
 
/**
 * The name of the chain for which you want to obtain information
 * corresponds to the one you have used in the Config object.
 */
const chainName = "osmosis";
 
const { address, accountName } = getChain(quirksRawCookie, chainName);

getChains

Returns information about all connected chains. If the wallet is connected, it will also return the address for that wallet/chain pairs.

import { getChains } from "@quirks/ssr";
 
 
const { accounts, accountName, getAddresses, getAddress } = getChains(quirksRawCookie);

Example using NextJS

/app/server-component-example.tsx

import { getConnect, getChain } from "@quirks/ssr";
import { cookies } from 'next/headers';
 
export const ServerComponentExample = async () => {
  const results = await cookies();
  const quirks = results.get("quirks")?.value;
 
  if (!quirks) {
    return null
  }
 
  const { connected } = getConnect(quirks);
  const { address } = getChain(quirks, "osmosis");
 
  if (!connected) {
    return <div>Disconnected</div>;
  }
 
  return (
    <div>
      Server Component
      <div>Chain Name: Osmosis</div>
      <div>Address: {address}</div>
    </div>
  );
};

Next.js - React Server Component

getConnect

getChain

getChains

Example using NextJS

On this page

Next.js - React Server Component

Retrieve quirks cookie state

getConnect

getChain

getChains

Example using NextJS

On this page