JSSDK: EvmAccountMapping pallet support

[Leechael]

This PR propose to added experimental support to the evm_account_mapping. We added getClient and getContract to simplify the initialization process.

getClient and getContract

In this PR, we added getClient and getContract as an experimental feature to simplify the overall APIs. The old approach is still effective, but we will not promote the new API until the overall API design is stable.

getClient is intended to avoid directly calling ApiPromise and OnChainRegistry. Instead of:

import { WsProvider, ApiPromise } from 'polkadot/api'
import { OnChainRegistry } from '@phala/sdk'

const provider = new WsProvider(endpoint)
const api = await ApiPromise.create(options({ provider, noInitWarn: true }))
const phatRegistry = await OnChainRegistry.create(api)

Now it can be just oneline:

import { getClient } from '@phala/sdk'

const client = await getClient({ transport: 'wss://poc6.phala.network/ws' })

The client is the instance of OnChainRegistry. If you need access the ApiPromise instance:

const api: ApiPromise = client.api

getContract is the factory function for the PinkContractPromise object:

import { getClient, getContract } from '@phala/sdk'

const client = await getClient({ transport: 'wss://poc6.phala.network/ws' })
const contract = await getContract({ client, contractId: '0x.....' })

evm_account_mapping pallet support

Currently, almost all polkadot-js scripts have a helper function called signAndSend, and it is rare seem to directly write apiPromise.tx.foo.bar().signAndSend. This is probably because most people need to check the result of submitting the transaction and determine if it is in block before further processing. Therefore, in the SDK, we have provided an implementation of signAndSend that considers type hiting and handles common status callbacks. This utility function also supports compatibility with browser extension injected signer and polkadot-js signer.

You can find the implementation here: https://github.com/Phala-Network/phala-blockchain/blob/master/frontend/packages/sdk/src/utils/signAndSend.ts

So instead of this:

await apiPromise.tx.foo.bar().signAndSend(pair)

It is more common to write in this way:

await signAndSend(apiPromise.tx.foo.bar(...trxArgs), pair)

When designing the API for evm_account_mapping pallet interaction, there may be significant changes required to polkadot-js ApiPromise. These changes would involve encoding the payload, signing with EIP-712, and submitting extrinct without signing. However, it is important to note that these modifications could potentially introduce bugs and incompatibilities. We created the unstable_EvmAccountMappingProvider to handle cases where the widely applied signAndSend utility function is used.

So here is the code example of how it works:

import { createWalletClient, mainnet, custom } from 'viem'
import { getClient, unstable_EvmAccountMappingProvider } from '@phala/sdk'

const phatRegistry = await getClient({ transport: 'wss://poc6.phala.network/ws' })

const client = createWalletClient({ chain: mainnet, transport: custom(window.ethereum) })
const [address] = await client.requestAddresses()
const provider = await unstable_EvmAccountMappingProvider.create(apiPromise, client, { address })

const account = await phatRegistry.api.query.system.account(provider.address)
await provider.send(phatRegistry.api.tx.foo.bar(...trxArgs))

It is simpler for PinkContractPromise because it is created from scratch, and we simply added the new provider as an option to the send method.

const contract = await getContract({ client: phatRegistry, abi, contractId })
const result = await contract.send.newBadge({ unstable_provider: provider }, message)

const cert = await provider.signCertificate()
const { output: total } = await contract.query.getTotalBadges(cert.address, { cert })

We considered the design unstable, so we prefixed it with unstable_ here. The issue should arise when there are more and more complaints for the business model change, like Account Abstraction, so in the future, we will redesign the SDK and reduce more boilerplate codes.

---

• Derived SS58 format address.
• Submit extrinsics with minimal design.
• PinkContractPromise integration.
• PinkCodePromise integration.
• PinkBlueprintPromise integration.

[pacoyang]

LGTM

[h4x3rotab]

Conceptual ACK

[kvinwang]

LGTM