Civic Next JS

civicpass.jsx

import {
  GatewayProvider,
  GatewayStatus,
  useGateway,
} from '@civic/solana-gateway-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { useWallet } from '@solana/wallet-adapter-react';
import * as web3 from '@solana/web3.js';

const VerifyCivicAccount = () => {
  const { requestGatewayToken, gatewayStatus, gatewayToken, civicPassSrcUrl } =
    useGateway();
  const connection = new web3.Connection(
    web3.clusterApiUrl(WalletAdapterNetwork.Devnet)
  );
  const wallet = useWallet();
  const gatekeeperNetworkKey = new web3.PublicKey(
    process.env.NEXT_PUBLIC_GATEKEEPER_NETWORK_KEY as string
  );
  
return (
        <>
        <Text color="#C5C5C5" fontSize={{ base: 'xs', md: 'sm' }}>
            Gateway Status - {GatewayStatus[gatewayStatus]}
        </Text>
        <Text color="#C5C5C5" fontSize={{ base: 'xs', md: 'sm' }}>
            Pass - {gatekeeperNetworkKey.toBase58()}
        </Text>
        <GatewayProvider
                  // connection={connection} v0.11.1
                  clusterUrl={'https://api.testnet.solana.com'} // v0.10.0
                  wallet={wallet}
                  cluster={WalletAdapterNetwork.Devnet}
                  gatekeeperNetwork={gatekeeperNetworkKey}
          >
              <button type="submit" onClick={requestGatewayToken}>
                 Request Pass
              </button>
         </GatewayProvider>
         </>
 )}

_app.js is wrapped in <WalletConnectionProvider>