Skip to content

Commit ed78c82

Browse files
miguelmotamiguelmota
committed
Merge branch 'feat/socket' into staging
2 parents 72b0f0d + c0ee1a4 commit ed78c82

File tree

14 files changed

+404
-34
lines changed

14 files changed

+404
-34
lines changed

‎.github/workflows/ui-deploy.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ jobs:
6868
REACT_APP_BLOCKLIST_ENABLED: ${{ vars.REACT_APP_BLOCKLIST_ENABLED }}
6969
REACT_APP_BNC_DAPP_ID: ${{ secrets.REACT_APP_BNC_DAPP_ID }}
7070
REACT_APP_GIT_SHA: ${{ github.sha }}
71+
REACT_APP_ENABLE_SOCKET: ${{ vars.REACT_APP_ENABLE_SOCKET }}
7172
run: pnpm --filter frontend... build
7273

7374
- name: Write commit file

‎packages/frontend/src/components/Header/TxPill.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Box from '@mui/material/Box'
2-
import CircularProgress from '@mui/material/CircularProgress'
32
import React, { useEffect, useState } from 'react'
43
import { Circle } from '#components/ui/Circle.js'
54
import { Icon } from '#components/ui/Icon.js'
@@ -28,6 +27,8 @@ const useStyles = makeStyles(theme => ({
2827
},
2928
}))
3029

30+
const showPendingTxs = true
31+
3132
export const TxPill = () => {
3233
const { accountDetails, txHistory } = useApp()
3334
const transactions = txHistory?.transactions
@@ -52,9 +53,9 @@ export const TxPill = () => {
5253

5354
return (
5455
<div className={styles.root}>
55-
{numPendingTxs > 0 ? (
56+
{showPendingTxs && numPendingTxs > 0 ? (
5657
<StyledButton flat onClick={handleClick}>
57-
{numPendingTxs > 3 ? "3+" : numPendingTxs} Pending <CircularProgress size={18} className={styles.spinner} />
58+
{numPendingTxs > 3 ? "3+" : numPendingTxs} Pending
5859
</StyledButton>
5960
) : (
6061
<StyledButton

‎packages/frontend/src/config/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,5 @@ for (const chain in WaitConfirmations) {
120120
export { rpcProviderOverrides }
121121

122122
export const walletConnectProjectId = '651b16cdb6b0f490f68e0c4c5f5c35ce' // This is is meant to be public
123+
124+
export const enableSocket = process.env.REACT_APP_ENABLE_SOCKET === 'true'

‎packages/frontend/src/contexts/AppContext/AppContext.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import useTxHistory, { TxHistory } from '#contexts/AppContext/useTxHistory.js'
99
import { AccountDetails, useAccountDetails } from '#contexts/AppContext/useAccountDetails.js'
1010
import { Hop, HopBridge } from '@hop-protocol/sdk'
1111
import { TxConfirm, useTxConfirm } from '#contexts/AppContext/useTxConfirm.js'
12-
import { blocklist, reactAppNetwork, rpcProviderOverrides } from '#config/index.js'
12+
import { blocklist, reactAppNetwork, rpcProviderOverrides, enableSocket } from '#config/index.js'
1313
import { allNetworks as networks } from '#config/networks.js'
1414
import { useTheme } from '@mui/styles'
1515
import { useWeb3Context } from '#contexts/Web3Context.js'
@@ -41,7 +41,8 @@ const AppContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
4141
blocklist,
4242
chainProviders: {
4343
...rpcProviderOverrides,
44-
}
44+
},
45+
enableSocket
4546
})
4647
return hop
4748
}, [provider])

‎packages/frontend/src/contexts/AppContext/useTxHistory.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface UpdateTransactionOptions {
2424
}
2525

2626
const MAX_TRANSACTION_COUNT = 4
27-
27+
const shouldUseCache = false
2828
const cacheKey = 'recentTransactions:v000'
2929

3030
const localStorageSerializationOptions = {
@@ -43,16 +43,18 @@ const useTxHistory = (sdk: Hop): TxHistory => {
4343
const [transactions, setTransactions] = useState<Transaction[] | undefined>([])
4444

4545
useEffect(() => {
46-
// on mount, load from local storage
47-
const storedTxs = localStorage.getItem(cacheKey)
48-
if (storedTxs) {
49-
setTransactions(localStorageSerializationOptions.deserializer(storedTxs))
46+
// on mount, load from local storage only if caching is enabled
47+
if (shouldUseCache) {
48+
const storedTxs = localStorage.getItem(cacheKey)
49+
if (storedTxs) {
50+
setTransactions(localStorageSerializationOptions.deserializer(storedTxs))
51+
}
5052
}
5153
}, [])
5254

5355
useEffect(() => {
54-
// on transactions change, save to local storage
55-
if (transactions) {
56+
// on transactions change, save to local storage only if caching is enabled
57+
if (shouldUseCache && transactions) {
5658
localStorage.setItem(cacheKey, localStorageSerializationOptions.serializer(transactions))
5759
}
5860
}, [transactions])

‎packages/frontend/src/hooks/useEstimateTxCost.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export function useEstimateTxCost(selectedNetwork?: Network) {
163163
}
164164
)
165165
} catch (err) {
166-
logger.error('estimateSendGasLimit error:', err)
166+
logger.warn('estimateSendGasLimit error:', err)
167167
const defaultGasLimit = getDefaultSendGasLimit(fromNetwork.slug, token.symbol)
168168
logger.debug('using default gasLimit:', defaultGasLimit)
169169
estimatedGasLimit = BigNumber.from(defaultGasLimit)

‎packages/frontend/src/hooks/useTransactionStatus.tsx‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { loadState, saveState } from '#utils/localStorage.js'
99
import { useApp } from '#contexts/AppContext/index.js'
1010
import { useCallback, useEffect, useMemo, useState } from 'react'
1111
import { useInterval } from 'usehooks-ts'
12+
import { enableSocket } from '#config/index.js'
1213

1314
const useTransactionStatus = (transaction?: Transaction, chain?: TChain) => {
1415
const { sdk, txHistory } = useApp()
@@ -27,6 +28,29 @@ const useTransactionStatus = (transaction?: Transaction, chain?: TChain) => {
2728
return _provider
2829
}, [chain])
2930

31+
const checkSocketStatus = useCallback(async () => {
32+
if (!enableSocket || !transaction?.token?.symbol || transaction.token.symbol !== 'ETH') {
33+
return false
34+
}
35+
36+
try {
37+
const status = await sdk.bridge(transaction.token.symbol).getTransactionStatusSocket(transaction.hash)
38+
console.log('status', status)
39+
if (status.status === 'COMPLETED') {
40+
setCompleted(true)
41+
setDestCompleted(true)
42+
updateTransaction(transaction, {
43+
pending: false,
44+
pendingDestinationConfirmation: false
45+
})
46+
return true
47+
}
48+
} catch (err) {
49+
logger.error('Error checking Socket transaction status:', err)
50+
}
51+
return false
52+
}, [transaction, sdk])
53+
3054
const updateTxStatus = useCallback(async () => {
3155
if (!provider || !transaction?.hash || !chain) {
3256
setCompleted(false)
@@ -38,6 +62,12 @@ const useTransactionStatus = (transaction?: Transaction, chain?: TChain) => {
3862
return
3963
}
4064

65+
// Check Socket status first
66+
const isSocketCompleted = await checkSocketStatus()
67+
if (isSocketCompleted) {
68+
return
69+
}
70+
4171
const txHash = transaction.hash
4272
const cacheKey = `txReceipt:${txHash}`
4373

@@ -83,7 +113,7 @@ const useTransactionStatus = (transaction?: Transaction, chain?: TChain) => {
83113
setCompleted(true)
84114
updateTransaction(transaction, { pending: false })
85115
}
86-
}, [transactions, transaction, provider])
116+
}, [transactions, transaction, provider, checkSocketStatus])
87117

88118
const updateDestTxStatus = useCallback(async () => {
89119
if (
@@ -94,14 +124,19 @@ const useTransactionStatus = (transaction?: Transaction, chain?: TChain) => {
94124
!transaction.destTxHash ||
95125
transaction.pendingDestinationConfirmation)
96126
) {
127+
// Check Socket status first
128+
const isSocketCompleted = await checkSocketStatus()
129+
if (isSocketCompleted) {
130+
return
131+
}
132+
97133
const isSpent = await transaction?.checkIsTransferIdSpent(sdk)
98-
// logger.debug(`tx ${transaction.hash.slice(0, 10)} isSpent:`, isSpent)
99134
if (isSpent) {
100135
setDestCompleted(true)
101136
updateTransaction(transaction, { pendingDestinationConfirmation: false })
102137
}
103138
}
104-
}, [transactions, transaction])
139+
}, [transactions, transaction, checkSocketStatus])
105140

106141
useEffect(() => {
107142
if (!completed) {

‎packages/frontend/src/pages/Send/useSend.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { Transaction } from '#models/Transaction.js'
2828
import { amountToBN, formatError } from '#utils/format.js'
2929
import { commafy, findMatchingBridge, networkSlugToId, sanitizeNumericalString, toTokenDisplay, toUsdDisplay } from '#utils/index.js'
3030
import { getTransferTimeString } from '#utils/getTransferTimeString.js'
31-
import { isMainnet, showRewards } from '#config/index.js'
31+
import { isMainnet, showRewards, enableSocket } from '#config/index.js'
3232
import { useApp } from '#contexts/AppContext/index.js'
3333
import { useCheckTokenDeprecated } from '#hooks/useCheckTokenDeprecated.js'
3434
import { useSendTransaction } from './useSendTransaction'
@@ -871,7 +871,8 @@ export function useSend(): SendResponseProps {
871871
toTokenAmount,
872872
])
873873

874-
const showFeeRefund = feeRefundEnabled && [ChainSlug.Optimism, ChainSlug.Arbitrum].includes(toNetwork?.slug as ChainSlug) && !!feeRefund && !!feeRefundUsd && !!feeRefundTokenSymbol
874+
const usingSocket = fromToken?.symbol === 'ETH' && enableSocket
875+
const showFeeRefund = feeRefundEnabled && [ChainSlug.Optimism, ChainSlug.Arbitrum].includes(toNetwork?.slug as ChainSlug) && !!feeRefund && !!feeRefundUsd && !!feeRefundTokenSymbol && !usingSocket
875876
const feeRefundDisplay = feeRefund && feeRefundUsd && feeRefundTokenSymbol ? `${feeRefund} ($${feeRefundUsd})` : ''
876877
const maxButtonFixedAmountToSubtract = fromToken?.symbol === 'ETH' ? relayFeeEth : BigNumber.from(0)
877878

‎packages/frontend/src/pages/Send/useSendData.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Token } from '@hop-protocol/sdk'
44
import { useApp } from '#contexts/AppContext/index.js'
55
import { useMemo } from 'react'
66
import { useQuery } from 'react-query'
7+
import { useWeb3Context } from '#contexts/Web3Context.js'
78

89
const useSendData = (
910
token?: Token,
@@ -13,6 +14,7 @@ const useSendData = (
1314
fromAmount?: BigNumber
1415
) => {
1516
const { sdk } = useApp()
17+
const { provider } = useWeb3Context()
1618

1719
const queryKey = `sendData:${token?.symbol}:${fromNetwork?.slug}:${
1820
toNetwork?.slug
@@ -21,18 +23,27 @@ const useSendData = (
2123
const { isLoading, data, error } = useQuery(
2224
[queryKey, token?.address, fromNetwork?.slug, toNetwork?.slug, fromAmount?.toString()],
2325
async () => {
24-
if (!(token && fromNetwork && toNetwork && fromAmount)) {
26+
if (!(token && fromNetwork && toNetwork && fromAmount?.gt(0))) {
2527
return
2628
}
2729

28-
const bridge = sdk.bridge(token?.symbol)
30+
const signer = provider?.getSigner()
31+
let bridge = sdk.bridge(token?.symbol)
32+
if (signer) {
33+
bridge = bridge.connect(signer)
34+
}
2935

3036
const isDeprecatedRoute = fromNetwork && toNetwork && ['USDC', 'USDC.e', 'MAGIC'].includes(token?.symbol) && !bridge?.getIsSupportedCctpRoute(fromNetwork?.slug, toNetwork?.slug)
3137
if (isDeprecatedRoute) {
3238
return
3339
}
3440

35-
return bridge.getSendData(fromAmount, fromNetwork.slug, toNetwork.slug)
41+
const sendData = await bridge.getSendData(fromAmount, fromNetwork.slug, toNetwork.slug)
42+
console.log('sendData', sendData)
43+
if (sendData?.isSocket) {
44+
console.log('sendData.originalSocketResponse', sendData.originalSocketResponse)
45+
}
46+
return sendData
3647
},
3748
{
3849
enabled:

‎packages/frontend/vite.config.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,8 @@ const connectSrc = new Set([
106106
"https://media-exp1.licdn.com",
107107
"https://iris-api.circle.com",
108108
"https://iris-api-sandbox.circle.com",
109-
"https://*.polygon.technology"
109+
"https://*.polygon.technology",
110+
"https://public-backend.bungee.exchange"
110111
])
111112

112113
for (const network of getNetworks()) {
@@ -201,7 +202,8 @@ export default defineConfig({
201202
"process.env.REACT_APP_BNC_DAPP_ID": process.env.REACT_APP_BNC_DAPP_ID ? `"${process.env.REACT_APP_BNC_DAPP_ID}"` : undefined,
202203
"process.env.REACT_APP_SHOW_BANNER_MESSAGE": process.env.REACT_APP_SHOW_BANNER_MESSAGE ? `"${process.env.REACT_APP_SHOW_BANNER_MESSAGE}"` : undefined,
203204
"process.env.REACT_APP_GIT_SHA": process.env.REACT_APP_GIT_SHA ? `"${process.env.REACT_APP_GIT_SHA}"` : undefined,
204-
"process.env.REACT_APP_DISABLE_NATIVE_ASSET_TRANSFERS": process.env.REACT_APP_DISABLE_NATIVE_ASSET_TRANSFERS ? `"${process.env.REACT_APP_DISABLE_NATIVE_ASSET_TRANSFERS}"` : undefined
205+
"process.env.REACT_APP_DISABLE_NATIVE_ASSET_TRANSFERS": process.env.REACT_APP_DISABLE_NATIVE_ASSET_TRANSFERS ? `"${process.env.REACT_APP_DISABLE_NATIVE_ASSET_TRANSFERS}"` : undefined,
206+
"process.env.REACT_APP_ENABLE_SOCKET": process.env.REACT_APP_ENABLE_SOCKET ? `"${process.env.REACT_APP_ENABLE_SOCKET}"` : undefined
205207
},
206208

207209
resolve: {

0 commit comments

Comments
 (0)