From 62d61835e7f0114adaaac322ab4424ad78dba78c Mon Sep 17 00:00:00 2001 From: WRadoslaw Date: Thu, 14 Mar 2024 21:29:37 +0100 Subject: [PATCH] Make InformationStep.tsx dismissible --- packages/atlas/src/.env | 2 +- .../ChangeNowModal/ChangeNowModal.tsx | 28 +++++++++++++------ .../ChangeNowModal/steps/FormStep.tsx | 12 ++------ .../ChangeNowModal/steps/InformationStep.tsx | 14 ++++++++++ .../PortfolioView/tabs/PortfolioTokenTab.tsx | 9 ++++-- 5 files changed, 43 insertions(+), 22 deletions(-) diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env index 42467224c1..7a867697be 100644 --- a/packages/atlas/src/.env +++ b/packages/atlas/src/.env @@ -16,7 +16,7 @@ VITE_AVATAR_SERVICE_URL=https://atlas-services.joystream.org/avatars VITE_ASSET_LOGS_URL= VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb -VITE_CHANGENOW_PUBLIC_API_KEY= +VITE_CHANGENOW_PUBLIC_API_KEY=0d8a58104f82b860a70e9460bccf62ae1e0fca4a93fd7e0c27c90448187b988f # YPP configuration VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com diff --git a/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx b/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx index b310835a9d..14d52abe10 100644 --- a/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx +++ b/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx @@ -5,9 +5,11 @@ import { SwapExpired } from '@/components/ChangeNowModal/steps/SwapExpired' import { Spinner } from '@/components/_loaders/Spinner' import { DialogButtonProps } from '@/components/_overlays/Dialog' import { DialogModal } from '@/components/_overlays/DialogModal' +import { absoluteRoutes } from '@/config/routes' +import { usePersonalDataStore } from '@/providers/personalData' import { FormData, FormStep } from './steps/FormStep' -import { InformationStep } from './steps/InformationStep' +import { CHANGE_NOW_DISMISSIBLE_ID, InformationStep } from './steps/InformationStep' import { ProgressStep } from './steps/ProgressStep' import { SummaryStep, TransactionData } from './steps/SummaryStep' import { ChangeNowModalStep, TransactionType } from './steps/types' @@ -18,7 +20,12 @@ type ChangeNowModalProps = { } export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => { - const [step, setStep] = useState(ChangeNowModalStep.INFO) + const hasDismissedInfo = + usePersonalDataStore((state) => + state.dismissedMessages.some((message) => message.id === CHANGE_NOW_DISMISSIBLE_ID) + ) && !!CHANGE_NOW_DISMISSIBLE_ID + const shouldOmitInfo = hasDismissedInfo && type !== 'topup' + const [step, setStep] = useState(shouldOmitInfo ? ChangeNowModalStep.FORM : ChangeNowModalStep.INFO) const [primaryButtonProps, setPrimaryButtonProps] = useState(undefined) const formData = useRef(null) const transactionData = useRef(null) @@ -52,13 +59,16 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => { } if (step === ChangeNowModalStep.PROGRESS) { - // todo uncomment when portfolio will be available - // if (primaryButtonProps) { - // return { - // text: 'Go to dashboard', - // to: absoluteRoutes.studio.portfolio() - // } - // } + if (primaryButtonProps) { + return { + text: 'Go to dashboard', + to: absoluteRoutes.viewer.portfolio(), + } + } + return undefined + } + + if (step === ChangeNowModalStep.FORM && shouldOmitInfo) { return undefined } diff --git a/packages/atlas/src/components/ChangeNowModal/steps/FormStep.tsx b/packages/atlas/src/components/ChangeNowModal/steps/FormStep.tsx index ff251f7960..dbf238af9c 100644 --- a/packages/atlas/src/components/ChangeNowModal/steps/FormStep.tsx +++ b/packages/atlas/src/components/ChangeNowModal/steps/FormStep.tsx @@ -91,16 +91,8 @@ export const FormStep = ({ setPrimaryButtonProps, onSubmit, type, initialValues setValue('validUntil', data.validUntil) } catch (e) { if (isAxiosError(e) && e.response?.data.message && e.response.status === 400) { - const moreInfoRequest = await changeNowService - .getExchangeRange(currency, isDirectionFrom ? 'sell' : 'buy') - .catch(() => undefined) - let sanitizedMessage = changeNowService.sanitizeApiErrorMessage(e.response.data.message) - const { data: rangeData } = moreInfoRequest ?? {} - if (rangeData?.minAmount && sanitizedMessage.includes('small')) { - sanitizedMessage = `Minimal amount is ${rangeData.minAmount} ${currency.legacyTicker.toUpperCase()}` - } setError('serverError', { - message: sanitizedMessage, + message: changeNowService.sanitizeApiErrorMessage(e.response.data.message), type: direction, }) return @@ -381,7 +373,7 @@ const StyledSpinner = styled(Spinner)` const InputGrid = styled.div` display: grid; - grid-template-columns: 1fr 150px; + grid-template-columns: 1fr 170px; width: 100%; grid-gap: 2px; ` diff --git a/packages/atlas/src/components/ChangeNowModal/steps/InformationStep.tsx b/packages/atlas/src/components/ChangeNowModal/steps/InformationStep.tsx index 0cb155a6b5..2788b199dc 100644 --- a/packages/atlas/src/components/ChangeNowModal/steps/InformationStep.tsx +++ b/packages/atlas/src/components/ChangeNowModal/steps/InformationStep.tsx @@ -4,6 +4,8 @@ import { SvgActionClock, SvgActionCreatorToken, SvgActionHide, SvgActionLock } f import { CommonProps } from '@/components/ChangeNowModal/steps/types' import { FlexBox } from '@/components/FlexBox' import { Text } from '@/components/Text' +import { Checkbox } from '@/components/_inputs/Checkbox' +import { usePersonalDataStore } from '@/providers/personalData' import { cVar, sizes } from '@/styles' const PROS = [ @@ -26,7 +28,14 @@ const getCopy = (type: CommonProps['type']) => { } } +export const CHANGE_NOW_DISMISSIBLE_ID = 'change-now' + export const InformationStep = ({ type }: CommonProps) => { + const hasDismissedInfo = + usePersonalDataStore((state) => + state.dismissedMessages.some((message) => message.id === CHANGE_NOW_DISMISSIBLE_ID) + ) && !!CHANGE_NOW_DISMISSIBLE_ID + const updateDismissedMessages = usePersonalDataStore((state) => state.actions.updateDismissedMessages) return ( <> @@ -49,6 +58,11 @@ export const InformationStep = ({ type }: CommonProps) => { ))} + updateDismissedMessages(CHANGE_NOW_DISMISSIBLE_ID, value)} + /> ) diff --git a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioTokenTab.tsx b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioTokenTab.tsx index 924cbc0286..00b058deb4 100644 --- a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioTokenTab.tsx +++ b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioTokenTab.tsx @@ -25,7 +25,9 @@ import { RevenueShareWidget, RevenueShareWidgetLoader } from '@/components/_crt/ import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader' import { SendFundsDialog } from '@/components/_overlays/SendTransferDialogs' import { atlasConfig } from '@/config' +import { CHANGENOW_PUBLIC_API_KEY } from '@/config/env' import { useMediaMatch } from '@/hooks/useMediaMatch' +import { useEnvironmentStore } from '@/providers/environment' import { useSubscribeAccountBalance, useTokenPrice } from '@/providers/joystream' import { useJoystreamStore } from '@/providers/joystream/joystream.store' import { useTransactionManagerStore } from '@/providers/transactions/transactions.store' @@ -41,11 +43,14 @@ const JOY_COLUMNS: TableProps['columns'] = [ { Header: '', accessor: 'utils', width: 50 }, ] -const hasChangeNowIntegration = true +const _hasChangeNowIntegration = !!CHANGENOW_PUBLIC_API_KEY const REVENUE_SHARES_PER_REFETCH = 3 let timestamp = 0 export const PortfolioTokenTab = () => { + const { nodeOverride, defaultDataEnv } = useEnvironmentStore((state) => state) + const hasChangeNowIntegration = + _hasChangeNowIntegration && (defaultDataEnv === 'production' || nodeOverride === 'production') const { memberId } = useUser() const { tokenPrice, convertHapiToUSD } = useTokenPrice() const { accountBalance } = useSubscribeAccountBalance() @@ -172,7 +177,7 @@ export const PortfolioTokenTab = () => { getLiquidTokensValue() } }, [getLiquidTokensValue, liquidCrtValue]) - + console.log('hasChangeNowIntegration', hasChangeNowIntegration) return ( <>