diff --git a/packages/extension-base/src/background/KoniTypes.ts b/packages/extension-base/src/background/KoniTypes.ts index 508ddc32b9..6a758d483c 100644 --- a/packages/extension-base/src/background/KoniTypes.ts +++ b/packages/extension-base/src/background/KoniTypes.ts @@ -650,8 +650,15 @@ export interface NFTTransactionAdditionalInfo { collectionName: string; } +export interface OffRanpAdditionalInfo { + orderId: string; + service: string; +} + export type TransactionAdditionalInfo = { [ExtrinsicType.TRANSFER_XCM]: XCMTransactionAdditionalInfo, + [ExtrinsicType.TRANSFER_TOKEN]: OffRanpAdditionalInfo, + [ExtrinsicType.TRANSFER_BALANCE]: OffRanpAdditionalInfo, [ExtrinsicType.SEND_NFT]: NFTTransactionAdditionalInfo, [ExtrinsicType.MINT_VDOT]: Pick, [ExtrinsicType.MINT_VMANTA]: Pick, diff --git a/packages/extension-base/src/koni/background/handlers/State.ts b/packages/extension-base/src/koni/background/handlers/State.ts index 631a37177c..496ea824c6 100644 --- a/packages/extension-base/src/koni/background/handlers/State.ts +++ b/packages/extension-base/src/koni/background/handlers/State.ts @@ -1444,7 +1444,8 @@ export default class KoniState { estimateFee: { value: transactionValidated.estimateGas, symbol: token.symbol, - decimals: token.decimals || 18 + decimals: token.decimals || 18, + feeTokenSlug: token.slug }, id }); diff --git a/packages/extension-base/src/services/buy-service/constants/token.ts b/packages/extension-base/src/services/buy-service/constants/token.ts index 41cea6a2c1..4763fe4a64 100644 --- a/packages/extension-base/src/services/buy-service/constants/token.ts +++ b/packages/extension-base/src/services/buy-service/constants/token.ts @@ -3,7 +3,7 @@ import { BuyService, SupportService } from '@subwallet/extension-base/types'; -const DEFAULT_BUY_SERVICE: BuyService = { symbol: '', network: '' }; +const DEFAULT_BUY_SERVICE: BuyService = { symbol: '', network: '', supportSell: false }; export const DEFAULT_SERVICE_INFO: Record = { transak: { ...DEFAULT_BUY_SERVICE }, diff --git a/packages/extension-base/src/services/swap-service/utils.ts b/packages/extension-base/src/services/swap-service/utils.ts index 6dd416ab0f..4ce5040d5b 100644 --- a/packages/extension-base/src/services/swap-service/utils.ts +++ b/packages/extension-base/src/services/swap-service/utils.ts @@ -12,6 +12,9 @@ import BigN from 'bignumber.js'; export const CHAIN_FLIP_TESTNET_EXPLORER = 'https://blocks-perseverance.chainflip.io'; export const CHAIN_FLIP_MAINNET_EXPLORER = 'https://scan.chainflip.io'; +export const TRANSAK_TEST_MODE = process.env.TRANSAK_TEST_MODE !== undefined ? !!process.env.TRANSAK_TEST_MODE : true; +export const TRANSAK_URL = TRANSAK_TEST_MODE ? 'https://global-stg.transak.com' : 'https://global.transak.com'; + export const CHAIN_FLIP_SUPPORTED_MAINNET_MAPPING: Record = { [COMMON_CHAIN_SLUGS.POLKADOT]: Chains.Polkadot, [COMMON_CHAIN_SLUGS.ETHEREUM]: Chains.Ethereum, diff --git a/packages/extension-base/src/services/transaction-service/utils.ts b/packages/extension-base/src/services/transaction-service/utils.ts index 7263255745..1eccc40f4d 100644 --- a/packages/extension-base/src/services/transaction-service/utils.ts +++ b/packages/extension-base/src/services/transaction-service/utils.ts @@ -4,7 +4,7 @@ import { _ChainInfo } from '@subwallet/chain-list/types'; import { ExtrinsicDataTypeMap, ExtrinsicType } from '@subwallet/extension-base/background/KoniTypes'; import { _getBlockExplorerFromChain, _isChainTestNet, _isPureEvmChain } from '@subwallet/extension-base/services/chain-service/utils'; -import { CHAIN_FLIP_MAINNET_EXPLORER, CHAIN_FLIP_TESTNET_EXPLORER } from '@subwallet/extension-base/services/swap-service/utils'; +import { CHAIN_FLIP_MAINNET_EXPLORER, CHAIN_FLIP_TESTNET_EXPLORER, TRANSAK_URL } from '@subwallet/extension-base/services/swap-service/utils'; import { ChainflipSwapTxData } from '@subwallet/extension-base/types/swap'; // @ts-ignore @@ -82,6 +82,6 @@ export function getChainflipExplorerLink (data: ChainflipSwapTxData, chainInfo: return `${chainflipDomain}/channels/${data.depositChannelId}`; } -export function getTransakOrderLink(data: any) { - return `https://global-stg.transak.com/user/order/${data.orderId}`; -} \ No newline at end of file +export function getTransakOrderLink (orderId: string) { + return `${TRANSAK_URL}/user/order/${orderId}`; +} diff --git a/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx b/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx index 40dc423bc8..16ea9c163a 100644 --- a/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx +++ b/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx @@ -307,6 +307,7 @@ const Component: React.FC = (props: Props) => { <>
= (props: Props) => { width={52} /> )} - innerSize={52} sizeLinkIcon={36} sizeSquircleBorder={108} />
{ !!chainMigrateMode && { name={'from'} > ; const Component = ({ className, leftLogo = defaultLogo, linkIcon = defaultLinkIcon, rightLogo = defaultLogo, sizeSquircleBorder, innerSize }: Props) => { return (
- + {leftLogo}
{linkIcon}
- + {rightLogo}
diff --git a/packages/extension-web-ui/src/Popup/BuyTokens.tsx b/packages/extension-web-ui/src/Popup/BuyTokens.tsx index 2fa9acc841..da50e336f0 100644 --- a/packages/extension-web-ui/src/Popup/BuyTokens.tsx +++ b/packages/extension-web-ui/src/Popup/BuyTokens.tsx @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { AccountJson, Resolver } from '@subwallet/extension-base/background/types'; +import { BuyServiceInfo, BuyTokenInfo, SupportService } from '@subwallet/extension-base/types'; import { detectTranslate, isAccountAll } from '@subwallet/extension-base/utils'; import { BaseModal, baseServiceItems, Layout, PageWrapper, ServiceItem } from '@subwallet/extension-web-ui/components'; import { AccountSelector } from '@subwallet/extension-web-ui/components/Field/AccountSelector'; @@ -9,7 +10,7 @@ import { ServiceSelector } from '@subwallet/extension-web-ui/components/Field/Bu import { TokenItemType, TokenSelector } from '@subwallet/extension-web-ui/components/Field/TokenSelector'; import { useAssetChecker, useDefaultNavigate, useNotification, useTranslation } from '@subwallet/extension-web-ui/hooks'; import { RootState } from '@subwallet/extension-web-ui/stores'; -import { AccountType, BuyServiceInfo, BuyTokenInfo, CreateBuyOrderFunction, SupportService, ThemeProps } from '@subwallet/extension-web-ui/types'; +import { AccountType, CreateBuyOrderFunction, ThemeProps } from '@subwallet/extension-web-ui/types'; import { BuyTokensParam } from '@subwallet/extension-web-ui/types/navigation'; import { createBanxaOrder, createCoinbaseOrder, createTransakOrder, findAccountByAddress, noop, openInNewTab } from '@subwallet/extension-web-ui/utils'; import { getAccountType } from '@subwallet/extension-web-ui/utils/account/account'; @@ -65,12 +66,12 @@ function Component ({ className, modalContent, slug }: Props) { const [buyForm, setBuyForm] = useState(true); - const handleForm = (mode: string) => { + const handleForm = useCallback((mode: string) => { setBuyForm(mode === 'BUY'); - }; + }, []); - const handleBuyForm = () => handleForm('BUY'); - const handleSellForm = () => handleForm('SELL'); + const handleBuyForm = useCallback(() => handleForm('BUY'), [handleForm]); + const handleSellForm = useCallback(() => handleForm('SELL'), [handleForm]); const currentSymbol = slug || _currentSymbol; @@ -422,14 +423,12 @@ function Component ({ className, modalContent, slug }: Props) {
Buy
Sell @@ -633,7 +632,7 @@ const BuyTokens = styled(Wrapper)(({ theme: { token } }: Props) => { }, '.__service-container': { - backgroundColor: '#1A1A1A', + backgroundColor: token.colorBgSecondary, borderRadius: '0.5rem', padding: '0.25rem', height: '2.5rem', diff --git a/packages/extension-web-ui/src/Popup/Home/History/Detail/index.tsx b/packages/extension-web-ui/src/Popup/Home/History/Detail/index.tsx index ab49abb860..3c9b60823b 100644 --- a/packages/extension-web-ui/src/Popup/Home/History/Detail/index.tsx +++ b/packages/extension-web-ui/src/Popup/Home/History/Detail/index.tsx @@ -67,8 +67,12 @@ function Component ({ className = '', data, onCancel }: Props): React.ReactEleme } } - if(data.additionalInfo?.orderId && data.additionalInfo?.service === 'transak'){ - link = getTransakOrderLink(data.additionalInfo); + if ([ExtrinsicType.TRANSFER_BALANCE, ExtrinsicType.TRANSFER_TOKEN].includes(extrinsicType)) { + const additionalInfo = data.additionalInfo as TransactionAdditionalInfo[ExtrinsicType.TRANSFER_TOKEN]; + + if (additionalInfo?.orderId && additionalInfo?.service === 'transak') { + link = getTransakOrderLink(additionalInfo?.orderId); + } } return ( diff --git a/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Amount.tsx b/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Amount.tsx index fc04bd586d..287f59aabd 100644 --- a/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Amount.tsx +++ b/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Amount.tsx @@ -31,7 +31,7 @@ const Component: React.FC = (props: Props) => { const isNft = data.type === ExtrinsicType.SEND_NFT; const isMint = isTypeMint(data.type); const isLeavePool = isPoolLeave(data.type); - + const hasOrderId = data.type === ExtrinsicType.TRANSFER_TOKEN; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const additionalInfo = data.additionalInfo; @@ -99,8 +99,8 @@ const Component: React.FC = (props: Props) => { /> ) } - {additionalInfo?.orderId && ( - {additionalInfo?.orderId} + {data.additionalInfo && hasOrderId && ( + {(data.additionalInfo as TransactionAdditionalInfo[ExtrinsicType.TRANSFER_TOKEN]).orderId} )} {isMint && amountDerivative && ( diff --git a/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Layout.tsx b/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Layout.tsx index 4cbe54c4af..3f63affd96 100644 --- a/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Layout.tsx +++ b/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Layout.tsx @@ -48,6 +48,7 @@ const Component: React.FC = (props: Props) => { valueColorSchema={HistoryStatusMap[data.status].schema} /> {(data.extrinsicHash || '').startsWith('0x') ? toShort(data.extrinsicHash, 8, 9) : '...'} + {formatHistoryDate(data.time, language, 'detail')} { diff --git a/packages/extension-web-ui/src/Popup/Home/Tokens/DetailList.tsx b/packages/extension-web-ui/src/Popup/Home/Tokens/DetailList.tsx index eb2ef89100..9468f225fd 100644 --- a/packages/extension-web-ui/src/Popup/Home/Tokens/DetailList.tsx +++ b/packages/extension-web-ui/src/Popup/Home/Tokens/DetailList.tsx @@ -1,6 +1,7 @@ // Copyright 2019-2022 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 +import { BuyTokenInfo } from '@subwallet/extension-base/types'; import { TokenBalance, TokenItem } from '@subwallet/extension-web-ui/components'; import PageWrapper from '@subwallet/extension-web-ui/components/Layout/PageWrapper'; import { AccountSelectorModal } from '@subwallet/extension-web-ui/components/Modal/AccountSelectorModal'; @@ -17,7 +18,7 @@ import Banner from '@subwallet/extension-web-ui/Popup/Home/Tokens/Banner'; import { DetailModal } from '@subwallet/extension-web-ui/Popup/Home/Tokens/DetailModal'; import { DetailUpperBlock } from '@subwallet/extension-web-ui/Popup/Home/Tokens/DetailUpperBlock'; import { RootState } from '@subwallet/extension-web-ui/stores'; -import { BuyTokenInfo, EarningPoolsParam, ThemeProps } from '@subwallet/extension-web-ui/types'; +import { EarningPoolsParam, ThemeProps } from '@subwallet/extension-web-ui/types'; import { TokenBalanceItemType } from '@subwallet/extension-web-ui/types/balance'; import { getAccountType, isAccountAll, sortTokenByValue } from '@subwallet/extension-web-ui/utils'; import { ModalContext } from '@subwallet/react-ui'; diff --git a/packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx b/packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx index 42cfaf0c1b..78c252c132 100644 --- a/packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx +++ b/packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx @@ -8,7 +8,7 @@ import ReceiveQrModal from '@subwallet/extension-web-ui/components/Modal/Receive import { TokensSelectorModal } from '@subwallet/extension-web-ui/components/Modal/ReceiveModal/TokensSelectorModal'; import NoContent, { PAGE_TYPE } from '@subwallet/extension-web-ui/components/NoContent'; import { TokenGroupBalanceItem } from '@subwallet/extension-web-ui/components/TokenItem/TokenGroupBalanceItem'; -import { DEFAULT_OFF_RAMP_PARAMS, DEFAULT_SWAP_PARAMS, DEFAULT_TRANSFER_PARAMS, OFF_RAMP_DATA, SWAP_TRANSACTION, TRANSFER_TRANSACTION } from '@subwallet/extension-web-ui/constants'; +import { DEFAULT_SWAP_PARAMS, DEFAULT_TRANSFER_PARAMS, SWAP_TRANSACTION, TRANSFER_TRANSACTION } from '@subwallet/extension-web-ui/constants'; import { DataContext } from '@subwallet/extension-web-ui/contexts/DataContext'; import { HomeContext } from '@subwallet/extension-web-ui/contexts/screen/HomeContext'; import { ScreenContext } from '@subwallet/extension-web-ui/contexts/ScreenContext'; @@ -55,7 +55,7 @@ const Component = (): React.ReactElement => { const { accountBalance: { tokenGroupBalanceMap, totalBalanceInfo }, tokenGroupStructure: { sortedTokenGroups } } = useContext(HomeContext); const currentAccount = useSelector((state: RootState) => state.accountState.currentAccount); - const accounts = useSelector((state: RootState) => state.accountState.accounts); + const [, setSwapStorage] = useLocalStorage(SWAP_TRANSACTION, DEFAULT_SWAP_PARAMS); const [, setStorage] = useLocalStorage(TRANSFER_TRANSACTION, DEFAULT_TRANSFER_PARAMS); diff --git a/packages/extension-web-ui/src/Popup/OffRampLoading.tsx b/packages/extension-web-ui/src/Popup/OffRampLoading.tsx index b5449ec69a..51edb2e9f1 100644 --- a/packages/extension-web-ui/src/Popup/OffRampLoading.tsx +++ b/packages/extension-web-ui/src/Popup/OffRampLoading.tsx @@ -9,7 +9,7 @@ import { RootState } from '@subwallet/extension-web-ui/stores'; import { OffRampParams, Theme, ThemeProps } from '@subwallet/extension-web-ui/types'; import { Button, ModalContext, PageIcon, SwModal } from '@subwallet/react-ui'; import CN from 'classnames'; -import { XCircle } from 'phosphor-react'; +import { Warning, XCircle } from 'phosphor-react'; import React, { useCallback, useContext, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; @@ -17,12 +17,14 @@ import styled, { useTheme } from 'styled-components'; import { useLocalStorage } from 'usehooks-ts'; import { LoadingScreen } from '../components'; +import { removeStorage } from '../utils'; type Props = ThemeProps; +const noAccountModalId = NO_ACCOUNT_MODAL; +const redirectTransakModalId = REDIRECT_TRANSAK_MODAL; + function Component ({ className = '' }: Props): React.ReactElement { - const noAccountModalId = NO_ACCOUNT_MODAL; - const redirectTransakModalId = REDIRECT_TRANSAK_MODAL; const { token } = useTheme() as Theme; // Handle Sell Token const { accounts } = useSelector((state: RootState) => state.accountState); @@ -34,8 +36,7 @@ function Component ({ className = '' }: Props): React.ReactElement { const addresses = useMemo(() => accounts.map((account) => account.address), [accounts]); const { isWebUI } = useContext(ScreenContext); - const data = offRampData; - const TokenInfo = useGetChainAssetInfo(data.slug); + const TokenInfo = useGetChainAssetInfo(offRampData.slug); const navigate = useNavigate(); const onOpenSellToken = useCallback((data: OffRampParams) => { @@ -65,22 +66,23 @@ function Component ({ className = '' }: Props): React.ReactElement { }, [TokenInfo?.decimals, TokenInfo?.originChain, TokenInfo?.slug, setStorage, isWebUI, navigate]); useEffect(() => { - if (data.orderId) { - if (addresses.includes(data.partnerCustomerId)) { + if (offRampData.orderId) { + if (addresses.includes(offRampData.partnerCustomerId)) { activeModal(redirectTransakModalId); } else { activeModal(noAccountModalId); } } - }, [activeModal, addresses, data, redirectTransakModalId, onOpenSellToken, noAccountModalId]); + }, [activeModal, addresses, offRampData, onOpenSellToken]); const onClick = useCallback(() => { + removeStorage(OFF_RAMP_DATA); navigate('/home/tokens'); }, [navigate]); const onRedirectclick = useCallback(() => { - onOpenSellToken(data); - }, [data, onOpenSellToken]); + onOpenSellToken(offRampData); + }, [offRampData, onOpenSellToken]); const { t } = useTranslation(); const footerModal = useMemo(() => { @@ -96,18 +98,25 @@ function Component ({ className = '' }: Props): React.ReactElement { ); }, [onClick, t]); - const redirectFooterModal = useMemo(() => { + const redirectFooterModal = useMemo(() => { return ( <> + ); - }, [onRedirectclick, t]); + }, [onClick, onRedirectclick, t]); return ( <> @@ -137,18 +146,17 @@ function Component ({ className = '' }: Props): React.ReactElement { footer={redirectFooterModal} id={redirectTransakModalId} onCancel={onRedirectclick} - title={t('Send token to transak')} + title={t('Action needed')} >
- {t('Send token to transak')} + {t('To complete the transaction, you\'ll need to transfer tokens to the the address of your chosen provider. Hit "Continue" to proceed')}
diff --git a/packages/extension-web-ui/src/Popup/Root.tsx b/packages/extension-web-ui/src/Popup/Root.tsx index 2bc7968ecf..031eae7d1a 100644 --- a/packages/extension-web-ui/src/Popup/Root.tsx +++ b/packages/extension-web-ui/src/Popup/Root.tsx @@ -15,7 +15,7 @@ import useNotification from '@subwallet/extension-web-ui/hooks/common/useNotific import useUILock from '@subwallet/extension-web-ui/hooks/common/useUILock'; import { subscribeNotifications } from '@subwallet/extension-web-ui/messaging'; import { RootState } from '@subwallet/extension-web-ui/stores'; -import { ThemeProps } from '@subwallet/extension-web-ui/types'; +import { OffRampParams, ThemeProps } from '@subwallet/extension-web-ui/types'; import { removeStorage } from '@subwallet/extension-web-ui/utils'; import { changeHeaderLogo, ModalContext } from '@subwallet/react-ui'; import { NotificationProps } from '@subwallet/react-ui/es/notification/NotificationProvider'; @@ -129,13 +129,18 @@ function DefaultRoute ({ children }: {children: React.ReactNode}): React.ReactEl const navigate = useNavigate(); // Pathname query - const [storage, setStorage] = useLocalStorage(OFF_RAMP_DATA, DEFAULT_OFF_RAMP_PARAMS); - const [searchParams, setSearchParams] = useSearchParams(); - const orderId = searchParams.get('orderId') || ''; + const [, setStorage] = useLocalStorage(OFF_RAMP_DATA, DEFAULT_OFF_RAMP_PARAMS); + const [searchParams] = useSearchParams(); - const details = useMemo(() => { - return getOffRampData(orderId, searchParams); - }, [orderId, searchParams]); + const details = useMemo((): OffRampParams | null => { + const orderId = searchParams.get('orderId') || ''; + + if (orderId) { + return getOffRampData(orderId, searchParams); + } else { + return null; + } + }, [searchParams]); useSubscribeLanguage(); @@ -157,15 +162,14 @@ function DefaultRoute ({ children }: {children: React.ReactNode}): React.ReactEl ); useEffect(() => { - if (orderId) { + if (details) { setStorage(details); - } - if (storage.orderId && !isNoAccount) { - navigate(offRampLoading); + if (isNoAccount) { + navigate(offRampLoading); + } } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isNoAccount, orderId]); + }, [isNoAccount, details, setStorage, navigate]); useEffect(() => { initDataRef.current.then(() => { diff --git a/packages/extension-web-ui/src/Popup/Transaction/variants/SendFundOffRamp.tsx b/packages/extension-web-ui/src/Popup/Transaction/variants/SendFundOffRamp.tsx index ff9235d5d3..525c4a3ff2 100644 --- a/packages/extension-web-ui/src/Popup/Transaction/variants/SendFundOffRamp.tsx +++ b/packages/extension-web-ui/src/Popup/Transaction/variants/SendFundOffRamp.tsx @@ -25,7 +25,7 @@ import { approveSpending, getMaxTransfer, getOptimalTransferProcess, makeCrossCh import { CommonActionType, commonProcessReducer, DEFAULT_COMMON_PROCESS } from '@subwallet/extension-web-ui/reducer'; import { RootState } from '@subwallet/extension-web-ui/stores'; import { ChainItemType, FormCallbacks, Theme, ThemeProps, TransferParams } from '@subwallet/extension-web-ui/types'; -import { findAccountByAddress, formatBalance, ledgerMustCheckNetwork, noop, reformatAddress, removeStorage,transactionDefaultFilterAccount } from '@subwallet/extension-web-ui/utils'; +import { findAccountByAddress, formatBalance, ledgerMustCheckNetwork, reformatAddress, removeStorage, transactionDefaultFilterAccount } from '@subwallet/extension-web-ui/utils'; import { findNetworkJsonByGenesisHash } from '@subwallet/extension-web-ui/utils/chain/getNetworkJsonByGenesisHash'; import { Button, Form, Icon } from '@subwallet/react-ui'; import { Rule } from '@subwallet/react-ui/es/form'; @@ -227,12 +227,13 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE const { t } = useTranslation(); const notification = useNotification(); - const { defaultData, persistData } = useTransactionContext(); + const { defaultData } = useTransactionContext(); const { defaultSlug: sendFundSlug } = defaultData; const isFirstRender = useIsFirstRender(); const { isWebUI } = useContext(ScreenContext); const [offRampData] = useLocalStorage(OFF_RAMP_DATA, DEFAULT_OFF_RAMP_PARAMS); - + const [orderId] = useState(offRampData.orderId); + const [form] = Form.useForm(); const formDefault = useMemo((): TransferParams => { @@ -252,7 +253,7 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE const { chainInfoMap, chainStatusMap, ledgerGenericAllowNetworks } = useSelector((root) => root.chainStore); const { assetRegistry, assetSettingMap, multiChainAssetMap, xcmRefMap } = useSelector((root) => root.assetRegistry); - const { accounts, isAllAccount } = useSelector((state: RootState) => state.accountState); + const { accounts } = useSelector((state: RootState) => state.accountState); const [maxTransfer, setMaxTransfer] = useState('0'); const checkAction = usePreCheckAction(from, true, detectTranslate('The account you are using is {{accountTitle}}, you cannot send assets with it')); const isZKModeEnabled = useIsMantaPayEnabled(from); @@ -262,7 +263,7 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE return !!chainInfo && !!assetInfo && _isChainEvmCompatible(chainInfo) && destChain === chain && _isNativeToken(assetInfo); }, [chainInfoMap, chain, destChain, assetInfo]); - + const [loading, setLoading] = useState(false); const [isTransferAll, setIsTransferAll] = useState(false); const [, update] = useState({}); @@ -515,7 +516,6 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE }, [accounts, assetRegistry, notification, t]); const handleBasicSubmit = useCallback((values: TransferParams): Promise => { - const { asset, chain, destChain, from: _from, to, value } = values; let sendPromise: Promise; @@ -524,7 +524,6 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE const addressPrefix = chainInfo?.substrateInfo?.addressPrefix ?? 42; const from = reformatAddress(_from, addressPrefix); - if (chain === destChain) { // Transfer token or send fund sendPromise = makeTransfer({ @@ -533,7 +532,7 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE to: to, tokenSlug: asset, value: value, - orderId: offRampData.orderId, + orderId: orderId, service: 'transak', transferAll: isTransferAll }); @@ -551,7 +550,7 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE } return sendPromise; - }, [chainInfoMap, isTransferAll]); + }, [chainInfoMap, isTransferAll, orderId]); // todo: must refactor later, temporary solution to support SnowBridge const handleSnowBridgeSpendingApproval = useCallback((values: TransferParams): Promise => { @@ -604,6 +603,7 @@ const _SendFundOffRamp = ({ className = '', modalContent }: Props): React.ReactE if (success) { removeStorage(OFF_RAMP_DATA); + return await submitData(step + 1); } else { return false; diff --git a/packages/extension-web-ui/src/Popup/router.tsx b/packages/extension-web-ui/src/Popup/router.tsx index 8dc2b6dd3f..1a80f745e8 100644 --- a/packages/extension-web-ui/src/Popup/router.tsx +++ b/packages/extension-web-ui/src/Popup/router.tsx @@ -63,7 +63,7 @@ const Welcome = new LazyLoader('Welcome', () => import('@subwallet/extension-web const CreateDone = new LazyLoader('CreateDone', () => import('@subwallet/extension-web-ui/Popup/CreateDone')); const RedirectHandler = new LazyLoader('RedirectHandler', () => import('@subwallet/extension-web-ui/Popup/RedirectHandler')); const BuyTokens = new LazyLoader('BuyTokens', () => import('@subwallet/extension-web-ui/Popup/BuyTokens')); -const OffRampLoading = new LazyLoader('OffRampLoading', () => import('@subwallet/extension-web-ui/Popup/OffRampLoading')) +const OffRampLoading = new LazyLoader('OffRampLoading', () => import('@subwallet/extension-web-ui/Popup/OffRampLoading')); const Tokens = new LazyLoader('Tokens', () => import('@subwallet/extension-web-ui/Popup/Home/Tokens')); const TokenDetailList = new LazyLoader('TokenDetailList', () => import('@subwallet/extension-web-ui/Popup/Home/Tokens/DetailList')); diff --git a/packages/extension-web-ui/src/components/Field/BuyTokens/ServiceSelector.tsx b/packages/extension-web-ui/src/components/Field/BuyTokens/ServiceSelector.tsx index 7f5ba5cea3..f8d3458674 100644 --- a/packages/extension-web-ui/src/components/Field/BuyTokens/ServiceSelector.tsx +++ b/packages/extension-web-ui/src/components/Field/BuyTokens/ServiceSelector.tsx @@ -1,11 +1,12 @@ // Copyright 2019-2022 @subwallet/extension-web-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 +import { SupportService } from '@subwallet/extension-base/types'; import { BasicInputWrapper } from '@subwallet/extension-web-ui/components/Field/Base'; import { BaseSelectModal } from '@subwallet/extension-web-ui/components/Modal/BaseSelectModal'; import useTranslation from '@subwallet/extension-web-ui/hooks/common/useTranslation'; import { useSelectModalInputHelper } from '@subwallet/extension-web-ui/hooks/form/useSelectModalInputHelper'; -import { SupportService, ThemeProps } from '@subwallet/extension-web-ui/types'; +import { ThemeProps } from '@subwallet/extension-web-ui/types'; import { Icon, InputRef, Logo, SelectModalItem, Web3Block } from '@subwallet/react-ui'; import CN from 'classnames'; import { CheckCircle } from 'phosphor-react'; diff --git a/packages/extension-web-ui/src/components/Layout/parts/Header/Balance.tsx b/packages/extension-web-ui/src/components/Layout/parts/Header/Balance.tsx index a81cbad282..7bea8d3b05 100644 --- a/packages/extension-web-ui/src/components/Layout/parts/Header/Balance.tsx +++ b/packages/extension-web-ui/src/components/Layout/parts/Header/Balance.tsx @@ -1,6 +1,7 @@ // Copyright 2019-2022 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 +import { BuyTokenInfo } from '@subwallet/extension-base/types'; import { balanceNoPrefixFormater, formatNumber } from '@subwallet/extension-base/utils'; import { ReceiveQrModal, TokensSelectorModal } from '@subwallet/extension-web-ui/components/Modal'; import { AccountSelectorModal } from '@subwallet/extension-web-ui/components/Modal/AccountSelectorModal'; @@ -17,7 +18,7 @@ import Transaction from '@subwallet/extension-web-ui/Popup/Transaction/Transacti import SendFund from '@subwallet/extension-web-ui/Popup/Transaction/variants/SendFund'; import SendFundOffRamp from '@subwallet/extension-web-ui/Popup/Transaction/variants/SendFundOffRamp'; import { RootState } from '@subwallet/extension-web-ui/stores'; -import { BuyTokenInfo, PhosphorIcon, ThemeProps } from '@subwallet/extension-web-ui/types'; +import { PhosphorIcon, ThemeProps } from '@subwallet/extension-web-ui/types'; import { getAccountType, isAccountAll, removeStorage } from '@subwallet/extension-web-ui/utils'; import { Button, Icon, ModalContext, Number, Tag, Tooltip, Typography } from '@subwallet/react-ui'; import CN from 'classnames'; diff --git a/packages/extension-web-ui/src/constants/buy/transak.ts b/packages/extension-web-ui/src/constants/buy/transak.ts index b0f4ba69b3..e520bd1fd7 100644 --- a/packages/extension-web-ui/src/constants/buy/transak.ts +++ b/packages/extension-web-ui/src/constants/buy/transak.ts @@ -4,4 +4,4 @@ export const TRANSAK_API_KEY = process.env.TRANSAK_API_KEY || '4b767e2c-2e01-45c9-978e-d32c6f0c8900'; export const TRANSAK_TEST_MODE = process.env.TRANSAK_TEST_MODE !== undefined ? !!process.env.TRANSAK_TEST_MODE : true; -export const TRANSAK_URL = 'https://global-stg.transak.com/'; +export const TRANSAK_URL = TRANSAK_TEST_MODE ? 'https://global-stg.transak.com/' : 'https://global.transak.com'; diff --git a/packages/extension-web-ui/src/constants/localStorage.ts b/packages/extension-web-ui/src/constants/localStorage.ts index 279309f194..0d81244f12 100644 --- a/packages/extension-web-ui/src/constants/localStorage.ts +++ b/packages/extension-web-ui/src/constants/localStorage.ts @@ -20,7 +20,7 @@ export const CANCEL_UN_STAKE_TRANSACTION = 'transaction.cancel-un-stake'; export const WITHDRAW_TRANSACTION = 'transaction.withdraw'; export const CLAIM_REWARD_TRANSACTION = 'transaction.claim-reward'; -export const TRANSACTION_STORAGES = [TRANSFER_TRANSACTION, OFF_RAMP_DATA, NFT_TRANSACTION, EARN_TRANSACTION, UN_STAKE_TRANSACTION, CANCEL_UN_STAKE_TRANSACTION, WITHDRAW_TRANSACTION, CLAIM_REWARD_TRANSACTION]; +export const TRANSACTION_STORAGES = [TRANSFER_TRANSACTION, NFT_TRANSACTION, EARN_TRANSACTION, UN_STAKE_TRANSACTION, CANCEL_UN_STAKE_TRANSACTION, WITHDRAW_TRANSACTION, CLAIM_REWARD_TRANSACTION]; export const SELECTED_ACCOUNT_TYPE = 'account.selected-type'; export const SEED_PREVENT_MODAL = 'seed.prevent-modal'; diff --git a/packages/extension-web-ui/src/constants/modal.ts b/packages/extension-web-ui/src/constants/modal.ts index e853e8d6a7..fa9df3f41d 100644 --- a/packages/extension-web-ui/src/constants/modal.ts +++ b/packages/extension-web-ui/src/constants/modal.ts @@ -33,7 +33,7 @@ export const SEED_PHRASE_MODAL = 'seed-phrase-modal'; export const ADD_CONNECTION_MODAL = 'add-connection-modal'; export const ADD_NETWORK_WALLET_CONNECT_MODAL = 'add-network-wallet-connect-modal'; export const NO_ACCOUNT_MODAL = 'no-account-modal'; -export const REDIRECT_TRANSAK_MODAL = 'redirect-transak-modal' +export const REDIRECT_TRANSAK_MODAL = 'redirect-transak-modal'; export const TRANSFER_NFT_MODAL = 'transfer-nft-modal'; diff --git a/packages/extension-web-ui/src/types/buy.ts b/packages/extension-web-ui/src/types/buy.ts index a475e8771a..c8dd772ed6 100644 --- a/packages/extension-web-ui/src/types/buy.ts +++ b/packages/extension-web-ui/src/types/buy.ts @@ -1,32 +1,6 @@ // Copyright 2019-2022 @subwallet/extension-web-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -export interface BuyService { - network: string; - symbol: string; - supportSell: boolean; -} - -export type SupportService = 'transak' | 'banxa' | 'coinbase' | 'moonpay' | 'onramper'; - -export interface BuyTokenInfo { - network: string; - symbol: string; - slug: string; - support: 'ETHEREUM' | 'SUBSTRATE'; - services: Array; - serviceInfo: Record; - supportSell: boolean; -} - -export interface BuyServiceInfo { - name: string; - contactUrl: string; - termUrl: string; - policyUrl: string; - url: string; -} - interface CreateOrderParams { symbol: string; address: string; diff --git a/packages/extension-web-ui/src/utils/buy/transak.ts b/packages/extension-web-ui/src/utils/buy/transak.ts index f3f8af651f..4edaf62fb9 100644 --- a/packages/extension-web-ui/src/utils/buy/transak.ts +++ b/packages/extension-web-ui/src/utils/buy/transak.ts @@ -5,25 +5,13 @@ import { TRANSAK_API_KEY, TRANSAK_URL } from '@subwallet/extension-web-ui/consta import { CreateBuyOrderFunction } from '@subwallet/extension-web-ui/types'; import qs from 'querystring'; -interface TransakOrderParams { - apiKey: string; - defaultCryptoCurrency: string; - networks: string; - cryptoCurrencyList: string; - productsAvailed: string; - walletAddress?: string; - partnerCustomerId?: string; - redirectURL?: string; - walletRedirection?: boolean; -} - export const createTransakOrder: CreateBuyOrderFunction = (orderParams) => { const { action = 'BUY', address, network, slug = '', symbol } = orderParams; return new Promise((resolve) => { const location = window.location.origin; - const params: TransakOrderParams = { - apiKey: '307807a5-5fb3-4add-8a6c-fca4972e0470', + const params: Record = { + apiKey: TRANSAK_API_KEY, defaultCryptoCurrency: symbol, networks: network, cryptoCurrencyList: symbol, @@ -38,7 +26,7 @@ export const createTransakOrder: CreateBuyOrderFunction = (orderParams) => { params.walletRedirection = true; } - const query = qs.stringify(params as unknown as Record); + const query = qs.stringify(params); resolve(`${TRANSAK_URL}?${query}`); });