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 7d ago
Copy link