@openocean.finance/widget 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -6
- package/src/components/AmountInput/AmountInput.tsx +1 -1
- package/src/components/AmountInput/PriceFormHelperText.tsx +13 -13
- package/src/components/Avatar/TokenAvatar.tsx +1 -1
- package/src/components/ChainSelect/ChainSelect.tsx +1 -1
- package/src/components/ChainSelect/useChainSelect.ts +1 -1
- package/src/components/ContractComponent/ItemPrice.tsx +1 -1
- package/src/components/ContractComponent/NFT/types.ts +1 -1
- package/src/components/Messages/WarningMessages.tsx +5 -5
- package/src/components/Messages/useMessageQueue.ts +1 -1
- package/src/components/RouteCard/RouteCard.tsx +2 -2
- package/src/components/RouteCard/RouteCardEssentials.tsx +1 -1
- package/src/components/RouteCard/getMatchingLabels.ts +1 -1
- package/src/components/RouteCard/types.ts +1 -1
- package/src/components/Routes/RoutesExpanded.tsx +1 -1
- package/src/components/Step/CircularProgress.style.tsx +1 -1
- package/src/components/Step/CircularProgress.tsx +1 -1
- package/src/components/Step/DestinationWalletAddress.tsx +2 -2
- package/src/components/Step/Step.tsx +6 -3
- package/src/components/Step/StepList.tsx +1 -1
- package/src/components/Step/StepProcess.tsx +2 -2
- package/src/components/StepActions/StepActions.tsx +5 -5
- package/src/components/StepActions/StepFees.tsx +2 -2
- package/src/components/StepActions/types.ts +3 -3
- package/src/components/Timer/RouteTimer.tsx +1 -1
- package/src/components/Timer/StepTimer.tsx +5 -5
- package/src/components/Token/Token.tsx +9 -7
- package/src/components/TokenList/TokenListItem.tsx +1 -1
- package/src/components/TokenList/types.ts +1 -1
- package/src/components/TokenRate/TokenRate.tsx +1 -1
- package/src/components/TransactionDetails.tsx +1 -1
- package/src/config/coinbase.ts +1 -1
- package/src/config/metaMask.ts +1 -1
- package/src/hooks/useAddressValidation.ts +2 -2
- package/src/hooks/useAvailableChains.ts +2 -2
- package/src/hooks/useChains.ts +1 -1
- package/src/hooks/useExplorer.ts +4 -2
- package/src/hooks/useFromTokenSufficiency.ts +1 -1
- package/src/hooks/useGasRecommendation.ts +4 -1
- package/src/hooks/useGasSufficiency.ts +7 -3
- package/src/hooks/useInitializer.ts +1 -1
- package/src/hooks/useIsBatchingSupported.ts +2 -2
- package/src/hooks/useIsCompatibleDestinationAccount.ts +1 -1
- package/src/hooks/useIsContractAddress.ts +1 -1
- package/src/hooks/useProcessMessage.ts +23 -23
- package/src/hooks/useRouteExecution.ts +5 -2
- package/src/hooks/useRoutes.ts +4 -4
- package/src/hooks/useToAddressRequirements.ts +1 -1
- package/src/hooks/useToAddressReset.ts +1 -1
- package/src/hooks/useTokenBalance.ts +5 -1
- package/src/hooks/useTokenBalances.ts +1 -1
- package/src/hooks/useTokenSearch.ts +5 -2
- package/src/hooks/useTokens.ts +6 -5
- package/src/hooks/useTools.ts +1 -1
- package/src/hooks/useTransactionDetails.ts +2 -2
- package/src/hooks/useTransactionHistory.ts +8 -2
- package/src/index.ts +2 -2
- package/src/pages/MainPage/MainWarningMessages.tsx +1 -1
- package/src/pages/RoutesPage/RoutesPage.tsx +1 -1
- package/src/pages/SelectChainPage/SelectChainPage.tsx +1 -1
- package/src/pages/SelectEnabledToolsPage.tsx +1 -1
- package/src/pages/SettingsPage/RoutePrioritySettings.tsx +1 -1
- package/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +7 -4
- package/src/pages/TransactionDetailsPage/TransferIdCard.tsx +1 -1
- package/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx +2 -2
- package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx +1 -1
- package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx +1 -1
- package/src/pages/TransactionPage/TokenValueBottomSheet.tsx +2 -2
- package/src/pages/TransactionPage/TransactionPage.tsx +1 -1
- package/src/pages/TransactionPage/types.ts +1 -1
- package/src/providers/WalletProvider/EVMProvider.tsx +1 -1
- package/src/providers/WalletProvider/SDKProviders.tsx +8 -2
- package/src/providers/WalletProvider/SVMProvider.tsx +1 -1
- package/src/providers/WalletProvider/UTXOProvider.tsx +1 -1
- package/src/providers/WalletProvider/useExternalWalletProvider.ts +1 -1
- package/src/providers/WidgetProvider/WidgetProvider.tsx +2 -2
- package/src/services/ExecuteRoute.ts +34 -22
- package/src/stores/form/types.ts +1 -1
- package/src/stores/routes/createRouteExecutionStore.ts +1 -1
- package/src/stores/routes/types.ts +1 -1
- package/src/stores/routes/utils.ts +1 -1
- package/src/stores/settings/types.ts +1 -1
- package/src/types/events.ts +6 -1
- package/src/types/token.ts +1 -1
- package/src/types/widget.ts +10 -10
- package/src/utils/chainType.ts +1 -1
- package/src/utils/converters.ts +2 -2
- package/src/utils/fees.ts +6 -1
- package/src/utils/getPriceImpact.ts +1 -1
- /package/src/icons/{lifi.ts → openocean.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openocean.finance/widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Openocean Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.ts",
|
|
@@ -25,9 +25,8 @@
|
|
|
25
25
|
"unlink:sdk": "pnpm unlink --global @openocean.finance/sdk",
|
|
26
26
|
"test": "vitest run"
|
|
27
27
|
},
|
|
28
|
-
"author": "
|
|
29
|
-
|
|
30
|
-
"license": "Apache-1.0",
|
|
28
|
+
"author": "openocean",
|
|
29
|
+
"license": "ISC",
|
|
31
30
|
"keywords": [
|
|
32
31
|
"widget",
|
|
33
32
|
"openocean-widget",
|
|
@@ -45,8 +44,8 @@
|
|
|
45
44
|
"@bigmi/core": "^0.1.1",
|
|
46
45
|
"@emotion/react": "^11.14.0",
|
|
47
46
|
"@emotion/styled": "^11.14.0",
|
|
48
|
-
"@
|
|
49
|
-
"@openocean.finance/wallet-management": "
|
|
47
|
+
"@openocean.finance/widget-sdk": "^1.0.0",
|
|
48
|
+
"@openocean.finance/wallet-management": "^1.0.2",
|
|
50
49
|
"@mui/icons-material": "6.0.2",
|
|
51
50
|
"@mui/material": "^6.4.8",
|
|
52
51
|
"@mui/system": "^6.4.8",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Token } from '@lifi/sdk'
|
|
2
1
|
import type { CardProps } from '@mui/material'
|
|
2
|
+
import type { Token } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import type { ChangeEvent, ReactNode } from 'react'
|
|
4
4
|
import { useLayoutEffect, useRef } from 'react'
|
|
5
5
|
import { useTranslation } from 'react-i18next'
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { TokenAmount } from '@lifi/sdk'
|
|
2
1
|
import { FormHelperText, Skeleton, Typography } from '@mui/material'
|
|
2
|
+
import type { TokenAmount } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { useTranslation } from 'react-i18next'
|
|
4
|
+
import { useRoutes } from '../../hooks/useRoutes.js'
|
|
4
5
|
import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
|
|
5
6
|
import type { FormTypeProps } from '../../stores/form/types.js'
|
|
6
7
|
import { FormKeyHelper } from '../../stores/form/types.js'
|
|
7
8
|
import { useFieldValues } from '../../stores/form/useFieldValues.js'
|
|
8
9
|
import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
|
|
9
|
-
import { useRoutes } from '../../hooks/useRoutes.js'
|
|
10
10
|
|
|
11
11
|
export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
|
|
12
12
|
const [chainId, tokenAddress] = useFieldValues(
|
|
@@ -35,21 +35,21 @@ export const PriceFormHelperTextBase: React.FC<
|
|
|
35
35
|
const { t } = useTranslation()
|
|
36
36
|
const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
|
|
37
37
|
const tokenAmount = token
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
? formatTokenAmount(token.amount, token.decimals)
|
|
39
|
+
: '0'
|
|
40
40
|
const tokenPrice = formatTokenPrice(amount, token?.priceUSD)
|
|
41
|
-
let toTokenPrice
|
|
42
|
-
if(formType === 'to'){
|
|
43
|
-
const {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
41
|
+
let toTokenPrice
|
|
42
|
+
if (formType === 'to') {
|
|
43
|
+
const { routes } = useRoutes()
|
|
44
|
+
if (routes) {
|
|
45
|
+
const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } }
|
|
46
|
+
const toAmount = formatTokenAmount(
|
|
47
|
+
BigInt(router.toAmount),
|
|
48
|
+
router.toToken.decimals
|
|
49
|
+
)
|
|
49
50
|
toTokenPrice = formatTokenPrice(toAmount, router.toToken.priceUSD)
|
|
50
51
|
}
|
|
51
52
|
} else {
|
|
52
|
-
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
return (
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { Chain, StaticToken } from '@lifi/sdk'
|
|
2
1
|
import type { SxProps, Theme } from '@mui/material'
|
|
3
2
|
import { Badge } from '@mui/material'
|
|
3
|
+
import type { Chain, StaticToken } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { useChain } from '../../hooks/useChain.js'
|
|
5
5
|
import { useToken } from '../../hooks/useToken.js'
|
|
6
6
|
import { AvatarBadgedSkeleton } from './Avatar.js'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { EVMChain } from '@lifi/sdk'
|
|
2
1
|
import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material'
|
|
2
|
+
import type { EVMChain } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { useEffect } from 'react'
|
|
4
4
|
import { useNavigate } from 'react-router-dom'
|
|
5
5
|
import {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { EVMChain } from '@
|
|
1
|
+
import type { EVMChain } from '@openocean.finance/widget-sdk'
|
|
2
2
|
import { useChains } from '../../hooks/useChains.js'
|
|
3
3
|
import { useSwapOnly } from '../../hooks/useSwapOnly.js'
|
|
4
4
|
import { useToAddressReset } from '../../hooks/useToAddressReset.js'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { Route } from '@lifi/sdk'
|
|
2
1
|
import type { BoxProps } from '@mui/material'
|
|
3
2
|
import { Collapse } from '@mui/material'
|
|
3
|
+
import type { Route } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
|
|
5
5
|
import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
|
|
6
6
|
import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
|
|
@@ -33,12 +33,12 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
|
|
|
33
33
|
case 'ACCOUNT_NOT_DEPLOYED':
|
|
34
34
|
return <AccountNotDeployedMessage {...props} />
|
|
35
35
|
case 'TO_ADDRESS_REQUIRED':
|
|
36
|
-
const fromChainId = route?.fromChainId
|
|
37
|
-
const toChainId = route?.toChainId
|
|
36
|
+
const fromChainId = route?.fromChainId
|
|
37
|
+
const toChainId = route?.toChainId
|
|
38
38
|
if (fromChainId && toChainId && fromChainId !== toChainId) {
|
|
39
|
-
return <ToAddressRequiredMessage {...props}
|
|
39
|
+
return <ToAddressRequiredMessage {...props} />
|
|
40
40
|
}
|
|
41
|
-
return null
|
|
41
|
+
return null
|
|
42
42
|
default:
|
|
43
43
|
return null
|
|
44
44
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Route } from '@
|
|
1
|
+
import type { Route } from '@openocean.finance/widget-sdk'
|
|
2
2
|
import { useMemo } from 'react'
|
|
3
3
|
import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
|
|
4
4
|
import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { TokenAmount } from '@lifi/sdk'
|
|
2
|
-
import { isGaslessStep } from '@lifi/sdk'
|
|
3
1
|
import { ExpandLess, ExpandMore } from '@mui/icons-material'
|
|
4
2
|
import { Box, Collapse } from '@mui/material'
|
|
3
|
+
import type { TokenAmount } from '@openocean.finance/widget-sdk'
|
|
4
|
+
import { isGaslessStep } from '@openocean.finance/widget-sdk'
|
|
5
5
|
import type { MouseEventHandler } from 'react'
|
|
6
6
|
import { useState } from 'react'
|
|
7
7
|
import { useTranslation } from 'react-i18next'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { isGaslessStep } from '@lifi/sdk'
|
|
2
1
|
import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
|
|
3
2
|
import { Box, Tooltip, Typography } from '@mui/material'
|
|
3
|
+
import { isGaslessStep } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { useTranslation } from 'react-i18next'
|
|
5
5
|
import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
|
|
6
6
|
import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { Route } from '@lifi/sdk'
|
|
2
1
|
import { Collapse, Grow, Stack, Typography } from '@mui/material'
|
|
3
2
|
import { useAccount } from '@openocean.finance/wallet-management'
|
|
3
|
+
import type { Route } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { type PropsWithChildren, useEffect, useRef } from 'react'
|
|
5
5
|
import { useTranslation } from 'react-i18next'
|
|
6
6
|
import type { RouteObject } from 'react-router-dom'
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { ProcessStatus, Substatus } from '@lifi/sdk'
|
|
2
1
|
import type { Theme } from '@mui/material'
|
|
3
2
|
import {
|
|
4
3
|
Box,
|
|
@@ -8,6 +7,7 @@ import {
|
|
|
8
7
|
keyframes,
|
|
9
8
|
styled,
|
|
10
9
|
} from '@mui/material'
|
|
10
|
+
import type { ProcessStatus, Substatus } from '@openocean.finance/widget-sdk'
|
|
11
11
|
|
|
12
12
|
const getStatusColor = (
|
|
13
13
|
theme: Theme,
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { Process } from '@lifi/sdk'
|
|
2
1
|
import {
|
|
3
2
|
Done,
|
|
4
3
|
ErrorRounded,
|
|
@@ -6,6 +5,7 @@ import {
|
|
|
6
5
|
WarningRounded,
|
|
7
6
|
} from '@mui/icons-material'
|
|
8
7
|
import { darken } from '@mui/material'
|
|
8
|
+
import type { Process } from '@openocean.finance/widget-sdk'
|
|
9
9
|
import {
|
|
10
10
|
CircularIcon,
|
|
11
11
|
CircularProgressPending,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { LiFiStepExtended } from '@lifi/sdk'
|
|
2
1
|
import { LinkRounded, Wallet } from '@mui/icons-material'
|
|
3
2
|
import { Box, Link, Typography } from '@mui/material'
|
|
3
|
+
import type { OpenOceanStepExtended } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { useTranslation } from 'react-i18next'
|
|
5
5
|
import { CardIconButton } from '../Card/CardIconButton.js'
|
|
6
6
|
import { CircularIcon } from './CircularProgress.style.js'
|
|
7
7
|
|
|
8
8
|
export const DestinationWalletAddress: React.FC<{
|
|
9
|
-
step:
|
|
9
|
+
step: OpenOceanStepExtended
|
|
10
10
|
toAddress: string
|
|
11
11
|
toAddressLink: string
|
|
12
12
|
}> = ({ step, toAddress, toAddressLink }) => {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import type { LiFiStepExtended, TokenAmount } from '@lifi/sdk'
|
|
2
1
|
import { Box } from '@mui/material'
|
|
2
|
+
import type {
|
|
3
|
+
OpenOceanStepExtended,
|
|
4
|
+
TokenAmount,
|
|
5
|
+
} from '@openocean.finance/widget-sdk'
|
|
3
6
|
import { useTranslation } from 'react-i18next'
|
|
4
7
|
import { Card } from '../../components/Card/Card.js'
|
|
5
8
|
import { CardTitle } from '../../components/Card/CardTitle.js'
|
|
@@ -12,7 +15,7 @@ import { DestinationWalletAddress } from './DestinationWalletAddress.js'
|
|
|
12
15
|
import { StepProcess } from './StepProcess.js'
|
|
13
16
|
|
|
14
17
|
export const Step: React.FC<{
|
|
15
|
-
step:
|
|
18
|
+
step: OpenOceanStepExtended
|
|
16
19
|
fromToken?: TokenAmount
|
|
17
20
|
toToken?: TokenAmount
|
|
18
21
|
impactToken?: TokenAmount
|
|
@@ -37,7 +40,7 @@ export const Step: React.FC<{
|
|
|
37
40
|
const isCustomVariant = hasCustomStep && subvariant === 'custom'
|
|
38
41
|
|
|
39
42
|
switch (step.type) {
|
|
40
|
-
case '
|
|
43
|
+
case 'openocean': {
|
|
41
44
|
if (hasBridgeStep && hasSwapStep) {
|
|
42
45
|
return isCustomVariant
|
|
43
46
|
? subvariantOptions?.custom === 'deposit'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { RouteExtended, TokenAmount } from '@
|
|
1
|
+
import type { RouteExtended, TokenAmount } from '@openocean.finance/widget-sdk'
|
|
2
2
|
import { Fragment } from 'react'
|
|
3
3
|
import { StepDivider } from '../../components/StepDivider/StepDivider.js'
|
|
4
4
|
import type { WidgetSubvariant } from '../../types/widget.js'
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import type { LiFiStep, Process } from '@lifi/sdk'
|
|
2
1
|
import { OpenInNewRounded } from '@mui/icons-material'
|
|
3
2
|
import { Box, Link, Typography } from '@mui/material'
|
|
3
|
+
import type { OpenOceanStep, Process } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { useExplorer } from '../../hooks/useExplorer.js'
|
|
5
5
|
import { useProcessMessage } from '../../hooks/useProcessMessage.js'
|
|
6
6
|
import { CardIconButton } from '../Card/CardIconButton.js'
|
|
7
7
|
import { CircularProgress } from './CircularProgress.js'
|
|
8
8
|
|
|
9
9
|
export const StepProcess: React.FC<{
|
|
10
|
-
step:
|
|
10
|
+
step: OpenOceanStep
|
|
11
11
|
process: Process
|
|
12
12
|
}> = ({ step, process }) => {
|
|
13
13
|
const { title, message } = useProcessMessage(step, process)
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import type { LiFiStep, StepExtended } from '@lifi/sdk'
|
|
2
|
-
import { isGaslessStep } from '@lifi/sdk'
|
|
3
1
|
import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
|
|
4
2
|
import type { StepIconProps } from '@mui/material'
|
|
5
3
|
import {
|
|
@@ -10,11 +8,13 @@ import {
|
|
|
10
8
|
Stepper,
|
|
11
9
|
Typography,
|
|
12
10
|
} from '@mui/material'
|
|
11
|
+
import type { OpenOceanStep, StepExtended } from '@openocean.finance/widget-sdk'
|
|
12
|
+
import { isGaslessStep } from '@openocean.finance/widget-sdk'
|
|
13
13
|
import type { MouseEventHandler } from 'react'
|
|
14
14
|
import { useState } from 'react'
|
|
15
15
|
import { useTranslation } from 'react-i18next'
|
|
16
16
|
import { useAvailableChains } from '../../hooks/useAvailableChains.js'
|
|
17
|
-
import { OOToolLogo } from '../../icons/
|
|
17
|
+
import { OOToolLogo } from '../../icons/openocean.js'
|
|
18
18
|
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
|
|
19
19
|
import { HiddenUI } from '../../types/widget.js'
|
|
20
20
|
import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
|
|
@@ -304,8 +304,8 @@ export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
|
|
|
304
304
|
// FIXME: step transaction request overrides step tool details, but not included step tool details
|
|
305
305
|
const toolDetails =
|
|
306
306
|
subvariant === 'custom' &&
|
|
307
|
-
(step as unknown as
|
|
308
|
-
? (step as unknown as
|
|
307
|
+
(step as unknown as OpenOceanStep).includedSteps?.length > 0
|
|
308
|
+
? (step as unknown as OpenOceanStep).includedSteps.find(
|
|
309
309
|
(step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
|
|
310
310
|
)?.toolDetails || step.toolDetails
|
|
311
311
|
: step.toolDetails
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { LiFiStepExtended } from '@lifi/sdk'
|
|
2
1
|
import type { TypographyProps } from '@mui/material'
|
|
3
2
|
import { Typography } from '@mui/material'
|
|
3
|
+
import type { OpenOceanStepExtended } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import { useTranslation } from 'react-i18next'
|
|
5
5
|
import { getStepFeeCostsBreakdown } from '../../utils/fees.js'
|
|
6
6
|
|
|
7
7
|
export const StepFees: React.FC<
|
|
8
8
|
TypographyProps & {
|
|
9
|
-
step:
|
|
9
|
+
step: OpenOceanStepExtended
|
|
10
10
|
}
|
|
11
11
|
> = ({ step, ...other }) => {
|
|
12
12
|
const { t } = useTranslation()
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { LiFiStep, Step } from '@lifi/sdk'
|
|
2
1
|
import type { BoxProps } from '@mui/material'
|
|
2
|
+
import type { OpenOceanStep, Step } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import type {
|
|
4
4
|
SubvariantOptions,
|
|
5
5
|
WidgetFeeConfig,
|
|
@@ -7,7 +7,7 @@ import type {
|
|
|
7
7
|
} from '../../types/widget.js'
|
|
8
8
|
|
|
9
9
|
export interface StepActionsProps extends BoxProps {
|
|
10
|
-
step:
|
|
10
|
+
step: OpenOceanStep
|
|
11
11
|
dense?: boolean
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -20,5 +20,5 @@ export interface StepDetailsLabelProps {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export interface IncludedStepsProps {
|
|
23
|
-
step:
|
|
23
|
+
step: OpenOceanStep
|
|
24
24
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { OpenOceanStepExtended } from '@openocean.finance/widget-sdk'
|
|
2
2
|
import { useEffect, useState } from 'react'
|
|
3
3
|
import { useTranslation } from 'react-i18next'
|
|
4
4
|
import { useStopwatch } from '../../hooks/timer/useStopwatch.js'
|
|
@@ -6,17 +6,17 @@ import { useSettings } from '../../stores/settings/useSettings.js'
|
|
|
6
6
|
import { formatTimer } from '../../utils/timer.js'
|
|
7
7
|
import { TimerContent } from './TimerContent.js'
|
|
8
8
|
|
|
9
|
-
const getFirstExecutionProcess = (step:
|
|
9
|
+
const getFirstExecutionProcess = (step: OpenOceanStepExtended) =>
|
|
10
10
|
step.execution?.process.at(0)
|
|
11
11
|
|
|
12
|
-
const getExecutionProcess = (step:
|
|
12
|
+
const getExecutionProcess = (step: OpenOceanStepExtended) =>
|
|
13
13
|
step.execution?.process.at(-1)
|
|
14
14
|
|
|
15
|
-
const getStartTimestamp = (step:
|
|
15
|
+
const getStartTimestamp = (step: OpenOceanStepExtended) =>
|
|
16
16
|
new Date(getFirstExecutionProcess(step)?.startedAt ?? Date.now())
|
|
17
17
|
|
|
18
18
|
export const StepTimer: React.FC<{
|
|
19
|
-
step:
|
|
19
|
+
step: OpenOceanStepExtended
|
|
20
20
|
hideInProgress?: boolean
|
|
21
21
|
}> = ({ step }) => {
|
|
22
22
|
const { i18n } = useTranslation()
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { LiFiStep, TokenAmount } from '@lifi/sdk'
|
|
2
1
|
import type { BoxProps } from '@mui/material'
|
|
3
2
|
import { Box, Grow, Skeleton, Tooltip } from '@mui/material'
|
|
3
|
+
import type { OpenOceanStep, TokenAmount } from '@openocean.finance/widget-sdk'
|
|
4
4
|
import type { FC, PropsWithChildren, ReactElement } from 'react'
|
|
5
5
|
import { useTranslation } from 'react-i18next'
|
|
6
6
|
import { useChain } from '../../hooks/useChain.js'
|
|
@@ -17,7 +17,7 @@ interface TokenProps {
|
|
|
17
17
|
token: TokenAmount
|
|
18
18
|
impactToken?: TokenAmount
|
|
19
19
|
enableImpactTokenTooltip?: boolean
|
|
20
|
-
step?:
|
|
20
|
+
step?: OpenOceanStep
|
|
21
21
|
stepVisible?: boolean
|
|
22
22
|
disableDescription?: boolean
|
|
23
23
|
isLoading?: boolean
|
|
@@ -41,11 +41,13 @@ export const TokenFallback: FC<TokenProps & BoxProps> = ({
|
|
|
41
41
|
)
|
|
42
42
|
return (
|
|
43
43
|
<TokenBase
|
|
44
|
-
token={
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
token={
|
|
45
|
+
{
|
|
46
|
+
...token,
|
|
47
|
+
priceUSD: token.priceUSD || chainToken?.priceUSD,
|
|
48
|
+
logoURI: token.logoURI || chainToken?.logoURI,
|
|
49
|
+
} as TokenAmount
|
|
50
|
+
}
|
|
49
51
|
isLoading={isLoading || isLoadingToken}
|
|
50
52
|
{...other}
|
|
51
53
|
/>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ChainType } from '@lifi/sdk'
|
|
2
1
|
import { OpenInNewRounded } from '@mui/icons-material'
|
|
3
2
|
import {
|
|
4
3
|
Avatar,
|
|
@@ -10,6 +9,7 @@ import {
|
|
|
10
9
|
Slide,
|
|
11
10
|
Typography,
|
|
12
11
|
} from '@mui/material'
|
|
12
|
+
import { ChainType } from '@openocean.finance/widget-sdk'
|
|
13
13
|
import type { MouseEventHandler } from 'react'
|
|
14
14
|
import { useRef, useState } from 'react'
|
|
15
15
|
import { useTranslation } from 'react-i18next'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ExtendedChain } from '@lifi/sdk'
|
|
2
1
|
import type { Account } from '@openocean.finance/wallet-management'
|
|
2
|
+
import type { ExtendedChain } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import type { MouseEventHandler, MutableRefObject } from 'react'
|
|
4
4
|
import type { FormType } from '../../stores/form/types.js'
|
|
5
5
|
import type { TokenAmount } from '../../types/token.js'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { RouteExtended } from '@lifi/sdk'
|
|
2
1
|
import type { TypographyProps } from '@mui/material'
|
|
2
|
+
import type { RouteExtended } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import type { MouseEventHandler } from 'react'
|
|
4
4
|
import { useTranslation } from 'react-i18next'
|
|
5
5
|
import { formatUnits } from 'viem'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { RouteExtended } from '@lifi/sdk'
|
|
2
1
|
import { LocalGasStationRounded } from '@mui/icons-material'
|
|
3
2
|
import { HelpOutline } from '@mui/icons-material'
|
|
4
3
|
import type { CardProps } from '@mui/material'
|
|
5
4
|
import { Box, Collapse, Tooltip, Typography } from '@mui/material'
|
|
5
|
+
import type { RouteExtended } from '@openocean.finance/widget-sdk'
|
|
6
6
|
import { useState } from 'react'
|
|
7
7
|
import { useTranslation } from 'react-i18next'
|
|
8
8
|
import { useChain } from '../hooks/useChain.js'
|
package/src/config/coinbase.ts
CHANGED
package/src/config/metaMask.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Chain, ChainType } from '@
|
|
2
|
-
import { getNameServiceAddress } from '@
|
|
1
|
+
import type { Chain, ChainType } from '@openocean.finance/widget-sdk'
|
|
2
|
+
import { getNameServiceAddress } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { useMutation } from '@tanstack/react-query'
|
|
4
4
|
import { useTranslation } from 'react-i18next'
|
|
5
5
|
import { getChainTypeFromAddress } from '../utils/chainType.js'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ExtendedChain } from '@
|
|
2
|
-
import { ChainType, config, getChains } from '@
|
|
1
|
+
import type { ExtendedChain } from '@openocean.finance/widget-sdk'
|
|
2
|
+
import { ChainType, config, getChains } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { useQuery } from '@tanstack/react-query'
|
|
4
4
|
import { useCallback } from 'react'
|
|
5
5
|
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
|
package/src/hooks/useChains.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ChainType } from '@
|
|
1
|
+
import type { ChainType } from '@openocean.finance/widget-sdk'
|
|
2
2
|
import { useMemo } from 'react'
|
|
3
3
|
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
|
|
4
4
|
import type { FormType } from '../stores/form/types.js'
|
package/src/hooks/useExplorer.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Chain } from '@
|
|
1
|
+
import type { Chain } from '@openocean.finance/widget-sdk'
|
|
2
2
|
import { useAvailableChains } from '../hooks/useAvailableChains.js'
|
|
3
3
|
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
|
|
4
4
|
|
|
@@ -39,7 +39,9 @@ export const useExplorer = () => {
|
|
|
39
39
|
return txLink
|
|
40
40
|
}
|
|
41
41
|
if (!chain) {
|
|
42
|
-
throw new Error(
|
|
42
|
+
throw new Error(
|
|
43
|
+
'Chain parameter is required for getting transaction link'
|
|
44
|
+
)
|
|
43
45
|
}
|
|
44
46
|
const resolvedChain = resolveChain(chain)
|
|
45
47
|
if (!resolvedChain) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { RouteExtended } from '@lifi/sdk'
|
|
2
1
|
import { useAccount } from '@openocean.finance/wallet-management'
|
|
2
|
+
import type { RouteExtended } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { keepPreviousData, useQuery } from '@tanstack/react-query'
|
|
4
4
|
import { parseUnits } from 'viem'
|
|
5
5
|
import { useFieldValues } from '../stores/form/useFieldValues.js'
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
type ChainId,
|
|
3
|
+
getGasRecommendation,
|
|
4
|
+
} from '@openocean.finance/widget-sdk'
|
|
2
5
|
import { useQuery } from '@tanstack/react-query'
|
|
3
6
|
import { useAvailableChains } from './useAvailableChains.js'
|
|
4
7
|
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import type { EVMChain, RouteExtended, Token } from '@lifi/sdk'
|
|
2
|
-
import { isRelayerStep } from '@lifi/sdk'
|
|
3
1
|
import { useAccount } from '@openocean.finance/wallet-management'
|
|
2
|
+
import type {
|
|
3
|
+
EVMChain,
|
|
4
|
+
RouteExtended,
|
|
5
|
+
Token,
|
|
6
|
+
} from '@openocean.finance/widget-sdk'
|
|
7
|
+
import { isRelayerStep } from '@openocean.finance/widget-sdk'
|
|
4
8
|
import { useQuery } from '@tanstack/react-query'
|
|
5
9
|
import { useAvailableChains } from './useAvailableChains.js'
|
|
6
10
|
import { useIsContractAddress } from './useIsContractAddress.js'
|
|
@@ -120,7 +124,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
|
|
|
120
124
|
t.chainId === gasCosts[chainId].token.chainId &&
|
|
121
125
|
t.address === gasCosts[chainId].token.address
|
|
122
126
|
)?.amount ?? 0n
|
|
123
|
-
|
|
127
|
+
|
|
124
128
|
const insufficient =
|
|
125
129
|
gasTokenBalance <= 0n ||
|
|
126
130
|
gasTokenBalance < gasCosts[chainId].gasAmount ||
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ChainType, isBatchingSupported } from '@
|
|
2
|
-
import type { ExtendedChain } from '@
|
|
1
|
+
import { ChainType, isBatchingSupported } from '@openocean.finance/widget-sdk'
|
|
2
|
+
import type { ExtendedChain } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { useQuery } from '@tanstack/react-query'
|
|
4
4
|
|
|
5
5
|
export function useIsBatchingSupported(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { RouteExtended } from '@lifi/sdk'
|
|
2
1
|
import { useAccount } from '@openocean.finance/wallet-management'
|
|
2
|
+
import type { RouteExtended } from '@openocean.finance/widget-sdk'
|
|
3
3
|
import { useFieldValues } from '../stores/form/useFieldValues.js'
|
|
4
4
|
import { isDelegationDesignatorCode } from '../utils/eip7702.js'
|
|
5
5
|
import { useChain } from './useChain.js'
|