This repository houses the UI and associated components for integrating identity tokens into dApps. It also maintains a deployment for our on-chain Twitter linking flow https://twitter.cardinal.so with more flows coming soon.
Use this repo to link identity tokens to your wallet, or drop the UI components into your app to implement global identity and enhance its UX.
For questions or technical help, join our Discord.
Package | Description | Version | Docs |
---|---|---|---|
@cardinal/namespaces-components |
TypeScript SDK for namespaces-components |
The main UI can be accessed at https://twitter.cardinal.so. Use this UI as a simple interface to link and unlink twitter profiles. Each profile is represented as an NFT generated by https://github.com/cardinal-labs/cardinal-generators.
For infomration on how to use the UI components, please see the Getting Started section.
Start by taking a look at the UI components documentation here https://cardinal-labs.github.io/cardinal-identity-ui/
This documentation offers a high level overview of how to incorporate cardinal-identity-ui into your dApp.
The UI has the following components
- Fully featured account connector that includes wallet and setting identity
- Modal for linking new identities and managing existing ones
- Drop in components for replacing wallet addresses with names, images, and small profiles
- Hooks to directly look up the mapping from wallet to name (and vice versa) and to use this data in your app. All hooks come with loading state for smooth build-ins
yarn add @cardinal/namespaces \
@cardinal/namespaces-components \
@solana/web3.js \
react
import '@cardinal/namespaces-components/dist/esm/styles.css'
import { WalletProvider } from '@solana/wallet-adapter-react'
import { getWalletAdapters } from '@solana/wallet-adapter-wallets'
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
import {
IDENTITIES,
WalletIdentityProvider,
} from '@cardinal/namespaces-components'
require('@solana/wallet-adapter-react-ui/styles.css')
const App = () => (
<WalletProvider autoConnect wallets={getWalletAdapters()}>
{/* Specify desired identities to use in priority order */}
<WalletIdentityProvider identities={[IDENTITIES['twitter']]}>
<WalletModalProvider>
{/* Your app's components go here, nested within the context providers. */}
</WalletModalProvider>
</WalletIdentityProvider>
</WalletProvider>
)
export default App
import React from 'react'
import { useConnection, useWallet } from '@solana/wallet-adapter-react'
import {
AddressImage,
DisplayAddress,
ProfileSmall,
} from '@cardinal/namespaces-components'
import type { Wallet } from '@project-serum/anchor/dist/cjs/provider'
export const User: FC = () => {
const { connection } = useConnection()
const wallet = useWallet()
return (
<div>
{/* Account linking and wallet connector */}
<AccountConnect
dark={true}
connection={connection}
handleDisconnect={() => wallet.disconnect()}
wallet={wallet as Wallet}
/>
{/* Replace address with image */}
<AddressImage address={wallet.publicKey} connection={connection} />
{/* Replace address with name */}
<DisplayAddress address={wallet.publicKey} connection={connection} />
{/* Profile from address */}
<ProfileSmall address={wallet.publicKey} connection={connection} />
{/* Button to connect twitter profile */}
<ConnectButton connection={connection} wallet={wallet} />
</div>
)
}
import React from 'react'
import { useConnection, useWallet } from '@solana/wallet-adapter-react'
import {
AddressImage,
DisplayAddress,
ProfileSmall,
} from '@cardinal/namespaces-components'
import type { Wallet } from '@project-serum/anchor/dist/cjs/provider'
export const User: FC = () => {
const { connection } = useConnection()
const wallet = useWallet()
const {
data: displayName,
isFetching: loadingName,
refetch,
} = useAddressName(connection, wallet.publicKey)
const { data: addressImage, isFetching: loadingImage } = useAddressImage(
connection,
wallet.publicKey
)
return (
<div>
<div>{displayName}</div>
<img
style={{
height: '150px',
width: '150px',
borderRadius: '50%',
border: '4px solid white',
}}
alt={`profile-${addressStr}`}
src={addressImage}
/>
</div>
)
}
To get started, clone the repo and run:
yarn install
Next, run the development server:
yarn run dev
Open http://localhost:3000 with your browser to see the staking interface running locally.
To access different clusters in the scaffold, set the cluster
query parameter in the URL:
- Mainnet - http://localhost:3000?cluster=mainnet
- Devnet - http://localhost:3000?cluster=devnet
- Testnet - http://localhost:3000?cluster=testnet
The default cluster set is mainnet. It's recommended to ensure you have ?cluster=devnet
while testing out functionality.
Join our Discord to get technical support as you build on Cardinal.