I want to run on a different network(chainId)

[Kazuma7]

What I want to know.

How to run this repository on a different chain

What I tried

const _App = () => {
  const { isLocked, unlockingTokens, evaluateGate, gateEvaluation } =
    useEvaluateGate();
  const { switchNewwork } = useSwitchNetwork();
  const { chain } = useNetwork();

  const { wallet } = useConnectWallet({
    onConnect: (wallet) => {
+      if (chain?.id === astar.id) {
+        switchNewwork?.(astar.id);
+      }
      evaluateGate(wallet);
    },
  });

[Kazuma7]

@QuintonC What do you think?

[QuintonC]

Hey @Kazuma7 👋

You should be able to set which Chain is required in the wagmi config. Here are more details about chain configuration for the connect-wallet package.

[Kazuma7]

Thanks for the reply. @QuintonC

I tried adding it, but it didn't work.

I want to implement the NFT holder discount with Astar Network, but even after changing the location in the guide, it still connects with ethereal.

Is there a good solution?

[QuintonC]

Thanks for the reply. @QuintonC

I tried adding it, but it didn't work.

I want to implement the NFT holder discount with Astar Network, but even after changing the location in the guide, it still connects with ethereal.

Is there a good solution?

It sounds like you have your MetMask network set to Ethereum / Mainnet and it is auto-connecting using that network.

@shopify/connect-wallet does not perform automatic network switching on behalf of the applications. If you want to automatically switch networks. For more information, you can reference wagmi's useSwitchNetwork hook to implement this custom functionality.

[Kazuma7]

thank you reply @QuintonC

Like this ? tokengate-src/src/App.js

const _App = () => {
  const { isLocked, unlockingTokens, evaluateGate, gateEvaluation } =
    useEvaluateGate();
  const { switchNewwork } = useSwitchNetwork();
  const { chain } = useNetwork();

  const { wallet } = useConnectWallet({
    onConnect: (wallet) => {
+      if (chain?.id === astar.id) {
+        switchNewwork?.(astar.id);
+      }
      evaluateGate(wallet);
    },
  });

[Kazuma7]

Does this repository work well with different chains, like polygon for example? (More specifically, will it work with a custom chain?)

[Kazuma7]

Looking at Step 5, it seems that there is no chainId specified in the gates settings, but is chainId fixed at 1(Ethereum)? https://shopify.dev/docs/apps/blockchain/tokengating/build-a-tokengating-app/show-gates-storefront

[QuintonC]

@Kazuma7 The chain is specified in your tokengate-src code.

You need to specify the chains you want to use in configureChains, seem here. You can read more about the configureChains syntax from wagmi's documentation.

Does this repository work well with different chains, like polygon for example? (More specifically, will it work with a custom chain?)

This repository is an example app, the functionality of the final product is up to those who clone the repository and create an application. We didn't want to make this repository very opinionated, which is why it is up to your interpretation on how you want the final product to look and feel.

Though, something important to note here is that the functionality for evaluating gates does not depend on whether or not you've connected to Polygon or not. That logic would need to be handled in your evaluation function. When you evaluate a gate, you're utilizing the connected wallet's address, without regard to the chain they're connected with. This means your logic in the backend is what needs to look up holdings for a specific chain if that's what you care about.

However, in regards to programmatically switching networks, the logic you shared in this code diff would not work as it would only switch networks when the chain id is equal to the chain for astar, which from my understanding is not what you want to do.

Instead, something like this is what you're looking for -

import {
  configureChains,
  createConfig,
-  mainnet,
+  polygon,
  WagmiConfig,
+  useNetwork,
+  useSwitchNetwork
} from "wagmi";
import { publicProvider } from "wagmi/providers/public";

import { useEvaluateGate } from "./useEvaluateGate";

const _App = () => {
+  const { chain } = useNetwork()
+  const { switchNetwork } = useSwitchNetwork()
  const { isLocked, unlockingTokens, evaluateGate, gateEvaluation } = useEvaluateGate();
  const { wallet } = useConnectWallet({
    onConnect: (wallet) => {
+      if (chain.id !== polygon.id) {
+        switchNetwork(polygon.id)
+      }

      evaluateGate(wallet);
    },
  });

[Kazuma7]

thank you reply @QuintonC Thank you for your detailed explanation.