#
PBAB 101
A high level process-map for PBAB onboarding.
- After the terms of engagement are finalized, you’ll sign the PBAB service and setup agreement.
- Provide the following information to Art Blocks for your PBAB project:
- The admin address that you would like to have own these contracts. This address controls the the core contract and the minter.
- The name of tokens from your contract (e.g. for Art Blocks it is "Art Blocks" https://etherscan.io/address/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270#code).
- The ticker for tokens from your contract (e.g. for Art Blocks it is "BLOCKS" https://etherscan.io/address/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270#code).
- Art Blocks' will deploy a set of Ropsten smart contracts for your team to begin integrating with.
- After Ropsten deployment, there are two steps that may proceed in parallel.
- Your team can integrate their frontend to allow for minting via your new PBAB smart contract (using deployed Ropsten smart contracts).
- Art Blocks will need to integrate your newly deployed Ropsten smart contracts with the Art Blocks rendering infrastructure on Ropsten, after which your team will be able to connect to the https://artist-staging.artblocks.io site and interact with projects on the Ropsten network that you created on your PBAB smart contract, as if those projects were on Art Blocks itself (e.g. upload source code, set features, set project metadata, etc.).
- An ETA for this infrastructure integration piece will be given at the time of Ropsten contract deployment. On average, this will take 1 week from the time of Ropsten deployment.
- To create a new project shell, you should use the
addProjectmethod of your newly deployed PBAB Core Contract. This can be done by connecting to the contract via Etherscan.
- After Ropsten deployment, there are two steps that may proceed in parallel.
- Your team will integrate a custom web frontend with your deployed PBAB smart contracts (e.g. implementing their own purchase + display flow) and with the Art Blocks API as needed. An example of frontend purchase flow logic is provided here as a reference for integrating partners:
Example frontend purchase flow logic in JavaScript
js /** CONNECTION **/ // A Web3Provider wraps a standard Web3 provider, which is // what Metamask injects as window.ethereum into each page const provider = new ethers.providers.Web3Provider(window.ethereum) // Connect to Dapp. This should happen in response to a user interaction await provider.send("eth_requestAccounts", []); // A signer is required to make any write transactions const signer = provider.getSigner(); const userAddress = await signer.getAddress()/** PRE PURCHASE **/
// Check that the project is unpaused, active, and
// has not yet reached its maxInvocations. Also get
// price per token.
const genArt = new ethers.Contract('<CORE CONTRACT ADDRESS>', GEN_ART_ABI, provider)
const { paused } = await genArt.projectScriptInfo('<PROJECT ID>')
const { invocations, maxInvocations, pricePerTokenInWei, active, currencyAddress } = await genArt.projectTokenInfo('<PROJECT ID>')
if (Number(invocations) >= Number(maxInvocations) || paused || !active) {
// Disable purchase
return
}
/** PRE PURCHASE (ERC-20) **/
const NULL_ADDRESS = '0x0000000000000000000000000000000000000000'
const projectUsesErc20 = currencyAddress && currencyAddress !== NULL_ADDRESS
if (projectUsesErc20) {
// Set up ERC-20 contract
const erc20 = new ethers.Contract('<ERC-20 CONTRACT ADDRESS>', ERC20_ABI, signer)
// Check that the user has the required amount of ERC-20
const balance = await erc20.balanceOf(userAddress)
if (balance.lt(pricePerTokenInWei)) {
// Show insufficent funds error
return
}
// Check allowance for minterAddress allowed by user
const allowance = await erc20.allowance(
userAddress,
'<MINTER CONTRACT ADDRESS>'
)
// If the user has not yet allowed enough of their ERC-20 to be used
// by the minter, have them approve enough.
if (allowance.lt(pricePerTokenInWei)) {
// Trigger user wallet dialogue. This should be done in response to user interaction.
const approveTransaction = await erc20.approve('<MINTER CONTRACT ADDRESS>', pricePerTokenInWei)
// Wait for approve transaction confirmation
await approveTransaction.wait(1)
}
}
/** PURCHASE **/
// Set up minter contract connected to users wallet
const minter = new ethers.Contract('<MINTER CONTRACT ADDRESS>', MINTER_ABI, signer);
// Initiate purchase transaction (user must confirm through metamask).
// If paying in ether, we must include a payable value otherwise payable value will be 0.
const transaction = await minter.purchase('<PROJECT ID>', { value: projectUsesErc20 ? '0' : pricePerTokenInWei})
// Wait for the transaction to be confirmed. The number passed to the wait function specifies the
// number of block confirmations to wait for. You may want to wait longer than a single
// block to prevent showing the wrong output in case of a chain reorg. The Art Blocks site
// waits for 3 block confirmations.
const receipt = await transaction.wait(3)
// Iterate through events to find mint event
const mintEvent = (receipt.events || []).find(
(receiptEvent) => {
const event = genArt.interface.getEvent(
receiptEvent.topics[0]
)
return event && event.name === 'Mint'
}
)
// Decode the mint event
const mintEventDecoded = genArt.interface.decodeEventLog(
'Mint',
mintEvent.data,
mintEvent.topics
)
// Token ID as BigNumber object
const tokenIdBigNum = mintEventDecoded['_tokenId']
// Token ID as string
const tokenId = tokenIdBigNum.toString()
// Use the token id to display the newly minted token with the iframe'd generator