AccessTime Widget

A React package that provides a plug-and-play subscription button and card, making it easy to integrate AccessTime subscriptions into your app.

Installation

npm install @accesstimeio/accesstime-widget wagmi @tanstack/react-query

Features

Provides subscription UI components.
No need to manually write contract calls.
Fully customizable via props and styles.

This package simplifies subscription integration for React applications.

Setup

Since this package relies on Wagmi, you must wrap your app in a WagmiConfig provider:

providers.tsx

import React, { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Config, WagmiProvider } from "wagmi";
import { AccessTimeProvider } from "@accesstimeio/accesstime-widget";
 
import { wagmiConfig } from "./wagmi-config";
 
function Providers({ children }) {
  const [config] = useState<Config>(wagmiConfig);
  const [client] = useState<QueryClient>(new QueryClient());
 
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <AccessTimeProvider
          colorMode={"light"}
          wagmiConfig={config}
        >
          {children}
        </AccessTimeProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Components

SubscriptionCard

import React from "react";
import { SubscriptionCard } from "@accesstimeio/accesstime-widget";
import { useModal } from "connectkit";
import { useSwitchChain } from "wagmi";
 
function Page() {
  const { openProfile } = useModal();
  const { switchChain } = useSwitchChain();
 
  return (
    <SubscriptionCard
      accessTime={"0xAccessTimeAddress"}
      chainId={8453}
      packageId={"0"} // if package module activated, u have to pass id of package
      config={{
        box: {
          type: "backgroundImage",
          backgroundImage: "https://background-image-url",
          icon: undefined,
        },
        button: {
          showTimeInformation: true,
          text: undefined,
        }
      }}
      classNames={{}}
      styles={{}}
      onConnectWallet={() => openProfile()}
      onSwitchNetwork={() => switchChain({ chainId: 8453 })} // switchChain.chainId should be same as chainId
      onSubscription={(transactionHash) => console.log("SubscriptionCard.onSubscription", transactionHash)}
    />
  )
}

SubscriptionButton

import React from "react";
import { SubscriptionButton } from "@accesstimeio/accesstime-widget";
import { useModal } from "connectkit";
import { useSwitchChain } from "wagmi";
 
function Page() {
  const { openProfile } = useModal();
  const { switchChain } = useSwitchChain();
 
  return (
    <SubscriptionButton
      accessTime={"0xAccessTimeAddress"}
      chainId={8453}
      packageId={"0"} // if package module activated, u have to pass id of package
      config={{
        showTimeInformation: true,
        text: undefined,
      }}
      onConnectWallet={() => openProfile()}
      onSwitchNetwork={() => switchChain({ chainId: 8453 })} // switchChain.chainId should be same as chainId
      onSubscription={(transactionHash) => console.log("SubscriptionButton.onSubscription", transactionHash)}
      onTimeAmount={(timeAmount) => console.log("SubscriptionButton.onTimeAmount", timeAmount)}
    />
  )
}

Hooks

useAccessTime

import React from "react";
import { useAccessTime } from "@accesstimeio/accesstime-widget";
 
function Page() {
  const {
    loading,
    loadingDetails,
    error,
    errorDetails,
    walletConnection,
    walletConnectionDetails,
    contractDetails,
    contractAPIDetails,
    subscribe,
    subscribePackage
  } = useAccessTime(
    8453, // blockchain network id
    "0xAccessTimeAddress",
  );
}