Sample React App
Here is an example of a React app with one component called TradingComponent. The component is wrapped inside Civic's GatewayProvider so it can access the Civic Pass state through the useGateway hook.
There are two buttons:
  • The IdentityButton is provided by Civic. The user clicks this button to start the verification process. The button also shows the current state of the Civic Pass.
  • The Trade button represents the dApp functionality that should be protected by Civic Pass. The {gatewayToken && <button... expression hides the button until a valid gatewayToken is found. This gatewayToken must also be passed to smart contracts as outlined in the On-Chain Integration section.
The quickest way to get started if you are not integrating into an existing dApp right away is by using create-react-app.
Please follow their instructions and then continue to add the gateway-react-component as a dependency.
Install the Civic and Solana dependencies:
1
yarn add @civic/solana-gateway-react
2
yarn add @solana/web3.js
Copied!
1
import { Keypair, PublicKey, Transaction } from '@solana/web3.js';
2
import { GatewayProvider, useGateway, IdentityButton } from '@civic/solana-gateway-react';
3
4
5
// Contact your Civic representative for the correct Gatekeeper Network to use.
6
const gatekeeperNetwork = new PublicKey('gatbGF9DvLAw3kWyn1EmH5Nh1Sqp8sTukF7yaQpSc71');
7
8
// In a real app the wallet would be provided by the user.
9
const userKeypair: Keypair = Keypair.generate();
10
11
// This Wallet interface is widely used, for e.g. by https://github.com/project-serum/sol-wallet-adapter
12
type Wallet = { publicKey: PublicKey, signTransaction: (tx: Transaction) => Promise<Transaction> }
13
const dummyWallet: Wallet = {
14
publicKey: userKeypair.publicKey,
15
signTransaction: async (tx: Transaction): Promise<Transaction> => {
16
// In a real app, the user will be asked to sign the transaction.
17
tx.sign(userKeypair);
18
return tx;
19
}
20
};
21
22
function TradingComponent() {
23
// gatewayToken will be defined once the user has a valid Civic Pass.
24
// The token must also be passed to smart contracts that integrate with Civic Pass.
25
const { gatewayToken } = useGateway();
26
27
return <div>
28
{/* The user will click this IdentityButton to request a Civic Pass */}
29
<IdentityButton />
30
<div>
31
{/* This button represents the functionality that should be secured behind a Civic Pass */}
32
{gatewayToken && <button>Trade</button>}
33
</div>
34
<div>
35
{!gatewayToken && <span>You need a Civic Pass to use this dApp</span>}
36
</div>
37
</div>
38
}
39
40
function App() {
41
return <GatewayProvider
42
wallet={dummyWallet}
43
gatekeeperNetwork={gatekeeperNetwork}
44
>
45
<TradingComponent/>
46
</GatewayProvider>
47
}
48
49
export default App;
50
Copied!
Last modified 1mo ago
Copy link