From a632ed9e5ea95023c55efa7e45df14e4752b0747 Mon Sep 17 00:00:00 2001 From: Fernando Tiberti Date: Thu, 14 Apr 2022 10:14:25 -0300 Subject: [PATCH] Add configurable Typeforms (#954) * Add configurable typeforms. * Fix lint. * Add surveys to open and manage vault pages. * Use array to track closed surveys. --- .../borrow/open/containers/OpenVaultView.tsx | 2 + .../open/containers/GuniOpenVaultView.tsx | 4 +- .../GeneralManageVaultView.tsx | 5 +- features/survey/SurveyButtons.tsx | 53 +++++++++++++++++ features/survey/index.tsx | 10 ++++ features/survey/surveysConfig.json | 22 +++++++ pages/borrow.tsx | 2 + pages/earn.tsx | 8 ++- pages/index.tsx | 2 + pages/multiply.tsx | 59 +------------------ pages/vaults/open-multiply/[ilk].tsx | 4 +- public/locales/en/common.json | 3 +- 12 files changed, 108 insertions(+), 66 deletions(-) create mode 100644 features/survey/SurveyButtons.tsx create mode 100644 features/survey/index.tsx create mode 100644 features/survey/surveysConfig.json diff --git a/features/borrow/open/containers/OpenVaultView.tsx b/features/borrow/open/containers/OpenVaultView.tsx index e551631d37..93c310d1e2 100644 --- a/features/borrow/open/containers/OpenVaultView.tsx +++ b/features/borrow/open/containers/OpenVaultView.tsx @@ -11,6 +11,7 @@ import { VaultProxyStatusCard, VaultProxySubtitle, } from 'components/vault/VaultProxy' +import { Survey } from 'features/survey' import { WithLoadingIndicator } from 'helpers/AppSpinner' import { WithErrorHandler } from 'helpers/errorHandlers/WithErrorHandler' import { useObservable } from 'helpers/observableHook' @@ -148,6 +149,7 @@ export function OpenVaultView({ ilk }: { ilk: string }) { {(openVault) => ( + )} diff --git a/features/earn/guni/open/containers/GuniOpenVaultView.tsx b/features/earn/guni/open/containers/GuniOpenVaultView.tsx index 7338df15b9..657c804ac5 100644 --- a/features/earn/guni/open/containers/GuniOpenVaultView.tsx +++ b/features/earn/guni/open/containers/GuniOpenVaultView.tsx @@ -1,4 +1,5 @@ import { useAppContext } from 'components/AppContextProvider' +import { Survey } from 'features/survey' import { useTranslation } from 'next-i18next' import React from 'react' import { Container } from 'theme-ui' @@ -7,7 +8,6 @@ import { OpenMultiplyVaultContainer } from '../../../../../components/vault/comm import { VaultContainerSpinner, WithLoadingIndicator } from '../../../../../helpers/AppSpinner' import { WithErrorHandler } from '../../../../../helpers/errorHandlers/WithErrorHandler' import { useObservable } from '../../../../../helpers/observableHook' -import { MultiplySurveyButtons } from '../../../../../pages/multiply' import { GuniVaultHeader } from '../../common/GuniVaultHeader' import { GuniOpenMultiplyVaultDetails } from './GuniOpenMultiplyVaultDetails' import { GuniOpenMultiplyVaultForm } from './GuniOpenMultiplyVaultForm' @@ -49,7 +49,7 @@ export function GuniOpenVaultView({ ilk }: { ilk: string }) { form={} clear={openVault.clear} /> - + )} diff --git a/features/generalManageVault/GeneralManageVaultView.tsx b/features/generalManageVault/GeneralManageVaultView.tsx index c0f56fe18b..0bb39bd8de 100644 --- a/features/generalManageVault/GeneralManageVaultView.tsx +++ b/features/generalManageVault/GeneralManageVaultView.tsx @@ -1,5 +1,6 @@ import { BigNumber } from 'bignumber.js' import { ManageVaultContainer } from 'features/borrow/manage/containers/ManageVaultContainer' +import { Survey } from 'features/survey' import React from 'react' import { Container } from 'theme-ui' @@ -9,7 +10,6 @@ import { DefaultVaultHeader } from '../../components/vault/DefaultVaultHeader' import { VaultContainerSpinner, WithLoadingIndicator } from '../../helpers/AppSpinner' import { WithErrorHandler } from '../../helpers/errorHandlers/WithErrorHandler' import { useObservable } from '../../helpers/observableHook' -import { MultiplySurveyButtons } from '../../pages/multiply' import { GuniVaultHeader } from '../earn/guni/common/GuniVaultHeader' import { GuniManageMultiplyVaultDetails } from '../earn/guni/manage/containers/GuniManageMultiplyVaultDetails' import { GuniManageMultiplyVaultForm } from '../earn/guni/manage/containers/GuniManageMultiplyVaultForm' @@ -78,6 +78,7 @@ export function GeneralManageVaultView({ id }: { id: BigNumber }) { return ( + ) case VaultType.Insti: @@ -108,7 +109,7 @@ export function GeneralManageVaultView({ id }: { id: BigNumber }) { history={VaultHistoryView} /> )} - + ) } diff --git a/features/survey/SurveyButtons.tsx b/features/survey/SurveyButtons.tsx new file mode 100644 index 0000000000..6968a2f495 --- /dev/null +++ b/features/survey/SurveyButtons.tsx @@ -0,0 +1,53 @@ +import { Global } from '@emotion/core' +import { Popover, Sidetab } from '@typeform/embed-react' +import { useLocalStorage } from 'helpers/useLocalStorage' +import React from 'react' +import { useBreakpointIndex } from 'theme/useBreakpointIndex' + +const typeformPopoverButton = '.tf-v1-popover .tf-v1-popover-button' + +type SurveyConfig = { id: string; title: string; color: string } + +export function SurveyButtons({ id, title, color }: SurveyConfig) { + const breakpoint = useBreakpointIndex() + + const [closedSurveys, setClosedSurveys] = useLocalStorage('closed-surveys', []) + const wasClosed = closedSurveys.includes(id) + + return ( + <> + {breakpoint <= 1 && !wasClosed && ( + <> + {breakpoint === 0 && ( + ({ + [typeformPopoverButton]: { + bottom: '77px', + right: '14px', + }, + })} + /> + )} + + setClosedSurveys([...closedSurveys, id])} + /> + + )} + {breakpoint > 1 && !wasClosed && ( + setClosedSurveys([...closedSurveys, id])} + > + {title} + + )} + + ) +} diff --git a/features/survey/index.tsx b/features/survey/index.tsx new file mode 100644 index 0000000000..38aabc475c --- /dev/null +++ b/features/survey/index.tsx @@ -0,0 +1,10 @@ +import React from 'react' + +import { SurveyButtons } from './SurveyButtons' +import surveysConfig from './surveysConfig.json' + +export function Survey({ for: page }: { for: keyof typeof surveysConfig }) { + const config = surveysConfig[page] + + return config.id ? : null +} diff --git a/features/survey/surveysConfig.json b/features/survey/surveysConfig.json new file mode 100644 index 0000000000..a80edcb9f9 --- /dev/null +++ b/features/survey/surveysConfig.json @@ -0,0 +1,22 @@ +{ + "multiply": { + "id": "H52MeocX", + "title": "Help shape the future of Multiply", + "color": "#575CFE" + }, + "earn": { + "id": "", + "title": "Help shape the future of Earn", + "color": "#575CFE" + }, + "borrow": { + "id": "", + "title": "Help shape the future of Borrow", + "color": "#575CFE" + }, + "homepage": { + "id": "", + "title": "Help shape the future of Oasis.app", + "color": "#575CFE" + } +} \ No newline at end of file diff --git a/pages/borrow.tsx b/pages/borrow.tsx index b6b95a054d..9b6d505d6f 100644 --- a/pages/borrow.tsx +++ b/pages/borrow.tsx @@ -1,3 +1,4 @@ +import { Survey } from 'features/survey' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import React from 'react' @@ -15,6 +16,7 @@ function BorrowPage() { return ( + ) } diff --git a/pages/earn.tsx b/pages/earn.tsx index 8176bd30bf..fe96534dfe 100644 --- a/pages/earn.tsx +++ b/pages/earn.tsx @@ -1,3 +1,4 @@ +import { Survey } from 'features/survey' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { useRouter } from 'next/router' import React from 'react' @@ -25,7 +26,12 @@ function EarnPage() { const view = enabled ? : null - return {view} + return ( + + {view} + + + ) } EarnPage.layout = ProductPagesLayout diff --git a/pages/index.tsx b/pages/index.tsx index b51b83b87e..eebb8dc4bc 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,6 @@ import { WithConnection } from 'components/connectWallet/ConnectWallet' import { LandingPageLayout } from 'components/Layouts' +import { Survey } from 'features/survey' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import React from 'react' @@ -15,6 +16,7 @@ function LandingPage() { return ( + ) } diff --git a/pages/multiply.tsx b/pages/multiply.tsx index e378ef26c6..9a54289678 100644 --- a/pages/multiply.tsx +++ b/pages/multiply.tsx @@ -1,15 +1,10 @@ -import { Global } from '@emotion/core' -import { Popover, Sidetab } from '@typeform/embed-react' -import { useTranslation } from 'next-i18next' +import { Survey } from 'features/survey' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import React from 'react' import { WithConnection } from '../components/connectWallet/ConnectWallet' import { ProductPagesLayout } from '../components/Layouts' import { MultiplyView } from '../features/multiply/MultiplyView' -import { useLocalStorage } from '../helpers/useLocalStorage' -import { useBreakpointIndex } from '../theme/useBreakpointIndex' -import { useTheme } from '../theme/useThemeUI' export const getStaticProps = async ({ locale }: { locale: string }) => ({ props: { @@ -17,61 +12,11 @@ export const getStaticProps = async ({ locale }: { locale: string }) => ({ }, }) -const typeformPopoverButton = '.tf-v1-popover .tf-v1-popover-button' - -export function MultiplySurveyButtons() { - const breakpoint = useBreakpointIndex() - const { theme } = useTheme() - const btnColor = theme.colors.link - const { t } = useTranslation() - const [wasClosed, setWasOpenedAndClosed] = useLocalStorage( - 'multiply-survey-2022-03-23-was-closed', - false, - ) - - return ( - <> - {breakpoint <= 1 && !wasClosed && ( - <> - {breakpoint === 0 && ( - ({ - [typeformPopoverButton]: { - bottom: '77px', - right: '14px', - }, - })} - /> - )} - - setWasOpenedAndClosed(true)} - /> - - )} - {breakpoint > 1 && !wasClosed && ( - setWasOpenedAndClosed(true)} - > - {t('help-shape-the-future-of-multiply')} - - )} - - ) -} - function MultiplyPage() { return ( - + ) } diff --git a/pages/vaults/open-multiply/[ilk].tsx b/pages/vaults/open-multiply/[ilk].tsx index cf6b0cb649..162ef8b1a0 100644 --- a/pages/vaults/open-multiply/[ilk].tsx +++ b/pages/vaults/open-multiply/[ilk].tsx @@ -2,6 +2,7 @@ import { WithWalletConnection } from 'components/connectWallet/ConnectWallet' import { AppLayout } from 'components/Layouts' import { GuniOpenVaultView } from 'features/earn/guni/open/containers/GuniOpenVaultView' import { OpenMultiplyVaultView } from 'features/multiply/open/containers/OpenMultiplyVaultView' +import { Survey } from 'features/survey' import { WithTermsOfService } from 'features/termsOfService/TermsOfService' import { GetServerSidePropsContext, GetStaticPaths } from 'next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' @@ -9,7 +10,6 @@ import React from 'react' import { BackgroundLight } from 'theme/BackgroundLight' import { supportedMultiplyIlks } from '../../../helpers/productCards' -import { MultiplySurveyButtons } from '../../multiply' export const getStaticPaths: GetStaticPaths<{ ilk: string }> = async () => { const paths = supportedMultiplyIlks.map((ilk) => ({ params: { ilk } })) // these paths will be generated at built time @@ -42,7 +42,7 @@ function OpenVault({ ilk }: { ilk: string }) { ) : ( <> - + )} diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a5967c2966..000c633c6a 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1054,6 +1054,5 @@ } }, "guni-slippage-overridden": "Your custom slippage has been overridden for this vault. GUNI vaults can only be opened with a slippage at 0.1%.", - "temporary-guni-message": "The max multiple for your GUNI position has been increased by Maker governance from 20x to 50x. To take advantage of this you will need to close this vault, and open a new GUNI position. Read more in ", - "help-shape-the-future-of-multiply": "Help shape the future of Multiply" + "temporary-guni-message": "The max multiple for your GUNI position has been increased by Maker governance from 20x to 50x. To take advantage of this you will need to close this vault, and open a new GUNI position. Read more in " }