111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
import { useTranslation } from 'next-i18next'
|
|
import { CardinalOrientation, Walktour, WalktourLogic } from 'walktour'
|
|
import CustomTooltip from './CustomTooltip'
|
|
|
|
const AccountOnboardingTour = () => {
|
|
const { t } = useTranslation('onboarding-tours')
|
|
const renderTooltip = (tourLogic: WalktourLogic | undefined) => {
|
|
return (
|
|
<CustomTooltip hasSeenKey="account_tour_seen" tourLogic={tourLogic!} />
|
|
)
|
|
}
|
|
|
|
const steps = [
|
|
{
|
|
selector: '#account-step-zero',
|
|
title: t('account-dashboard'),
|
|
description: t('account-dashboard-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHEAST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-one',
|
|
title: t('profile-menu'),
|
|
description: t('profile-menu-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHEAST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-two',
|
|
title: t('your-accounts'),
|
|
description: t('your-accounts-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHEAST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-three',
|
|
title: t('account-value'),
|
|
description: t('account-value-desc'),
|
|
orientationPreferences: [CardinalOrientation.EASTNORTH],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-four',
|
|
title: t('health'),
|
|
description: t('health-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHWEST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-five',
|
|
title: t('free-collateral'),
|
|
description: t('free-collateral-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHWEST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-six',
|
|
title: t('leverage'),
|
|
description: t('leverage-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHWEST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-seven',
|
|
title: t('pnl'),
|
|
description: t('pnl-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHWEST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-eight',
|
|
title: t('total-interest-earned'),
|
|
description: t('total-interest-earned-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHEAST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-nine',
|
|
title: t('interest-earned'),
|
|
description: t('interest-earned-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHEAST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-ten',
|
|
title: t('rates'),
|
|
description: t('rates-desc'),
|
|
orientationPreferences: [CardinalOrientation.SOUTHEAST],
|
|
movingTarget: true,
|
|
},
|
|
{
|
|
selector: '#account-step-eleven',
|
|
title: t('account-summary'),
|
|
description: t('account-summary-desc'),
|
|
orientationPreferences: [CardinalOrientation.EASTSOUTH],
|
|
movingTarget: true,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Walktour
|
|
customTooltipRenderer={renderTooltip}
|
|
steps={steps}
|
|
updateInterval={200}
|
|
disableCloseOnClick
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default AccountOnboardingTour
|