> For the complete documentation index, see [llms.txt](https://singularityzk.gitbook.io/singularity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://singularityzk.gitbook.io/singularity/for-developers/custom-sdk-integration/front-end.md).

# 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:

```typescript
// 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:

<pre class="language-solidity"><code class="lang-solidity">// useDeposit.ts    

const depositService = new DepositService()
const { context, outNotes } = await depositService.prepare({
    symbol: asset.symbol,
    name: asset.name,
    decimals: asset.decimals,
<strong>    address: asset.address,
</strong>}, amount, address, signature)
</code></pre>

### 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`.

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

```typescript
// 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:

```typescript
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:

```typescript
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](https://github.com/portalgateme/singularity-sdk/blob/dev/test/test-app/src/hooks/useDeposit.ts).