Frontends

This is a basic guide that goes through some of the more common things you may need to do when integrating PRBProxy in a front-end application. While the code examples below use Viem, the logic should be easy to adapt to other development frameworks such as Ethers.

ABIs

You can download the ABIs from here:

• PRBProxyRegistry
• PRBProxy

Or you can install the @prb/proxy npm package and import the artifacts like so:

import PRBProxy from "@prb/proxy/artifacts/PRBProxy.json";
import PRBProxyRegistry from "@prb/proxy/artifacts/PRBProxyRegistry.json";

// PRBProxy.abi
// PRBProxyRegistry.abi

Deploy Proxies

If you want to let your users deploy a proxy via your UI, you do this via the PRBProxyRegistry contract. There are multiple deployment functions you can choose from; see the full list here.

Here's an example for deploy:

// See the Viem docs:
// - https://viem.sh/docs/clients/wallet.html
// - https://viem.sh/docs/contract/writeContract.html
await walletClient.writeContract({
  address: "0x584009e9ede26e212182c9745f5c000191296a78",
  abi: REGISTRY_ABI,
  functionName: "deploy",
  account, // your signer account
});

Compute Address

For this, you need to install the @prb/proxy.

import PRBProxy from "@prb/proxy/artifacts/PRBProxy.json";
import { getContractAddress, pad } from "viem";

const proxyAddress = getContractAddress({ 
  bytecode: PRBProxy.bytecode.object,
  from: "0x584009e9ede26e212182c9745f5c000191296a78", // the same on all chains
  opcode: "CREATE2",
  salt: pad(USER_ADDRESS, { dir: "right" }), // insert your user address here
});

Subgraph

You can obtain rich data about deployed instances of PRBProxy by querying the subgraph with GraphQL syntax.

The subgraph monitors the registry, deployment of proxies, and critical events like Execute, InstallPlugin, and UninstallPlugin.

Here are two examples of queries:

const getProxies = gql(/* GraphQL */ `
{
  proxies {
    id
    address
    plugins {
      id
    }
  }
}
`);

const getProxy_ByOwner = gql(/* GraphQL */ `
{
  proxies(where:{ owner: "0x0000000000000000000000000000000000000000"}){
    id
    address
  }
}
`);