Lootbox with AI Minting

pnpm create vite

# or 
yarn create vite

# or 
npm create vite

npm install @0xsequence/kit @0xsequence/kit-wallet @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query @0xsequence/design-system
# or
pnpm install @0xsequence/kit @0xsequence/kit-wallet @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query @0xsequence/design-system
# or
yarn add @0xsequence/kit @0xsequence/kit-wallet @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query @0xsequence/design-system

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
 
import { KitProvider } from '@0xsequence/kit'
import { getDefaultConnectors } from '@0xsequence/kit-connectors'
import { KitWalletProvider } from '@0xsequence/kit-wallet'
 
import { createConfig, WagmiConfig} from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { arbitrumSepolia} from 'wagmi/chains'
 
const PROJECT_ACCESS_KEY = import.meta.env.VITE_PROJECT_ACCESS_KEY!
const WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID!
 
const queryClient = new QueryClient()
 
function Dapp() {
	const chains = [arbitrumSepolia] as any
  
	const projectAccessKey = PROJECT_ACCESS_KEY
 
	const connectors = getDefaultConnectors({
		walletConnectProjectId: WALLET_CONNECT_ID,
		defaultChainId: 421614,
		//@ts-ignore
		appName: 'Dungeon Crawler Lootbox Demo app',
		projectAccessKey
	  })
	
	  const transports: any = {}
	
	  const config = createConfig({
		// @ts-ignore
		transports,
		connectors,
		chains
	  })
  	const kitConfig: any = {
		projectAccessKey: PROJECT_ACCESS_KEY,
		position: 'center',
		defaultTheme: 'dark',
		displayedAssets: [
			{
				contractAddress: '0xaf8a08bf8b2945c2779ae507dade15985ea11fbc', // or include your contract address here
				chainId: 421614
			}
		],
		signIn: {
			projectName: 'Demo Dungeon Crawler Lootbox',
			showEmailInput: true,
			socialAuthOptions: ['google', 'apple'],
			walletAuthOptions: ['wallet-connect']
		}
	}
 
  return (
	<WagmiConfig config={config}>
		<QueryClientProvider client={queryClient}> 
			<KitProvider config={kitConfig}>
				<KitWalletProvider>
					<App />
				</KitWalletProvider>
			</KitProvider>
	  	</QueryClientProvider>
    </WagmiConfig>
  );
}
 
ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<Dapp />
	</React.StrictMode>,
)

import {useEffect} from 'react'
 
import { useOpenConnectModal } from '@0xsequence/kit'
import { useDisconnect, useAccount } from 'wagmi'
import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 
function App() {
 
    const { setOpenConnectModal } = useOpenConnectModal()
    const { setOpenWalletModal } = useOpenWalletModal()
    const { isConnected, address } = useAccount() // address can be used to mint
    const { disconnect } = useDisconnect()
 
	useEffect(() => {
 
  }, [isConnected])
 
  return (
    <>
      {
      isConnected ? 
        <>
          <button onClick={() => setOpenWalletModal(true)}>open wallet</button>
          <button onClick={() => disconnect()}>disconnect</button>
        </> 
      : 
        <>
          <button onClick={() => setOpenConnectModal(true)}>connect</button>
        </>
      }
    </>
  )
}
 
export default App

VITE_PROJECT_ACCESS_KEY=
VITE_WALLET_CONNECT_ID=
VITE_TRUSTED_IFRAME_ORIGIN=https://localhost:8002

pnpm run dev

function onMouseClick(event){
	...
	// if clicked event intersects a lootbox
	window.parent.postMessage({portal: 'loot'}, 'http://localhost:5173/demo-lootbox/');
}

const iframeToAppChannel = (event: any) => {
	const trustedOrigin = import.meta.env.VITE_TRUSTED_IFRAME_ORIGIN // You would change this to your production deployment
	
	if (event.origin !== trustedOrigin) {
		// Security check: Ensure that the message is from a trusted source. 
		return;
	}
 
	if(event.data.portal == 'loot' && isConnected){
		// generate loot for the user
		generate() 
	}
}
 
window.addEventListener('message', iframeToAppChannel);

let lootbox = ProcessInferencePool(
				Inference(
					Time(
						Strings(
							Upload(
								{
									env: env
								}
							)
						)
					)
				)
			)

...
	getInferenceWithItem: async (prompt: any) => {
		return new Promise( async (res) => {
			fetch(`https://api.cloud.scenario.com/v1/models/${base.env.SCENARIO_MODEL_ID}/inferences`, {
				method: 'POST',
				headers: {
					'Authorization': `Basic ${base.env.SCENARIO_API_KEY}`,
					'accept': 'application/json',
					'content-type': 'application/json'
				},
				body: JSON.stringify({
							"parameters": {
							"numSamples": 1,
							"qualityBoostScale": 4,
							"qualityBoost": false,
							"type": "txt2img",
							"disableMerging": false,
							"hideResults": false,
							"referenceAdain": false,
							"intermediateImages": false,
							"scheduler": 'EulerDiscreteScheduler',
							"referenceAttn": false,
							"prompt": prompt + ' single object on black background no people' // update this to your choosing
						}
					})
			})
			.then(response => response.json())
			.then((data: any) => {
				res({inferenceId: data.inference.id})
			})
			.catch(error => console.error('Error:', error));
		})
	}
...

	...
	if(mint){
		...
	} else {
		const loot = await lootbox.generate()
		const inferenceId = await lootbox.getInferenceWithItem(loot.loot.name + " " + loot.loot.type)
		...
	}
	...

const pollInferenceStatus = async (res: any) => {
	let status = '';
	let inferenceData: any = null;
 
	// checking if the status is succeeded or failed
	while (!['succeeded', 'failed'].includes(status)) {
		// Fetch the inference details
		try {
			const inferenceResponse = await fetch(`https://api.cloud.scenario.com/v1/models/Fm1gtd_gRwmopwj2gyWtUA/inferences/${inferenceId}`, {
				method: 'GET',
				headers
			});
			if (inferenceResponse.ok) {
				console.log(inferenceResponse.statusText)
				inferenceData = await inferenceResponse.json();
				
			}
		}catch(err){
			console.log(err)
		}
		status = inferenceData.inference.status;
		console.log(`Inference status: ${status}`);
 
		// Wait for a certain interval before polling again
		await new Promise(resolve => setTimeout(resolve, 5000)); // Polling every 5 seconds
	}
	// Handle the final status
	if (status === 'succeeded') {
		console.log('Inference succeeded!');
		console.log(inferenceData); // Print inference data
		res(inferenceData)
	} else {
		console.log('Inference failed!');
		console.log(inferenceData); // Print inference data
		throw new Error("Scenario API Failed")
	}
};

	...
	if(mint){
		...
	} else {
		const loot = await lootbox.generate()
		const inferenceId = await lootbox.getInferenceWithItem(loot.loot.name + " " + loot.loot.type)
		const resObject = await lootbox.getInferenceStatus(inferenceId)
		console.log(resObject.inference.images[0].url) // prints url
		...
	}
	...

	...
	const response = await someStoreFunction(...)
	return new Response(JSON.stringify({... image: response.url, tokenID: response.tokenID}), { status: 200 });

async function handleRequest(request: any, env: Env, ctx: ExecutionContext) {
	const originUrl = new URL(request.url);
	const referer = request.headers.get('Referer');
 
	if(referer.toString() == env.CLIENT_URL){
		...
	} else {
		return new Response('Bad Origin', { status: 500 }); // Handle errors
	}
}

async function handleRequest(request: any, env: Env, ctx: ExecutionContext) {
	... 
	const payload = await request.json()
	const { address, tokenID }: any = payload
 
	// check for admin
	if(address.toLowerCase() != env.ADMIN.toLowerCase()){
		// check for daily mint allowance
		if(!await hasDailyMintAllowance(env, address)){
			return new Response(JSON.stringify({limitExceeded: true}), { status: 400 })
		}
	}
	...
}

import { SequenceIndexer } from '@0xsequence/indexer'
 
const isLessThan24Hours = (isoDate: string) => {
    const dateProvided: any = new Date(isoDate);
    const currentDate: any = new Date();
    const twentyFourHours = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
 
    // Calculate the difference in milliseconds
    const difference = currentDate - dateProvided;
 
    // Check if the difference is less than 24 hours
    return difference < twentyFourHours && difference > 0;
}
 
const fullPaginationDay = async (env: Env, address: string) => {
    const txs: any = []
	const indexer = new SequenceIndexer(`https://{env.CHAIN_HANDLE}-indexer.sequence.app`, env.PROJECT_ACCESS_KEY)
 
    const filter = {
        accountAddress: address,
    };
 
    // query Sequence Indexer for all token transaction history
	let txHistory: any
	let firstLoop = true;
    let finished = true;
    // if there are more transactions to log, proceed to paginate
    while(firstLoop || (!finished && txHistory.page.more)){  
		if(firstLoop){
			firstLoop = false
			txHistory = await indexer.getTransactionHistory({
				filter: filter,
				page: { pageSize: 50 }
			})
 
			for(let i = 0; i < txHistory.transactions.length; i++){
				if(!isLessThan24Hours(txHistory.transactions[i].timestamp)){
					finished = true
				}
				txs.push(txHistory.transactions[i])
			}
		}
        txHistory = await indexer.getTransactionHistory({
            filter: filter,
            page: { 
                pageSize: 50, 
                // use the after cursor from the previous indexer call
                after: txHistory!.page!.after! 
            }
        })
		for(let i = 0; i < txHistory.transactions.length; i++){
			if(!isLessThan24Hours(txHistory.transactions[i].timestamp)){
				finished = true
			}
			txs.push(txHistory.transactions[i])
		}
    }
 
    return txs
}

const mintCount = (env: Env, txs: any) => {
	let count = 0
	for(let i = 0; i < txs.length; i++){
		if(
			txs[i].transfers[0].from == '0x0000000000000000000000000000000000000000' 
			&& txs[i].transfers[0].contractAddress == env.CONTRACT_ADDRESS.toLowerCase()
		) count++
	}
	return count
}

const hasDailyMintAllowance = async (env: Env, address: string) => {
	const txs = await fullPaginationDay(env, address)
	const count = mintCount(env, txs)
	return count < env.DAILY_MINT_RESTRICTION
}