From 1e69266fc9ef33c3ba2d8d72a4186781be065b28 Mon Sep 17 00:00:00 2001 From: Seth Date: Wed, 25 Oct 2023 23:20:47 +0800 Subject: [PATCH] feat(app): use websocket provider --- .../app/src/contexts/asset-token-context/index.tsx | 1 - packages/app/src/contexts/pbm-token-context/index.tsx | 5 +++-- packages/app/src/hooks/use-safe-provider.ts | 10 ++++++++++ packages/app/src/hooks/use-token-balance.ts | 9 +++++---- packages/app/src/pages/payments/index.tsx | 5 +++-- packages/app/src/pages/pbm/index.tsx | 5 +++-- 6 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 packages/app/src/hooks/use-safe-provider.ts diff --git a/packages/app/src/contexts/asset-token-context/index.tsx b/packages/app/src/contexts/asset-token-context/index.tsx index cb84842..38c740f 100644 --- a/packages/app/src/contexts/asset-token-context/index.tsx +++ b/packages/app/src/contexts/asset-token-context/index.tsx @@ -19,7 +19,6 @@ const AssetTokenContext = createContext({ export const AssetTokenProvider = ({ children }: { children: React.ReactNode }) => { const { assetContract } = usePBMTokenContext() - // const provider = useProvider() const [contract, setContract] = useState() const [decimals, setDecimals] = useState(0) diff --git a/packages/app/src/contexts/pbm-token-context/index.tsx b/packages/app/src/contexts/pbm-token-context/index.tsx index 0e3e2bc..f9b61bf 100644 --- a/packages/app/src/contexts/pbm-token-context/index.tsx +++ b/packages/app/src/contexts/pbm-token-context/index.tsx @@ -1,6 +1,7 @@ 'use client' import { ERC20MetadataContextProps } from '@app/contexts/types' +import { useSafeProvider } from '@app/hooks/use-safe-provider' import { getAppChainInfo } from '@app/utils/get-app-chain-info' import { IERC20Metadata, @@ -12,7 +13,7 @@ import { } from '@pbm/contracts' import { BigNumber } from 'ethers' import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react' -import { useAccount, useNetwork, useProvider } from 'wagmi' +import { useAccount, useNetwork } from 'wagmi' type PBMTokenContextProps = { asset: string | undefined @@ -82,7 +83,7 @@ export const PBMTokenProvider = ({ children }: { children: React.ReactNode }) => genesisBlock, ] ) - const provider = useProvider() + const provider = useSafeProvider() const { address: connectedAccount } = useAccount() useEffect(() => { diff --git a/packages/app/src/hooks/use-safe-provider.ts b/packages/app/src/hooks/use-safe-provider.ts new file mode 100644 index 0000000..1a7dedd --- /dev/null +++ b/packages/app/src/hooks/use-safe-provider.ts @@ -0,0 +1,10 @@ +import { useMemo } from 'react' +import { useNetwork, useProvider, useWebSocketProvider } from 'wagmi' + +export const useSafeProvider = () => { + const { chain } = useNetwork() + const wsProvider = useWebSocketProvider() + const httpProvider = useProvider() + + return useMemo(() => wsProvider ?? httpProvider, [chain?.id, wsProvider, httpProvider]) +} diff --git a/packages/app/src/hooks/use-token-balance.ts b/packages/app/src/hooks/use-token-balance.ts index ec3a1b2..eb07b98 100644 --- a/packages/app/src/hooks/use-token-balance.ts +++ b/packages/app/src/hooks/use-token-balance.ts @@ -1,7 +1,8 @@ -import { useCallback, useEffect, useState } from 'react' -import { BigNumber, ethers } from 'ethers' +import { useSafeProvider } from '@app/hooks/use-safe-provider' import { IERC20Metadata, IERC20Metadata__factory } from '@pbm/contracts' -import { useAccount, useNetwork, useProvider } from 'wagmi' +import { BigNumber, ethers } from 'ethers' +import { useCallback, useEffect, useState } from 'react' +import { useAccount, useNetwork } from 'wagmi' type UseTokenBalanceParams = { token?: string @@ -26,7 +27,7 @@ export const useTokenBalance = (props?: UseTokenBalanceParams): UseTokenBalanceR const [symbol, setSymbol] = useState() const [loading, setLoading] = useState(false) - const provider = useProvider() + const provider = useSafeProvider() const { address: connectedAddress, isConnected } = useAccount() const { chain } = useNetwork() diff --git a/packages/app/src/pages/payments/index.tsx b/packages/app/src/pages/payments/index.tsx index b465905..778c4fd 100644 --- a/packages/app/src/pages/payments/index.tsx +++ b/packages/app/src/pages/payments/index.tsx @@ -6,6 +6,7 @@ import { PaymentsListingTable } from '@app/components/payments-listing-table' import { usePBMTokenContext } from '@app/contexts/pbm-token-context' import { useTransactionModal } from '@app/contexts/transaction-modal-context' import { useFetchPaymentData } from '@app/hooks/use-fetch-payment-data' +import { useSafeProvider } from '@app/hooks/use-safe-provider' import { formatNumberDisplay } from '@app/utils/helpers' import { getPaymentDataSource } from '@app/utils/payments/helpers' import { PaymentDataSource } from '@app/utils/payments/types' @@ -14,7 +15,7 @@ import { Button, Space } from 'antd' import { ethers, Signer } from 'ethers' import { formatUnits } from 'ethers/lib/utils' import React, { ElementRef, useCallback, useEffect, useRef, useState } from 'react' -import { useProvider, useSigner } from 'wagmi' +import { useSigner } from 'wagmi' function PaymentsPage() { useAppLayoutContext({ pageHeading: 'All Payments' }) @@ -25,7 +26,7 @@ function PaymentsPage() { const [latestBlockLoading, setLatestBlockLoading] = useState(false) const [paymentDataSource, setPaymentDataSource] = useState([]) - const provider = useProvider() + const provider = useSafeProvider() const { data: signer } = useSigner() const { decimals, contract: pbmContract, symbol } = usePBMTokenContext() const { paymentData, loading: paymentDataLoading } = useFetchPaymentData() diff --git a/packages/app/src/pages/pbm/index.tsx b/packages/app/src/pages/pbm/index.tsx index 06ede4c..900e938 100644 --- a/packages/app/src/pages/pbm/index.tsx +++ b/packages/app/src/pages/pbm/index.tsx @@ -6,6 +6,7 @@ import { PbmUnwrapCard } from '@app/components/token-overview/pbm-unwrap-card' import { usePBMTokenContext } from '@app/contexts/pbm-token-context' import { useTransactionModal } from '@app/contexts/transaction-modal-context' import { useFetchPaymentData } from '@app/hooks/use-fetch-payment-data' +import { useSafeProvider } from '@app/hooks/use-safe-provider' import { useTokenBalance } from '@app/hooks/use-token-balance' import { formatNumberDisplay } from '@app/utils/helpers' import { getPaymentDataSource } from '@app/utils/payments/helpers' @@ -15,7 +16,7 @@ import { Col, Row } from 'antd' import { BigNumber, ethers, Signer } from 'ethers' import { formatUnits } from 'ethers/lib/utils' import React, { ComponentProps, useCallback, useEffect, useState } from 'react' -import { useAccount, useProvider, useSigner } from 'wagmi' +import { useAccount, useSigner } from 'wagmi' function PbmPage() { useAppLayoutContext({ pageHeading: 'My PBM Dashboard' }) @@ -51,7 +52,7 @@ function PbmPage() { const [latestBlockLoading, setLatestBlockLoading] = useState(false) const [paymentDataSource, setPaymentDataSource] = useState([]) - const provider = useProvider() + const provider = useSafeProvider() const { paymentData, loading: paymentDataLoading } = useFetchPaymentData({ toAddress: connectedAddress, })