Merge pull request #705 from alephium/depend-on-web3

Depend more on web3 instead of js-sdk

package.json

@@ -33,7 +33,7 @@
     "electron-updater": "^5.3.0"
   },
   "devDependencies": {
-    "@alephium/sdk": "0.6.4",
+    "@alephium/sdk": "0.7.0-rc.1",
     "@alephium/token-list": "^0.0.7",
     "@alephium/walletconnect-provider": "^0.11.0",
     "@alephium/web3": "^0.11.0",

src/App.tsx

@@ -121,8 +121,9 @@ const App = () => {
 
   const initializeClient = useCallback(async () => {
     try {
-      await client.init(network.settings.nodeHost, network.settings.explorerApiHost)
-      const { networkId } = await client.web3.infos.getInfosChainParams()
+      client.init(network.settings.nodeHost, network.settings.explorerApiHost)
+      const { networkId } = await client.node.infos.getInfosChainParams()
+      // TODO: Check if connection to explorer also works
       dispatch(apiClientInitSucceeded({ networkId, networkName: network.name }))
     } catch (e) {
       dispatch(apiClientInitFailed({ networkName: network.name, networkStatus: network.status }))

src/api/addresses.ts

@@ -16,7 +16,7 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Transaction } from '@alephium/sdk/api/explorer'
+import { explorer } from '@alephium/web3'
 
 import client from '@/api/client'
 import { Address, AddressDataSyncResult, AddressHash } from '@/types/addresses'
@@ -25,16 +25,14 @@ export const fetchAddressesData = async (addressHashes: AddressHash[]): Promise<
   const results = []
 
   for (const addressHash of addressHashes) {
-    const { data: details } = await client.explorer.getAddressDetails(addressHash)
-    const { data: transactions } = await client.explorer.getAddressTransactions(addressHash, 1)
-    const { data: mempoolTransactions } = await client.explorer.addresses.getAddressesAddressMempoolTransactions(
-      addressHash
-    )
-    const { data: tokenIds } = await client.explorer.addresses.getAddressesAddressTokens(addressHash)
+    const details = await client.explorer.addresses.getAddressesAddress(addressHash)
+    const transactions = await client.explorer.addresses.getAddressesAddressTransactions(addressHash, { page: 1 })
+    const mempoolTransactions = await client.explorer.addresses.getAddressesAddressMempoolTransactions(addressHash)
+    const tokenIds = await client.explorer.addresses.getAddressesAddressTokens(addressHash)
 
     const tokens = await Promise.all(
       tokenIds.map((id) =>
-        client.explorer.addresses.getAddressesAddressTokensTokenIdBalance(addressHash, id).then(({ data }) => ({
+        client.explorer.addresses.getAddressesAddressTokensTokenIdBalance(addressHash, id).then((data) => ({
           id,
           ...data
         }))
@@ -55,12 +53,13 @@ export const fetchAddressesData = async (addressHashes: AddressHash[]): Promise<
 
 export const fetchAddressTransactionsNextPage = async (address: Address) => {
   let nextPage = address.transactionsPageLoaded
-  let nextPageTransactions = [] as Transaction[]
+  let nextPageTransactions = [] as explorer.Transaction[]
 
   if (!address.allTransactionPagesLoaded) {
     nextPage += 1
-    const { data: transactions } = await client.explorer.getAddressTransactions(address.hash, nextPage)
-    nextPageTransactions = transactions
+    nextPageTransactions = await client.explorer.addresses.getAddressesAddressTransactions(address.hash, {
+      page: nextPage
+    })
   }
 
   return {
@@ -72,10 +71,7 @@ export const fetchAddressTransactionsNextPage = async (address: Address) => {
 
 export const fetchAddressesTransactionsNextPage = async (addresses: Address[], nextPage: number) => {
   const addressHashes = addresses.filter((address) => !address.allTransactionPagesLoaded).map((address) => address.hash)
-  const { data: transactions } = await client.explorer.addresses.postAddressesTransactions(
-    { page: nextPage },
-    addressHashes
-  )
+  const transactions = await client.explorer.addresses.postAddressesTransactions({ page: nextPage }, addressHashes)
 
   return transactions
 }

src/api/client.ts

@@ -16,45 +16,34 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { CliqueClient, ExplorerClient } from '@alephium/sdk'
-import { NodeProvider as Web3Client, throttledFetch } from '@alephium/web3'
+import { ExplorerProvider, NodeProvider, throttledFetch } from '@alephium/web3'
 
 import { defaultSettings } from '@/storage/settings/settingsPersistentStorage'
 import { NetworkSettings } from '@/types/settings'
 
 export class Client {
-  clique: CliqueClient
-  explorer: ExplorerClient
-  web3: Web3Client
+  explorer: ExplorerProvider
+  node: NodeProvider
 
   constructor() {
     const { nodeHost, explorerApiHost } = defaultSettings.network
-    const { clique, explorer, web3 } = this.getClients(nodeHost, explorerApiHost)
+    const { explorer, node } = this.getClients(nodeHost, explorerApiHost)
 
-    this.clique = clique
     this.explorer = explorer
-    this.web3 = web3
+    this.node = node
   }
 
-  async init(
-    nodeHost: NetworkSettings['nodeHost'],
-    explorerApiHost: NetworkSettings['explorerApiHost'],
-    isMultiNodesClique = false
-  ) {
-    const { clique, explorer, web3 } = this.getClients(nodeHost, explorerApiHost)
+  init(nodeHost: NetworkSettings['nodeHost'], explorerApiHost: NetworkSettings['explorerApiHost']) {
+    const { explorer, node } = this.getClients(nodeHost, explorerApiHost)
 
-    this.clique = clique
     this.explorer = explorer
-    this.web3 = web3
-
-    await this.clique.init(isMultiNodesClique)
+    this.node = node
   }
 
   private getClients(nodeHost: NetworkSettings['nodeHost'], explorerApiHost: NetworkSettings['explorerApiHost']) {
     return {
-      clique: new CliqueClient({ baseUrl: nodeHost, customFetch: throttledFetch(5) }),
-      explorer: new ExplorerClient({ baseUrl: explorerApiHost, customFetch: throttledFetch(5) }),
-      web3: new Web3Client(nodeHost, undefined, throttledFetch(5))
+      explorer: new ExplorerProvider(explorerApiHost, undefined, throttledFetch(5)),
+      node: new NodeProvider(nodeHost, undefined, throttledFetch(5))
     }
   }
 }

src/api/transactions.ts

@@ -16,66 +16,32 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { transactionSign } from '@alephium/web3'
+
 import client from '@/api/client'
 import { Address, AddressHash } from '@/types/addresses'
 import { CsvExportQueryParams } from '@/types/transactions'
-import { getAvailableBalance } from '@/utils/addresses'
 
 export const buildSweepTransactions = async (fromAddress: Address, toAddressHash: AddressHash) => {
-  const { data } = await client.clique.transactionConsolidateUTXOs(
-    fromAddress.publicKey,
-    fromAddress.hash,
-    toAddressHash
-  )
+  const { unsignedTxs } = await client.node.transactions.postTransactionsSweepAddressBuild({
+    fromPublicKey: fromAddress.publicKey,
+    toAddress: toAddressHash
+  })
 
   return {
-    unsignedTxs: data.unsignedTxs,
-    fees: data.unsignedTxs.reduce((acc, tx) => acc + BigInt(tx.gasPrice) * BigInt(tx.gasAmount), BigInt(0))
-  }
-}
-
-export const buildUnsignedTransactions = async (
-  fromAddress: Address,
-  toAddressHash: string,
-  amountInSet: bigint,
-  gasAmount: string,
-  gasPriceInSet?: bigint
-) => {
-  const isSweep = amountInSet.toString() === getAvailableBalance(fromAddress).toString()
-
-  if (isSweep) {
-    return await buildSweepTransactions(fromAddress, toAddressHash)
-  } else {
-    const { data } = await client.clique.transactionCreate(
-      fromAddress.hash,
-      fromAddress.publicKey,
-      toAddressHash,
-      amountInSet.toString(),
-      undefined,
-      gasAmount ? parseInt(gasAmount) : undefined,
-      gasPriceInSet ? gasPriceInSet.toString() : undefined
-    )
-
-    return {
-      unsignedTxs: [{ txId: data.txId, unsignedTx: data.unsignedTx }],
-      fees: BigInt(data.gasAmount) * BigInt(data.gasPrice)
-    }
+    unsignedTxs,
+    fees: unsignedTxs.reduce((acc, tx) => acc + BigInt(tx.gasPrice) * BigInt(tx.gasAmount), BigInt(0))
   }
 }
 
 export const signAndSendTransaction = async (fromAddress: Address, txId: string, unsignedTx: string) => {
-  const signature = client.clique.transactionSign(txId, fromAddress.privateKey)
-  const { data } = await client.clique.transactionSend(fromAddress.hash, unsignedTx, signature)
+  const signature = transactionSign(txId, fromAddress.privateKey)
+  const data = await client.node.transactions.postTransactionsSubmit({ unsignedTx, signature })
 
-  return { ...data, signature: signature }
+  return { ...data, signature }
 }
 
-export const fetchCsv = async ({ addressHash, ...timeRangeQueryParams }: CsvExportQueryParams) => {
-  const { data } = await client.explorer.addresses.getAddressesAddressExportTransactionsCsv(
-    addressHash,
-    timeRangeQueryParams,
-    { format: 'text' }
-  )
-
-  return data
-}
+export const fetchCsv = async ({ addressHash, ...timeRangeQueryParams }: CsvExportQueryParams) =>
+  await client.explorer.addresses.getAddressesAddressExportTransactionsCsv(addressHash, timeRangeQueryParams, {
+    format: 'text'
+  })

src/components/IOList.tsx

@@ -16,7 +16,8 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Input, Output } from '@alephium/sdk/dist/api/api-explorer'
+import { GENESIS_TIMESTAMP } from '@alephium/sdk'
+import { explorer } from '@alephium/web3'
 import _ from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -30,15 +31,14 @@ import AddressDetailsModal from '@/modals/AddressDetailsModal'
 import ModalPortal from '@/modals/ModalPortal'
 import { selectAddressIds } from '@/storage/addresses/addressesSelectors'
 import { AddressHash } from '@/types/addresses'
-import { GENESIS_TIMESTAMP } from '@/utils/constants'
 import { openInWebBrowser } from '@/utils/misc'
 
 interface IOListProps {
   currentAddress: string
   isOut: boolean
   timestamp: number
-  outputs?: Output[]
-  inputs?: Input[]
+  outputs?: explorer.Output[]
+  inputs?: explorer.Input[]
   linkToExplorer?: boolean
   truncate?: boolean
   disableA11y?: boolean
@@ -60,7 +60,7 @@ const IOList = ({
 
   const [selectedAddressHash, setSelectedAddressHash] = useState<AddressHash>()
 
-  const io = (isOut ? outputs : inputs) as Array<Output | Input> | undefined
+  const io = (isOut ? outputs : inputs) as Array<explorer.Output | explorer.Input> | undefined
 
   const handleShowAddress = (addressHash: AddressHash) =>
     internalAddressHashes.includes(addressHash)

src/components/TransactionalInfo.tsx

@@ -17,7 +17,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { formatAmountForDisplay } from '@alephium/sdk'
-import { Transaction } from '@alephium/sdk/api/explorer'
+import { explorer } from '@alephium/web3'
 import { colord } from 'colord'
 import { partition } from 'lodash'
 import { ArrowLeftRight, ArrowRight as ArrowRightIcon } from 'lucide-react'
@@ -116,8 +116,8 @@ const TransactionalInfo = ({
               currentAddress={addressHash}
               isOut={false}
               outputs={outputs}
-              inputs={(tx as Transaction).inputs}
-              timestamp={(tx as Transaction).timestamp}
+              inputs={(tx as explorer.Transaction).inputs}
+              timestamp={(tx as explorer.Transaction).timestamp}
               truncate
               disableA11y
             />
@@ -155,8 +155,8 @@ const TransactionalInfo = ({
                 currentAddress={addressHash}
                 isOut={direction === 'out'}
                 outputs={outputs}
-                inputs={(tx as Transaction).inputs}
-                timestamp={(tx as Transaction).timestamp}
+                inputs={(tx as explorer.Transaction).inputs}
+                timestamp={(tx as explorer.Transaction).timestamp}
                 truncate
                 disableA11y
               />