@azuro-org/sdk-social-aa-connector

Social Connector for SDK

This package adds a Particle Auth Kit with special setup to work with @azuro-org/sdk.

Installation

npm install @azuro-org/sdk @azuro-org/sdk-social-aa-connector

it is assumed that you have already set up a project with base azuro sdk.

• Replace wagmiConfig creation by createConfig from @privy-io/wagmi:

import { http, createConfig, cookieStorage, createStorage } from 'wagmi'
import { injected, walletConnect } from 'wagmi/connectors'
import type {PrivyClientConfig} from '@privy-io/react-auth'
import { createConfig } from '@privy-io/wagmi'

const wagmiConfig = createConfig({
  chains: appChains,
  transports: {
    [polygonAmoy.id]: http(constants.rpcByChains[polygonAmoy.id]),
  },
  connectors: [
    injectedConnector,
    walletConnectConnector,
  ],
  ssr: true,
  syncConnectedChain: true,
  multiInjectedProviderDiscovery: true,
  storage: createStorage({
    storage: cookieStorage,
  }),
})

• Register at https://dashboard.privy.io/account:

  • Create a project, go to "Embedded wallets" page, "Smart Wallets" tab, enable it, choose "Safe" (we support only this), configure paymasters for your app chains (https://dashboard.pimlico.io/apikeys).
  • Go to "Settings" and copy App ID.

• Replace WagmiProvider from wagmi by PrivyProvider from @azuro-org/sdk-social-aa-connector:

import type {PrivyClientConfig} from '@privy-io/react-auth'
import { PrivyProvider } from '@azuro-org/sdk-social-aa-connector'
import { wagmiConfig } from './config'

const Providers = ({ children, initialState }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <PrivyProvider
        appId="your-App-ID-from-privy-dashboard"
        // (optional) you can customize privyConfig, see PrivyClientConfig interface
        // privyConfig={privyConfig}
        wagmiConfig={wagmiConfig}
        initialWagmiState={initialState}
      >
        {children}
      </PrivyProvider>
    </QueryClientProvider>
  )
}

• Replace connect handlers from wagmi to privy:

import { usePrivy } from '@privy-io/react-auth'
import { useAccount } from '@azuro-org/sdk-social-aa-connector'

const ConnectButton = () => {
  const { address } = useAccount()
  const { connectOrCreateWallet, ready } = usePrivy()
  
  if (!address) {
    return (
      <button type="button" onClick={() => connectOrCreateWallet()}>Connect Wallet</button>
    )
  }

  return <>Your connected state view</>
}

• Replace all useAccount hook imports from wagmi to @azuro-org/sdk-social-aa-connector:

It returns the same data, but extends with isAAWallet flag and, in case of login via email/social networks, replaces address with smart account address for current user.

import { useAccount } from '@azuro-org/sdk-social-aa-connector'

const Component = () => {
  /*
   * If user logged in via email/social netkwork:
   *   isAAWallet = true
   *   address = Safe AA address controlled by user
   * Else, default web3 connection:
   *   isAAWallet = false
   *   address = connected wallet address
   * */
  const { address, isAAWallet } = useAccount()
}

• Azuro SDK will handle logic required for Azuro. You need to implement logic for on-ramp/off-ramp/withdrawal. To act with user's smart account, use privy walletClient. Read Privy "Using smart wallets" docs

import { useSmartWallets } from '@privy-io/react-auth/smart-wallets'

const Funding = () => {
   const { client } = useSmartWallets()
   
   /*
           
   await client.switchChain({ id: appChainId })

   const signature = await client.signMessage({
      account: client.account,
      message: 'Hello world',
   })

   const signature = await client.signTypedData({
      account: client.account,
      // https://viem.sh/docs/actions/wallet/signTypedData#signtypeddata
      ...insertYourTypedDataParams,
   })

    const txHash = await client.sendTransaction({
      account: client.account,
      chain: appChain,
      to: 'insert-recipient-address',
      value: 0.1,
    });
           
    */
}