Make InformationStep.tsx dismissible

WRadoslaw · Mar 14, 2024 · 62d6183 · 62d6183
1 parent 4accc7e
commit 62d6183
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 22 deletions.
diff --git 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
@@ -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<DialogButtonProps | undefined>(undefined)
   const formData = useRef<FormData | null>(null)
   const transactionData = useRef<TransactionData | null>(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
@@ -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
@@ -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 (
     <>
       <FlexBox gap={6} flow="column">
@@ -49,6 +58,11 @@ export const InformationStep = ({ type }: CommonProps) => {
             </ProsItem>
           ))}
         </FlexBox>
+        <Checkbox
+          label="Do not show this again"
+          value={hasDismissedInfo}
+          onChange={(value) => updateDismissedMessages(CHANGE_NOW_DISMISSIBLE_ID, value)}
+        />
       </FlexBox>
     </>
   )

diff --git 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 (
     <>
       <SendFundsDialog show={showSendDialog} onExitClick={toggleSendDialog} accountBalance={accountBalance} />