Merge pull request #1281 from tapexyz/irys-viem

fix: irys for viem v2

apps/web/package.json

@@ -16,7 +16,7 @@
     "@aws-sdk/lib-storage": "3.504.0",
     "@emoji-mart/react": "^1.1.1",
     "@hookform/resolvers": "^3.3.3",
-    "@irys/sdk": "^0.1.5",
+    "@irys/sdk": "^0.1.6-a2",
     "@lens-protocol/metadata": "^1.1.5",
     "@livepeer/react": "^3.1.9",
     "@tailwindcss/aspect-ratio": "^0.4.2",

apps/web/src/components/Common/matchers/HashtagMatcher.tsx

@@ -20,7 +20,7 @@ export class HashtagMatcher extends Matcher {
   }
 
   match(value: string) {
-    return this.doMatch(value, /\B#[\w&-]+/, (matches) => {
+    return this.doMatch(value, /\B#[\w&-i̇]+/, (matches) => {
       return {
         display: matches[0]
       }

apps/web/src/components/Create/IrysInfo.tsx

@@ -1,4 +1,3 @@
-import useEthersWalletClient from '@hooks/useEthersWalletClient'
 import type { WebIrys } from '@irys/sdk'
 import useAppStore from '@lib/store'
 import { useIsMounted } from '@tape.xyz/browser'
@@ -16,20 +15,13 @@ import {
 } from '@tape.xyz/ui'
 import React, { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import {
-  formatEther,
-  formatGwei,
-  formatUnits,
-  parseEther,
-  parseUnits
-} from 'viem'
-import { useAccount, useBalance, useSendTransaction } from 'wagmi'
+import { formatEther, formatGwei, formatUnits } from 'viem'
+import { useAccount, useBalance, useWalletClient } from 'wagmi'
 
 const IrysInfo = () => {
   const isMounted = useIsMounted()
   const { address } = useAccount()
-  const { data: signer } = useEthersWalletClient()
-  const { sendTransactionAsync } = useSendTransaction()
+  const { data: walletClient } = useWalletClient()
 
   const { data: userBalance } = useBalance({
     address,
@@ -73,8 +65,8 @@ const IrysInfo = () => {
   }
 
   const initIrys = async () => {
-    if (signer && address && !irysData.instance) {
-      const irys = await getIrysInstance(signer)
+    if (walletClient && address && !irysData.instance) {
+      const irys = await getIrysInstance(walletClient)
       if (irys) {
         setIrysData({ instance: irys })
         await fetchBalance(irys)
@@ -83,11 +75,11 @@ const IrysInfo = () => {
   }
 
   useEffect(() => {
-    if (signer && isMounted()) {
+    if (walletClient && isMounted()) {
       initIrys().catch((error) => logger.error('[Error Init Irys]', error))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signer, isMounted()])
+  }, [walletClient, isMounted()])
 
   useEffect(() => {
     if (irysData.instance && isMounted()) {
@@ -104,8 +96,8 @@ const IrysInfo = () => {
       return toast.error('Enter deposit amount')
     }
     const depositAmount = parseFloat(irysData.deposit)
-    const value = parseUnits(depositAmount.toString() as `${number}`, 9)
-    if (!value || Number(value) < 1) {
+    const fundValue = irysData.instance.utils.toAtomic(depositAmount)
+    if (!fundValue || Number(fundValue) < 1) {
       return toast.error('Invalid deposit amount')
     }
 
@@ -115,36 +107,13 @@ const IrysInfo = () => {
     )
     if (formattedValue && parseFloat(formattedValue) < depositAmount) {
       return toast.error(
-        `Insufficient funds in your wallet, you have ${userBalance?.formatted} MATIC.`
+        `Insufficient funds in your wallet, you have ${formattedValue} MATIC.`
       )
     }
     setIrysData({ depositing: true })
 
-    // TEMP:START: override irys functions for viem
-    irysData.instance.tokenConfig.getFee = async (): Promise<any> => {
-      return 0
-    }
-    irysData.instance.tokenConfig.sendTx = async (data): Promise<string> => {
-      const hash = await sendTransactionAsync(data)
-      return hash
-    }
-    irysData.instance.tokenConfig.createTx = async (
-      amount: `${number}`,
-      to: `0x${string}`
-    ): Promise<{ txId: string | undefined; tx: any }> => {
-      return {
-        txId: undefined,
-        tx: {
-          to,
-          account: address,
-          value: parseEther(amount.toString(), 'gwei')
-        }
-      }
-    }
-    // TEMP:END: override irys functions for viem
-
     try {
-      const fundResult = await irysData.instance.fund(value.toString())
+      const fundResult = await irysData.instance.fund(fundValue)
       if (fundResult) {
         toast.success(
           `Deposit of ${formatGwei(

apps/web/src/components/Create/index.tsx

@@ -1,5 +1,4 @@
 import MetaTags from '@components/Common/MetaTags'
-import useEthersWalletClient from '@hooks/useEthersWalletClient'
 import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
 import type {
   AudioOptions,
@@ -64,7 +63,12 @@ import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import toast from 'react-hot-toast'
 import { v4 as uuidv4 } from 'uuid'
-import { useAccount, useSignTypedData, useWriteContract } from 'wagmi'
+import {
+  useAccount,
+  useSignTypedData,
+  useWalletClient,
+  useWriteContract
+} from 'wagmi'
 
 import type { VideoFormData } from './Details'
 import Details from './Details'
@@ -81,9 +85,11 @@ const CreateSteps = () => {
 
   const { lensHubOnchainSigNonce, setLensHubOnchainSigNonce } = useNonceStore()
   const { queuedVideos, setQueuedVideos } = usePersistStore()
+
   const { address } = useAccount()
-  const { data: signer } = useEthersWalletClient()
   const router = useRouter()
+  const { data: walletClient } = useWalletClient()
+
   const handleWrongNetwork = useHandleWrongNetwork()
   const { canUseLensManager, canBroadcast } =
     checkLensManagerPermissions(activeProfile)
@@ -181,9 +187,9 @@ const CreateSteps = () => {
   }
 
   const initIrys = async () => {
-    if (signer && address && !irysData.instance) {
+    if (walletClient && address && !irysData.instance) {
       toast.loading(IRYS_CONNECT_MESSAGE)
-      const instance = await getIrysInstance(signer)
+      const instance = await getIrysInstance(walletClient)
       if (instance) {
         setIrysData({ instance })
       }

apps/web/src/lib/store/index.ts

@@ -1,14 +1,15 @@
 import { WebIrys } from '@irys/sdk'
 import { MetadataLicenseType } from '@lens-protocol/metadata'
+import { viemPublicClient } from '@lib/viemClient'
 import {
   CREATOR_VIDEO_CATEGORIES,
   IRYS_CURRENCY,
   IRYS_NODE_URL,
-  POLYGON_RPC_URL,
   WMATIC_TOKEN_ADDRESS
 } from '@tape.xyz/constants'
 import { logger } from '@tape.xyz/generic'
 import type { IrysDataState, UploadedMedia } from '@tape.xyz/lens/custom-types'
+import type { WalletClient } from 'viem'
 import { create } from 'zustand'
 
 export const UPLOADED_VIDEO_IRYS_DEFAULTS = {
@@ -72,9 +73,7 @@ interface AppState {
   setActiveTagFilter: (activeTagFilter: string) => void
   setVideoWatchTime: (videoWatchTime: number) => void
   setIrysData: (irysProps: Partial<IrysDataState>) => void
-  getIrysInstance: (signer: {
-    signMessage: (message: string) => Promise<string>
-  }) => Promise<WebIrys | null>
+  getIrysInstance: (client: WalletClient) => Promise<WebIrys | null>
 }
 
 const useAppStore = create<AppState>((set) => ({
@@ -90,18 +89,17 @@ const useAppStore = create<AppState>((set) => ({
     set((state) => ({
       uploadedMedia: { ...state.uploadedMedia, ...mediaProps }
     })),
-  getIrysInstance: async (signer) => {
+  getIrysInstance: async (client: WalletClient) => {
     try {
       const instance = new WebIrys({
         url: IRYS_NODE_URL,
         token: IRYS_CURRENCY,
         wallet: {
-          rpcUrl: POLYGON_RPC_URL,
-          name: 'viem',
-          provider: signer
+          name: 'viemv2',
+          provider: client,
+          publicClient: viemPublicClient
         }
       })
-      await instance.utils.getBundlerAddress(IRYS_CURRENCY)
       await instance.ready()
       return instance
     } catch (error) {

apps/web/src/lib/viemClient.ts

@@ -0,0 +1,8 @@
+import { IS_MAINNET, POLYGON_RPC_URL } from '@tape.xyz/constants'
+import { createPublicClient, http } from 'viem'
+import { polygon, polygonMumbai } from 'viem/chains'
+
+export const viemPublicClient = createPublicClient({
+  chain: IS_MAINNET ? polygon : polygonMumbai,
+  transport: http(POLYGON_RPC_URL)
+})

packages/constants/general.ts

@@ -86,7 +86,7 @@ export const ETHERSCAN_URL = IS_MAINNET
 export const POLYGON_CHAIN_ID = IS_MAINNET ? 137 : 80001
 
 // ipfs
-export const IPFS_FREE_UPLOAD_LIMIT = IS_MAINNET ? 6000 : 50 // in MB
+export const IPFS_FREE_UPLOAD_LIMIT = IS_MAINNET ? 6000 : 0 // in MB
 export const IPFS_GATEWAY_URL = 'https://gw.ipfs-lens.dev/ipfs'
 export const EVER_ENDPOINT = 'https://endpoint.4everland.co'
 export const EVER_REGION = 'us-west-2'

yarn.lock

@@ -3569,10 +3569,10 @@
     async-retry "^1.3.3"
     axios "^1.4.0"
 
-"@irys/sdk@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@irys/sdk/-/sdk-0.1.5.tgz#23dc6cb559305f7f91a5987ec528b93d21c2c74a"
-  integrity sha512-OAuuyVDggjZu8+ao5LloyIPrYFSeB6psvXvPUUvrO4ZC7/u4CBE/h2U0xjI5N23O1Lf1AEgboiBQstXZIEs+7Q==
+"@irys/sdk@^0.1.6-a2":
+  version "0.1.6-a2"
+  resolved "https://registry.yarnpkg.com/@irys/sdk/-/sdk-0.1.6-a2.tgz#a971bb9b9466e0262ce2bcc8922d0862bb06c030"
+  integrity sha512-dWJJuzyv2mCLBz/cX6WvcM2cRUJyGXS24pZv9wuaWqpLhsqYJYUF/T52XcZrAiopxgqhTxjnGhN/KTeAOUb8pw==
   dependencies:
     "@ethersproject/bignumber" "^5.7.0"
     "@ethersproject/contracts" "^5.7.0"
@@ -3589,7 +3589,7 @@
     aptos "=1.8.5"
     arbundles "^0.10.0"
     async-retry "^1.3.3"
-    axios "^1.4.0"
+    axios "^1.6.7"
     base64url "^3.0.1"
     bignumber.js "^9.0.1"
     bs58 "5.0.0"