Front-End

Steps for front-end integration

Now that we've implemented the smart contract portion of the integration, it's onto tying it with the frontend Dapp that will generate the proofs necessary for passing in to the contract.

1. Install SDK in Dapp

yarn add @thesingularitynetwork/singularity-sdk

yarn add @thesingularitynetwork/darkpool-v1-proof

(Depends on ether.js v6)

2. Initialize the Darkpool

First, initialize darkpool with signer, chainId, relayer config and contract configuration:

// useDeposit.ts

darkPool.init(signer, chainId, [
    {
        relayerName: '',
        relayerAddress: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
        hostUrl: 'https://34.142.142.240:18000',
    }
], {
    priceOracle: config.networkConfig.priceOracle,
    ethAddress: config.networkConfig.ethAddress,
    nativeWrapper: config.networkConfig.nativeWrapper,
    complianceManager: config.networkConfig.complianceManager,
    merkleTreeOperator: config.networkConfig.merkleTreeOperator,
    darkpoolAssetManager: config.networkConfig.darkpoolAssetManager,
    stakingAssetManager: config.networkConfig.stakingAssetManager,
    stakingOperator: config.networkConfig.stakingOperator,
    drakpoolSubgraphUrl: ''
})

3. User makes deposit of assets into Darkpool

Because our MockDex takes in one note, we get the user to make their deposit which returns us our note we'll use as input:

// useDeposit.ts    

const depositService = new DepositService()
const { context, outNotes } = await depositService.prepare({
    symbol: asset.symbol,
    name: asset.name,
    decimals: asset.decimals,
    address: asset.address,
}, amount, address, signature)

4. User generates defiParameters and generates Proof

Next, using our user's deposit(s), we'll generate our defiParameters from the input parameters to the DeFi contract's method: [amountIn, minAmount]. Here, we're setting amountOut to be ethNote.amount * 8n / 10n.

// MockDexinterface
interface IMockDex {    
    // ...
    function swap(uint256 amountIn, uint256 minAmount, address caller) 
        external payable returns (uint256);
    // ...
}

// useDeposit.ts

const defiParameters = solidityPacked(
    ['uint256', 'uint256'],
    [ethNote.amount, ethNote.amount * 8n / 10n]
)

Once we've generated our defiParameters variable, we pass all these details into the SDK library's infraService object that processes and generates the ZK proof:

const infraService = new DefiInfraService()
const { context: infraContext, outPartialNotes } = 
    await infraService.prepare(request, signature)

updatePendingToast(undefined, "Generating Infra Proof")
await infraService.generateProof(infraContext)

updatePendingToast(undefined, "Calling defi infra")
const notes = await infraService.executeAndWaitForResult(infraContext)

5. User withdraws assets from Darkpool

And, finally using the WithdrawService the user is capable of retrieving their funds back out from the Darkpool:

const withdrawService = new WithdrawService()
const { context: withdrawContext } = await withdrawService.prepare(notes[0] as Note, address, signature)

updatePendingToast(undefined, "Generating Withdraw Proof")
await withdrawService.generateProof(withdrawContext)

updatePendingToast(undefined, "Withdrawing")
await withdrawService.executeAndWaitForResult(withdrawContext)

The full code for our example MockDex Dapp integration can be found on GitHub here.