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@^2 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi viem @tanstack/react-query
bash
yarn add @use-glyph/sdk-react@^2 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi viem @tanstack/react-query
bash
pnpm add @use-glyph/sdk-react@^2 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi viem @tanstack/react-query
bash
bun add @use-glyph/sdk-react@^2 @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @dynamic-labs-connectors/glyph-global-wallet-evm wagmi viem @tanstack/react-query

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,
  useGlyphConfigureDynamicChains,
  StrategyType,
  WalletClientType,
} from "@use-glyph/sdk-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { http, Transport } from "viem";
import { createConfig, WagmiProvider } from "wagmi";
import { useMemo } from "react";

const queryClient = new QueryClient();

function AppWithProviders({ children }: { children: React.ReactNode }) {
  const { chains } = useGlyphConfigureDynamicChains();

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

  if (!wagmiConfig) return <div>Loading chains...</div>;

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

export default function App() {
  return (
    <AppWithProviders>
      {/* Your app */}
    </AppWithProviders>
  );
}

INFO

In v2.x, chains are fetched dynamically from the Glyph backend using useGlyphConfigureDynamicChains. The wagmi config is created once the chains are available. You still need to enable these chains in your Dynamic dashboard.

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, useChainId } from "wagmi";
import { parseEther } from "viem";

export default function Example() {
	const chainId = useChainId();
	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,
					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>;
};