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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://singularityzk.gitbook.io/singularity/for-developers/custom-sdk-integration/front-end.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.