A Javascript library to interact with your Kairos collection on the client. It works by creating an iframe, which acts as a middleman between the client and Kairos.
The iframe can:
- Open modals to facilitate NFT purchases
- Direct users to Kairos verification pages
- Provide authentication by checking if the user holds an NFT of a collection
- Provide authenticated user information
- Log users out
NOTE: This library does not create or update NFTs. For that, you must use the Kairos API, which should only be used server-side.
Add this library to your dependencies:
yarn add kairosnfts/dappOr if you're not using modules, you can link directly to a minified script:
<script src="https://kairos.art/assets/dapp.js"></script>If you're using React, you can use the React helpers to initialize the library with the KairosProvider. It's common to add third-party providers to the root of your application, but feel free to only wrap the necessary components in your application.
import { KairosEnv, KairosProvider } from '@kairosnfts/dapp'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<KairosProvider
env={KairosEnv.staging} // Required: 'development', 'staging', or 'production'
slug={process.env.YOUR_KAIROS_COLLECTION_SLUG} // Required: Storefront slug from the Kairos dashboard
hasLogs={true} // Optional verbose logging on the client-side
onLogIn={() => {
// Optional callback when user logs in
}}
onLogOut={() => {
// Optional callback when user logs out
}}
>
{children}
</KairosProvider>
</body>
</html>
)
}If you're using another framework, or plain Javascript, you can initialize this way:
<script>
document.addEventListener('DOMContentLoaded', async () => {
await window.Kairos.init({
env: 'staging',
slug: 'YOUR_KAIROS_COLLECTION_SLUG',
hasLogs: true,
})
})
</script>After initialization, the iframe will automatically be created, and will include event listeners that get passed along to the parent window. You will have the following properties and methods available on the window.Kairos object:
| Method | Arguments | Notes |
|---|---|---|
|
|
{
env: KairosEnv
slug: string
hasLogs: boolean
onLogIn: () => void
onLogOut: () => void
} |
Initialize the iframe and add event listeners. |
|
|
None | Destroys the iframe end every listener. |
|
|
None | Closes the purchase modal (if open). |
|
|
|
Shows the bid modal for the specified |
|
|
None | Redirects the user to the verification page for the collection. |
|
|
None | Logs the user out. |
|
|
None | Returns the value of the current session cookie. |
|
|
None |
Returns client-safe user details for the current user. {
id: String
email: String
wallet: String
} |
| Method | Arguments | Notes |
|---|---|---|
refetchLogin |
None | Manually refresh the login status from Kairos, which will trigger changes to isLoginLoading and isLoggedIn |
| Property | Type | Default | Notes |
|---|---|---|---|
isLoggedIn |
Boolean |
false |
The most recent status of the user state. |
| Property | Type | Default | Notes |
|---|---|---|---|
isKairosScriptLoaded |
Boolean |
false |
The Kairos script will attempt to automatically connect when the KairosProvider mounts. |
isLoggedIn |
Boolean |
false |
The most recent status of the user state. |
isLoginLoading |
Boolean |
true |
Since the script automatically connects, it's loading by default. |
currentUser |
{ id: String, email: String, wallet: String } |
undefined |
The logged-in user properties available to client applications. |
Now, within a client-side component (one that has access to React context), you can use the Kairos context in addition to the Kairos object.
import { useContext } from 'react'
import { Kairos, KairosContext } from '@kairosnfts/dapp'
export default function ChildComponent() {
const { currentUser } = useContext(KairosContext)
const handleLogin = async () => {
await Kairos.logIn()
}
const handleLogOut = async () => {
await Kairos.logOut()
}
return (
<div>
{currentUser ?
<button onClick={handleLogOut}>Log Out</button>
: <button onClick={handleLogin}>Log In</button>
}
{currentUser && `Logged in as ${currentUser.email}`}
</div>
)
}If you want to initiate a purchase modal, you could do so after you've created an NFT and received the nftId by:
await Kairos.startBid(nftId)
Kairos.close() // Close the Kairos modal or it will stay openRemember, that in order to get an nftId, you need to use the Kairos API on the server and pass it to the client to initiate the startBid() method.
TBD
If you have any questions, or need help while implementing the library within your own project, please don't hesitate to reach out to us at Kairos. We're here to help make your NFT integration as smooth as possible.