use-truapi
Host

useProductContext

The canonical product id the host derives your accounts and permissions from

useProductContext returns the product context the host bound this runtime to (System.get_product_context): data.productId is the full canonical dotNS identifier including its network TLD, such as my-app.dot, my-app.paseo, or localhost:3000 under a local development host. This is the exact string the host uses for authorization and product-account derivation, so use it wherever an API needs a dotNsIdentifier or a ProductProofContext instead of hard-coding a suffix or inspecting the URL.

The runtime already uses it: when productAccount.dotNsIdentifier is not set in the config, connect() derives the product account from the host's product context and only falls back to <dappName>.dot on hosts that predate the method. data is null standalone and on those legacy hosts.

Usage

import { useProductContext, useRingVrfKeys } from "@use-truapi/react";

function ProofContext() {
  const { data: context } = useProductContext();
  const keys = useRingVrfKeys(context?.productId);

  const proofContext = context
    ? { productId: context.productId, suffix: { tag: "Index" as const, value: 0 } }
    : undefined;
  // pass proofContext to useAccountAlias / useCreateAccountProof
  return <span>{context?.productId ?? "standalone"} · {keys.data?.length ?? 0} keys</span>;
}
<script setup lang="ts">
import { useProductContext } from "@use-truapi/vue";
import { computed } from "vue";

const { data: context } = useProductContext();
const proofContext = computed(() =>
  context.value
    ? { productId: context.value.productId, suffix: { tag: "Index" as const, value: 0 } }
    : undefined,
);
</script>

<template>
  <span>{{ context?.productId ?? "standalone" }}</span>
</template>

See also

API reference

React

function useProductContext(options?): UseQueryResult<ProductContext | null, Error>;

The canonical product id the host bound this app to; null standalone or on legacy hosts.

Parameters

ParameterType
options?{ query?: QueryOptions<ProductContext | null>; }
options.query?QueryOptions<ProductContext | null>

Returns

UseQueryResult<ProductContext | null, Error>

Vue

function useProductContext(options?): QueryResult<ProductContext | null>;

The canonical product id the host bound this app to; null standalone or on legacy hosts.

Parameters

ParameterType
options?{ query?: QueryOptions<ProductContext | null>; }
options.query?QueryOptions<ProductContext | null>

Returns

QueryResult<ProductContext | null>

On this page