Merge pull request #238 from liteflow-labs/feature/replace-ethers-viem

Replace ethers Signer by viem

Author: NicolasMahe

.changeset/dirty-houses-shake.md

@@ -0,0 +1,6 @@
+---
+'@liteflow/react': major
+'@liteflow/core': major
+---
+
+Replace Ethers.js by Viem

.eslintignore

@@ -1 +1,2 @@
 example
+**/dist

docs/pages/tools/sdk-react/index.md

@@ -32,13 +32,19 @@ To authenticate your user you will need to have access to the `Signer` of their
 
 ```tsx
 import { useAuthenticate, useIsLoggedIn } from '@liteflow/react'
-import { useAccount, useSigner } from 'wagmi' // or your favorite web3 wallet
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 function Login() {
   const { address } = useAccount()
-  const { data: signer } = useSigner()
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [authenticate, { resetAuthenticationToken }] = useAuthenticate()
-  const loggedIn = useIsLoggedIn(address)
+  const loggedIn = useIsLoggedIn(walletClient?.account.address)
 
   if (!signer) return 'No wallet connected'
   if (loggedIn)
@@ -52,12 +58,18 @@ function Login() {
 Every component inside the `LiteflowProvider` is now set up to use the Liteflow hooks.
 
 ```tsx
+import { BigNumber } from '@ethersproject/bignumber'
 import { useCreateOffer } from '@liteflow/react'
-import { BigNumber } from 'ethers'
-import { useSigner } from 'wagmi' // or your favorite web3 wallet
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 function PlaceBid() {
-  const { data: signer } = useSigner()
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [createOffer] = useCreateOffer(signer)
 
   const handleClick = async () => {

docs/pages/tools/sdk-react/useAcceptOffer.md

@@ -13,9 +13,16 @@ Can only be executed by an owner of the related NFT if it's a bid, or by anyone
 ```tsx
 import { BigNumber } from '@ethersproject/bignumber'
 import { AcceptOfferStep, useAcceptOffer } from '@liteflow/react'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [acceptOffer, { activeStep, transactionHash }] = useAcceptOffer(signer)
 
   const handleClick = async () => {

docs/pages/tools/sdk-react/useAuthenticate.md

@@ -10,9 +10,16 @@ Hook to authenticate a web3 wallet against the API. It returns a token that need
 
 ```tsx
 import { useAuthenticate } from '@liteflow/react'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [authenticate, { loading }] = useAuthenticate()
 
   const handleClick = async () => {

docs/pages/tools/sdk-react/useBatchPurchase.md

@@ -12,9 +12,16 @@ Hook to accept multiple offers, accessing the active process step as well as the
 ```tsx
 import { BigNumber } from '@ethersproject/bignumber'
 import { BatchPurchaseStep, useBatchPurchase } from '@liteflow/react'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [batchPurchase, { activeStep, transactionHash }] =
     useBatchPurchase(signer)
 

docs/pages/tools/sdk-react/useCancelOffer.md

@@ -10,9 +10,16 @@ Hook to cancel an offer, accessing the active process step as well as the transa
 
 ```tsx
 import { CancelOfferStep, useCancelOffer } from '@liteflow/react'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [cancelOffer, { activeStep, transactionHash }] = useCancelOffer(signer)
 
   const handleClick = async () => {

docs/pages/tools/sdk-react/useCreateNFT.md

@@ -10,9 +10,16 @@ Hook for creating an NFT, accessing the active process step as well as the trans
 
 ```tsx
 import { CreateNftStep, useCreateNFT } from '@liteflow/react'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [createNFT, { activeStep, transactionHash }] = useCreateNFT(signer, {
     uploadUrl: 'Your liteflow upload URL',
   })

docs/pages/tools/sdk-react/useCreateOffer.md

@@ -9,11 +9,18 @@ Hook for creating an offer, accessing the active process step as well as the tra
 ## Usage
 
 ```tsx
+import { BigNumber } from '@ethersproject/bignumber'
 import { CreateOfferStep, useCreateOffer } from '@liteflow/react'
-import { BigNumber } from 'ethers'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [createOffer, { activeStep, transactionHash }] = useCreateOffer(signer)
 
   const handleClick = async () => {

docs/pages/tools/sdk-react/useMintDrop.md

@@ -10,9 +10,16 @@ Hook for minting a drop, accessing the active process step as well as the transa
 
 ```tsx
 import { MintDropStep, useMintDrop } from '@liteflow/react'
+import { useMemo } from 'react'
+import { publicActions } from 'viem'
+import { useWalletClient } from 'wagmi'
 
 export default function Component() {
-  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
+  const { data: walletClient } = useWalletClient()
+  const signer = useMemo(() => {
+    return walletClient?.extend(publicActions)
+  }, [walletClient])
+
   const [mintDrop, { activeStep, transactionHash }] = useMintDrop(signer)
 
   const handleClick = async () => {