{steps.map((step, index) => {
@@ -19,9 +30,12 @@ export const Stepper = ({ steps, currentStep = 1, className, ...props }: TProps)
className={StyleHelper.mergeStyles(
'w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold transition-colors',
{
- 'bg-blue text-asphalt': fixedIndex < currentStep,
- 'bg-white text-asphalt': fixedIndex === currentStep,
- 'bg-gray-900 text-gray-300': fixedIndex > currentStep,
+ 'bg-blue text-asphalt': fixedIndex < currentStep && theme === 'default',
+ 'bg-gray-900 text-gray-300': fixedIndex > currentStep && theme === 'default',
+ 'bg-neon text-asphalt': fixedIndex < currentStep && theme === 'neon',
+ 'bg-gray-300 text-asphalt': fixedIndex > currentStep && theme === 'neon',
+ 'bg-white text-asphalt': fixedIndex === currentStep && currentState === 'success',
+ 'bg-pink text-asphalt': fixedIndex === currentStep && currentState === 'error',
}
)}
>
@@ -32,8 +46,10 @@ export const Stepper = ({ steps, currentStep = 1, className, ...props }: TProps)
className={StyleHelper.mergeStyles(
'text-center w-20 top-8 left-1/2 -translate-x-1/2 text-xs transition-colors absolute',
{
- 'text-blue': fixedIndex < currentStep,
- 'text-white': fixedIndex === currentStep,
+ 'text-blue': fixedIndex < currentStep && theme === 'default',
+ 'text-neon': fixedIndex < currentStep && theme === 'neon',
+ 'text-white': fixedIndex === currentStep && currentState === 'success',
+ 'text-pink': fixedIndex === currentStep && currentState === 'error',
'text-gray-300': fixedIndex > currentStep,
}
)}
@@ -45,8 +61,10 @@ export const Stepper = ({ steps, currentStep = 1, className, ...props }: TProps)
{fixedIndex < steps.length && (
diff --git a/src/renderer/src/routes/pages/Swap/SwapSuccessModalContent.tsx b/src/renderer/src/routes/pages/Swap/SwapSuccessModalContent.tsx
deleted file mode 100644
index 9bf631ca..00000000
--- a/src/renderer/src/routes/pages/Swap/SwapSuccessModalContent.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { TbReceipt } from 'react-icons/tb'
-import { SwapService, SwapServiceStatusResponse } from '@cityofzion/blockchain-service'
-import { Loader } from '@renderer/components/Loader'
-import { Separator } from '@renderer/components/Separator'
-import { bsAggregator } from '@renderer/libs/blockchainService'
-import { TBlockchainServiceKey } from '@shared/@types/blockchain'
-import { TSwapRecord } from '@shared/@types/store'
-
-type TProps = {
- swapService: SwapService= currentStep,
+ 'border-blue': fixedIndex < currentStep && theme === 'default',
+ 'border-gray-900': fixedIndex >= currentStep && theme === 'default',
+ 'border-neon': fixedIndex < currentStep && theme === 'neon',
+ 'border-gray-300': fixedIndex >= currentStep && theme === 'neon',
})}
/>
)}
diff --git a/src/renderer/src/constants/swap.ts b/src/renderer/src/constants/swap.ts
index 584a53b0..a017f227 100644
--- a/src/renderer/src/constants/swap.ts
+++ b/src/renderer/src/constants/swap.ts
@@ -16,3 +16,5 @@ export const SWAP_NETWORK_BY_BLOCKCHAIN_AND_NETWORK_ID: {
'47763': [''],
},
}
+
+export const SWAP_DISCORD_LINK = 'https://discord.gg/zW26BZC5ku'
diff --git a/src/renderer/src/locales/en/modals.json b/src/renderer/src/locales/en/modals.json
index d8afdcf4..ad2ecd86 100644
--- a/src/renderer/src/locales/en/modals.json
+++ b/src/renderer/src/locales/en/modals.json
@@ -525,5 +525,32 @@
"notConnectedMessage": "No hardware wallet found! Please check your connection and search again",
"connectedMessage": "Detected your hardware wallet! Opening your wallet...",
"searchAgainButtonLabel": "Search again"
+ },
+ "swapDetails": {
+ "title": "Your swap",
+ "swapErrorMessage": " Oops! We’ve encountered an error - swap failed",
+ "transferErrorMessage": " Oops! We’ve encountered an error - transfer failed",
+ "subtitle": "Your swap details",
+ "refundedSubtitle": "You’ve been refunded",
+ "detailsHeaderLabel": "Details",
+ "detailsHeaderDescription": " We aim to complete swaps in under 7 minutes",
+ "statusPanelLabel": "Status",
+ "statusPanelSteps": [
+ "Confirm",
+ "Exchange",
+ "Complete"
+ ],
+ "routingPanelLabel": "Routing",
+ "routingPanelTransactionFromLabel": "Transaction from",
+ "routingPanelTransactionToLabel": "Transaction to",
+ "routingPanelTransactionToLabelPending": "Pending...",
+ "routingPanelTransactionFeeLabel": "Transaction fee",
+ "sentPanelLabel": "You sent",
+ "sentPanelTokenLabel": "Token",
+ "sentPanelAddressLabel": "Sending address",
+ "receivePanelLabel": "You’ll receive",
+ "receivePanelTokenLabel": "Token",
+ "receivePanelAddressLabel": "Receiving address",
+ "helpButtonLabel": "Need help? Chat with us"
}
-}
+}
\ No newline at end of file
diff --git a/src/renderer/src/locales/en/pages.json b/src/renderer/src/locales/en/pages.json
index 224bf9ab..113160fc 100644
--- a/src/renderer/src/locales/en/pages.json
+++ b/src/renderer/src/locales/en/pages.json
@@ -397,7 +397,6 @@
},
"form": {
"title": "What tokens do you want to swap?",
- "simpleSwapImgAlt": "Simple swap",
"swapFromTitle": "Swap this...",
"swapToTitle": "For this...",
"balanceLabel": "Balance",
diff --git a/src/renderer/src/routes/modals/SwapDetails/SwapDetailsModalTokenDetails.tsx b/src/renderer/src/routes/modals/SwapDetails/SwapDetailsModalTokenDetails.tsx
new file mode 100644
index 00000000..495448bb
--- /dev/null
+++ b/src/renderer/src/routes/modals/SwapDetails/SwapDetailsModalTokenDetails.tsx
@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next'
+import { BlockchainIcon } from '@renderer/components/BlockchainIcon'
+import { TBlockchainServiceKey } from '@shared/@types/blockchain'
+
+type TProps = {
+ blockchain?: TBlockchainServiceKey
+ symbol: string
+ amount: string
+}
+
+export const SwapDetailsModalTokenDetails = ({ amount, blockchain, symbol }: TProps) => {
+ const { t: commonT } = useTranslation('common')
+
+ return (
+ = {
+ confirming: 2,
+ exchanging: 3,
+ finished: 4,
+ failed: 2,
+ refunded: 2,
+}
+
+export const SwapDetailsModal = () => {
+ const modalState = useModalState()
+ const dispatch = useAppDispatch()
+ const { t } = useTranslation('modals', { keyPrefix: 'swapDetails' })
+
+ const [swapRecord, setSwapRecord] = useState(modalState.swapRecord)
+
+ const timeoutRef = useRef()
+
+ const service = bsAggregator.blockchainServicesByName[swapRecord.account.blockchain]
+
+ const handleHelpClick = () => {
+ window.open(SWAP_DISCORD_LINK, '_blank')
+ }
+
+ useEffect(() => {
+ const getStatus = async () => {
+ if (!swapRecord.swapId) return
+
+ try {
+ const response = await swapServiceHelper.getStatus(swapRecord.swapId)
+
+ const updatedSwapRecord: TSwapRecord = { ...swapRecord, swapStatus: 'failed', txTo: response.txTo }
+ setSwapRecord(updatedSwapRecord)
+ dispatch(authReducerActions.persistSwapRecord(updatedSwapRecord))
+
+ if (response && response.status === 'finished') {
+ clearTimeout(timeoutRef.current)
+ return
+ }
+ } catch {
+ // Empty block
+ }
+
+ timeoutRef.current = setTimeout(getStatus, 2500)
+ }
+
+ if (swapRecord.swapStatus !== 'finished' && swapRecord.swapId) timeoutRef.current = setTimeout(getStatus, 0)
+
+ return () => {
+ clearTimeout(timeoutRef.current)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ return (
+
+
+
+ ()
+ .with({ swapStatus: P.union('failed', 'refunded') }, () => 'error')
+ .with({ txFrom: P.nullish }, () => 'error')
+ .otherwise(() => 'success')}
+ theme="neon"
+ />
+
+
+
+ {swapRecord.txFrom && (
+
+
+ )}
+
+ {swapRecord.txFrom && (
+
+ {match({ txTo: swapRecord.txTo })
+ .with({ txTo: P.string }, ({ txTo }) => (
+
+ )}
+
+ {swapRecord.fee && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {swapRecord.account.address}
+
+
+
+
+
+
+ {swapRecord.addressTo}
+
+
+
+
+ }
+ wide
+ />
+
+ )
+}
diff --git a/src/renderer/src/routes/modalsRouter.tsx b/src/renderer/src/routes/modalsRouter.tsx
index 3a59d2ab..5c90a12e 100644
--- a/src/renderer/src/routes/modalsRouter.tsx
+++ b/src/renderer/src/routes/modalsRouter.tsx
@@ -43,6 +43,7 @@ import { DeleteModal } from './modals/PersistContact/DeleteModal'
import { SelectAccountModal } from './modals/SelectAccount'
import { SelectContact } from './modals/SelectContact'
import { SuccessModal } from './modals/Success'
+import { SwapDetailsModal } from './modals/SwapDetails'
export const modalsRouter: TRoute[] = [
{ name: 'import', type: 'side', element: []>
selectedTokenToUse: SwapServiceLoadableValue>
@@ -200,46 +196,34 @@ export const SwapPageContent = ({ account }: TProps) => {
return
}
+ const swapRecord: TSwapRecord = {
+ account: actionData.selectedAccountToUse.value,
+ addressTo: actionData.selectedAddressToReceive.value,
+ amountTo: actionData.selectedAmountToUse.value,
+ amountFrom: actionData.selectedAmountToReceive.value,
+ tokenTo: actionData.selectedTokenToUse.value,
+ tokenFrom: actionData.selectedTokenToReceive.value,
+ swapStatus: 'confirming',
+ swapProvider: 'simpleswap',
+ fee: actionData.fee,
+ }
+
try {
const swapResponse = await swapServiceRef.current.swap()
-
- const swapRecord: TSwapRecord = {
- account: actionData.selectedAccountToUse.value,
- addressTo: actionData.selectedAddressToReceive.value,
- amountTo: actionData.selectedAmountToUse.value,
- amountFrom: actionData.selectedAmountToReceive.value,
- tokenTo: actionData.selectedTokenToUse.value,
- tokenFrom: actionData.selectedTokenToReceive.value,
- swapStatus: 'confirming',
- swapProvider: 'simpleswap',
- swapId: swapResponse.id,
- transactionHashes: [swapResponse.transactionHash],
- numberOfTransactions: swapResponse.numberOfTransactions,
- fee: actionData.fee,
- }
-
- dispatch(authReducerActions.addSwapRecord(swapRecord))
-
- modalNavigate('success', {
- state: {
- heading: t('title'),
- headingIcon:
-
-
+ {blockchain &&
+ )
+}
diff --git a/src/renderer/src/routes/modals/SwapDetails/index.tsx b/src/renderer/src/routes/modals/SwapDetails/index.tsx
new file mode 100644
index 00000000..0e212962
--- /dev/null
+++ b/src/renderer/src/routes/modals/SwapDetails/index.tsx
@@ -0,0 +1,214 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MdLaunch, MdRefresh } from 'react-icons/md'
+import { TbCircleX, TbDiscountCheck, TbReceipt, TbReplace } from 'react-icons/tb'
+import { SimpleSwapServiceHelper } from '@cityofzion/bs-swap'
+import { BlockchainIcon } from '@renderer/components/BlockchainIcon'
+import { Button } from '@renderer/components/Button'
+import { Details } from '@renderer/components/Details'
+import { Separator } from '@renderer/components/Separator'
+import { Stepper, TStepperCurrentState } from '@renderer/components/Stepper'
+import { SWAP_DISCORD_LINK } from '@renderer/constants/swap'
+import { StringHelper } from '@renderer/helpers/StringHelper'
+import { useModalState } from '@renderer/hooks/useModalRouter'
+import { useAppDispatch } from '@renderer/hooks/useRedux'
+import { SideModalLayout } from '@renderer/layouts/SideModal'
+import { bsAggregator } from '@renderer/libs/blockchainService'
+import { authReducerActions } from '@renderer/store/reducers/AuthReducer'
+import { TSwapRecord } from '@shared/@types/store'
+import { match, P } from 'ts-pattern'
+
+import { SwapDetailsModalTokenDetails } from './SwapDetailsModalTokenDetails'
+
+type TState = {
+ swapRecord: TSwapRecord
+}
+
+const swapServiceHelper = new SimpleSwapServiceHelper(import.meta.env.VITE_SIMPLE_SWAP_API_KEY ?? '')
+
+const stepsByStatus: Record
+ {swapRecord.swapStatus === 'failed' || swapRecord.swapStatus === 'refunded' ? (
+
+
+
+ {match({ swapStatus: swapRecord.swapStatus, txFrom: swapRecord.txFrom })
+ .with({ swapStatus: 'refunded', txFrom: P.nullish }, () => (
+
+
+ {t('transferErrorMessage')}
+ )) + .with({ swapStatus: P.union('refunded', 'failed'), txFrom: P.string }, () => ( +{t('swapErrorMessage')}
+ )) + .run()} + ++ {match({ swapStatus: swapRecord.swapStatus }) + .with({ swapStatus: 'refunded' }, () => t('refundedSubtitle')) + .otherwise(() => t('subtitle'))} +
+
+
+
+ {swapRecord.tokenTo.blockchain &&
+ ))
+ .otherwise(() => (
+
+ {t('routingPanelTransactionToLabelPending')}
+
+ ))}
+
-
- )
-}
diff --git a/src/renderer/src/routes/pages/Swap/SwapPageContent.tsx b/src/renderer/src/routes/pages/Swap/SwapPageContent.tsx
index 5766514b..7787bff6 100644
--- a/src/renderer/src/routes/pages/Swap/SwapPageContent.tsx
+++ b/src/renderer/src/routes/pages/Swap/SwapPageContent.tsx
@@ -1,7 +1,7 @@
import { ChangeEvent, Fragment, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { MdArrowForward, MdInfoOutline } from 'react-icons/md'
-import { TbArrowDown, TbReplace, TbStepInto, TbStepOut, TbUsers, TbWallet } from 'react-icons/tb'
+import { TbArrowDown, TbStepInto, TbStepOut, TbUsers, TbWallet } from 'react-icons/tb'
import { VscCircleFilled } from 'react-icons/vsc'
import {
Account,
@@ -13,7 +13,6 @@ import {
SwapServiceValidateValue,
} from '@cityofzion/blockchain-service'
import { SimpleSwapService } from '@cityofzion/bs-swap'
-import simpleSwapLogo from '@renderer/assets/images/simple-swap-logo.png'
import { ActionStep } from '@renderer/components/ActionStep'
import { AlertErrorBanner } from '@renderer/components/AlertErrorBanner'
import { Button } from '@renderer/components/Button'
@@ -40,9 +39,6 @@ import { authReducerActions } from '@renderer/store/reducers/AuthReducer'
import { TBlockchainServiceKey } from '@shared/@types/blockchain'
import { IAccountState, TContactAddress, TSwapRecord } from '@shared/@types/store'
-import { SwapErrorModalContent } from './SwapErrorModalContent'
-import { SwapSuccessModalContent } from './SwapSuccessModalContent'
-
type TActionsData = {
availableTokensToUse: SwapServiceLoadableValue{t('errorModal.text')}
- -
- {t('errorModal.errorMessageLabel')}
-
- - {error} -
-{t('explanation.description2')}
- {t('explanation.useTitle')}
- 
-
- {label}
-
- {value}
-
- )
-}
-
-export const SwapSuccessModalContent = ({ swapRecord, swapService }: TProps) => {
- const { t } = useTranslation('pages', { keyPrefix: 'swap.form.sendSuccess' })
- const [statusResponse, setStatusResponse] = useState
- -
- {swapRecord.fee}
-
- {bsAggregator.blockchainServicesByName[swapRecord.account.blockchain].feeToken.symbol}
-
-
- }
- />
- )}
-
-
-
- )
- })}
-
-
-
-
- )
-}
diff --git a/src/renderer/src/store/reducers/AuthReducer.ts b/src/renderer/src/store/reducers/AuthReducer.ts
index 1362e71f..1adafef3 100644
--- a/src/renderer/src/store/reducers/AuthReducer.ts
+++ b/src/renderer/src/store/reducers/AuthReducer.ts
@@ -231,8 +231,19 @@ const addPendingTransaction = createAsyncThunk<
}
})
-const addSwapRecord: CaseReducer
- -
- {swapRecord.amountTo}
- {swapRecord.tokenTo.symbol}
-
- }
- />
-
-
- -
- {swapRecord.amountFrom}
- {swapRecord.tokenFrom.symbol}
-
- }
- />
-
-
-
-
-
- -
- {statusResponse.status}
- {statusResponse.status !== 'finished' && statusResponse.status !== 'failed' && (
-
- }
- />
-
-