Glyph

Appearance

Dynamic ​

Learn how to integrate Glyph with Dynamic.

The glyph-sdk-react package includes an option to include Glyph Wallet as a connection option in the Dynamic DynamicWidget.

GitHub Examples

Use our example repo to quickly get started with Glyph and Dynamic.

Demo

View a demo of Glyph integrated with Dynamic.

Installation ​

Install the required dependencies:

bash
npm install @use-glyph/sdk-react@^1 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi@^2.15.2 viem@^2.29.2 @tanstack/react-query@^5.76.0
bash
yarn add @use-glyph/sdk-react@^1 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi@^2.15.2 viem@^2.29.2 @tanstack/react-query@^5.76.0
bash
pnpm add @use-glyph/sdk-react@^1 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi@^2.15.2 viem@^2.29.2 @tanstack/react-query@^5.76.0
bash
bun add @use-glyph/sdk-react@^1 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi@^2.15.2 viem@^2.29.2 @tanstack/react-query@^5.76.0

Usage ​

1. Configure the Providers ​

Wrap your application in the following providers:

tsx
import { GlyphEvmWalletConnectors } from "@dynamic-labs-connectors/glyph-global-wallet-evm";
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import {
  GlyphProvider,
  StrategyType,
  WalletClientType,
} from "@use-glyph/sdk-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Chain, http, Transport } from "viem";
import { apeChain } from "viem/chains";
import { createConfig, WagmiProvider } from "wagmi";

const queryClient = new QueryClient();

// You also need to enable all these exact chains in your dynamic dashboard for it to work
const supportedChains: [Chain, ...Chain[]] = [apeChain];

const wagmiConfig = createConfig({
  chains: supportedChains,
  transports: supportedChains.reduce((acc, chain) => {
    acc[chain.id] = http();
    return acc;
  }, {} as Record<number, Transport>),
  multiInjectedProviderDiscovery: false,
});

function App() {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: "your-dynamic-environment-id",
        walletConnectors: [GlyphEvmWalletConnectors()],
      }}
    >
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>
            <GlyphProvider
              strategy={StrategyType.EIP1193}
              walletClientType={WalletClientType.DYNAMIC}
            >
              {/* Your app */}
            </GlyphProvider>
          </DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  );
}

export default App;

2. Render the DynamicConnectButton or DynamicWidget ​

Render the DynamicConnectButton from @dynamic-labs/sdk-react-core anywhere in your app.

tsx
import { DynamicConnectButton } from "@dynamic-labs/sdk-react-core";

export default function Home() {
  return <DynamicConnectButton />;
}

Alternatively, you can use the DynamicWidget component from @dynamic-labs/sdk-react-core to render the Glyph Wallet connection widget.

tsx
import { DynamicWidget } from "@dynamic-labs/sdk-react-core";

export default function Home() {
  return <DynamicWidget />;
}

3. Generate an authentication token for the user (optional) ​

To start using the useGlyph hook or the Glyph Widget, you need to generate an authentication token for the user.

INFO

You can skip this step if you are directly using the wagmi hooks or/and are not planning to use the useGlyph hook or the GlyphWidget component.

WARNING

Widget will automatically start the Glyph Widget’s authentication flow after connecting. However, some browsers may block popups from opening automatically. In these cases, users will need to manually click a button to sign a message. For the best user experience, consider displaying a dialog or modal prompting users to click the button to continue. You can trigger this flow by calling the login function from the useGlyph hook.

tsx
import { useGlyph } from "@use-glyph/sdk-react";

const { login } = useGlyph();

const LoginButton = () => {
  return <button onClick={login}>Sign a message</button>;
};

Alternatively, you can use the LoginButton component to sign a message and generate an authentication token for the user.

tsx
import { LoginButton } from "@use-glyph/sdk-react";

const LoginButton = () => {
  return <LoginButton />;
};

4. Use hooks and functions ​

Once the user has signed in, you can begin to use any of the glyph-sdk-react hooks, such as useGlyph as well as all of the existing wagmi hooks; such as useAccount, useBalance, etc.

tsx
import { useAccount, useSendTransaction } from "wagmi";
import { parseEther } from "viem";
import { apeChain } from "viem/chains";

export default function Example() {
  const { address, status } = useAccount();
  const { sendTransaction, isPending } = useSendTransaction();

  const amount = parseEther("1");
  const recipientAddress = "0x...some-recipient-address"; // recipient address

  return (
    <button
      onClick={() => {
        sendTransaction({
          chainId: apeChain.id,
          to: recipientAddress,
          value: amount,
        });
      }}
      disabled={isPending || status !== "connected"}
    >
      {isPending ? "Sending..." : "Send Transaction"}
    </button>
  );
}

5. Logout users ​

Use the following methods to logout users:

  • the handleLogOut function from useDynamicContext
tsx
import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

const { handleLogOut } = useDynamicContext();

const LogoutButton = () => {
  return <button onClick={handleLogOut}>Logout</button>;
};