ToS update (#4000)

* Revert "Revert tos changes (#3998)" This reverts commit bf7f55f. * preflight handler * lint fix * Add preflight to risk * update daily rays * remove expressjwt * update dates * remove unused method
OasisDEX · Aug 28, 2024 · a96f8c1 · a96f8c1
1 parent 573a144
commit a96f8c1
Show file tree

Hide file tree

Showing 62 changed files with 674 additions and 1,159 deletions.
diff --git a/components/portfolio/helpers/getRaysDailyChallenge.ts b/components/portfolio/helpers/getRaysDailyChallenge.ts
@@ -25,11 +25,9 @@ export const getDailyRaysBaseData = ({
 
 export const updateDailyRaysData = ({
   wallet,
-  token,
   callback,
 }: {
   wallet: Wallet
-  token: string
   callback: (data: RaysDailyChallengeResponse) => void
 }) =>
   wallet?.address &&
@@ -38,7 +36,6 @@ export const updateDailyRaysData = ({
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      authorization: 'Bearer ' + token,
     },
     body: JSON.stringify({
       address: wallet?.address,
@@ -47,4 +44,4 @@ export const updateDailyRaysData = ({
   })
     .then((res) => res.json())
     .then(callback)
-    .catch(() => callback({ loaded: true, isJwtValid: false }))
+    .catch(() => callback({ loaded: true }))
diff --git a/components/portfolio/positions/PortfolioDailyRays.tsx b/components/portfolio/positions/PortfolioDailyRays.tsx
@@ -8,13 +8,16 @@ import {
   updateDailyRaysData,
 } from 'components/portfolio/helpers/getRaysDailyChallenge'
 import { SkeletonLine } from 'components/Skeleton'
-import { jwtAuthGetToken } from 'features/shared/jwt'
+import { currentContent } from 'features/content'
+import { checkAcceptanceFromApi$ } from 'features/termsOfService/termsAcceptanceApi'
 import { TermsOfService } from 'features/termsOfService/TermsOfService'
 import { useWalletManagement } from 'features/web3OnBoard/useConnection'
 import { bonusRaysAmount, dailyRaysAmount, explodeRays } from 'helpers/dailyRays'
 import { getGradientColor, summerBrandGradient } from 'helpers/getGradientColor'
+import { useObservable } from 'helpers/observableHook'
 import { staticFilesRuntimeUrl } from 'helpers/staticPaths'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { EMPTY } from 'rxjs'
 import { rays } from 'theme/icons'
 import { Box, Button, Divider, Flex, Grid, Image, Text } from 'theme-ui'
 
@@ -34,16 +37,21 @@ const flashButton = ({
     }, 400)
   })
 
-const SignTosComponent = ({ wallet }: { wallet?: string }) => {
+const SignTosComponent = ({ isAuthorized }: { isAuthorized?: boolean }) => {
   const [signTosEnabled, setSignTosEnabled] = useState(false)
-  const jwtToken = wallet ? jwtAuthGetToken(wallet) : ''
-  if (!jwtToken && !signTosEnabled) {
+
+  if (isAuthorized || isAuthorized === undefined) {
+    return null
+  }
+
+  if (!isAuthorized && !signTosEnabled) {
     return (
       <Button variant="outlineSmall" onClick={() => setSignTosEnabled(true)} sx={{ mt: 3 }}>
         Sign Terms of service
       </Button>
     )
   }
+
   return <TermsOfService refreshAfterSign />
 }
 
@@ -70,7 +78,13 @@ export const PortfolioDailyRays = ({
     loaded: false,
   })
   const [loadingBaseRaysChallengeData, setloadingBaseRaysChallengeData] = useState(false)
-  const jwtToken = wallet?.address ? jwtAuthGetToken(wallet.address) : ''
+  const _checkAcceptanceFromApi$ = useMemo(
+    () => (wallet ? checkAcceptanceFromApi$(currentContent.tos.version, wallet.address) : EMPTY),
+    [wallet?.address],
+  )
+  const [checkAcceptanceFromApiData] = useObservable(_checkAcceptanceFromApi$)
+
+  const isAuthorized = checkAcceptanceFromApiData?.authorized
 
   useEffect(() => {
     if (!loadingBaseRaysChallengeData && !baseRaysChallengeData.loaded && wallet?.address) {
@@ -84,14 +98,13 @@ export const PortfolioDailyRays = ({
     }
   }, [baseRaysChallengeData, wallet?.address, loadingBaseRaysChallengeData])
 
-  const requiredItems = wallet?.address && wallet?.chainId && baseRaysChallengeData && jwtToken
+  const requiredItems = wallet?.address && wallet?.chainId && baseRaysChallengeData && isAuthorized
 
   const updateDailyRays = () => {
     setIsAddingPoints(true)
     requiredItems &&
       void updateDailyRaysData({
         wallet,
-        token: jwtToken,
         callback: (res) => {
           setIsAddingPoints(false)
           if (res.isJwtValid) {
@@ -117,7 +130,7 @@ export const PortfolioDailyRays = ({
     setUserError(false)
     void flashButton({ setIsExploding, small: true }).then(() => {
       if (requiredItems && baseRaysChallengeData.loaded) {
-        if (!jwtToken) {
+        if (!isAuthorized) {
           setUserError(true)
           return
         }
@@ -175,45 +188,46 @@ export const PortfolioDailyRays = ({
             borderRadius: 'round',
           }}
         >
-          {jwtToken ? (
-            <Button
-              variant="outlineSmall"
-              disabled={!requiredItems || baseRaysChallengeData?.alreadyClaimed || isAddingPoints}
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                mt: 3,
-                transition: 'box-shadow 0.5s cubic-bezier(0,1.81,.41,1.37)',
-                userSelect: 'none',
-                boxShadow: isExploding
-                  ? '-10px -6px 14px -8px #007da3,14px -8px 15px -8px #e7a77f,-11px 14px 15px -14px #e97047'
-                  : '0px',
-                animation: 'animateGradient 10s infinite linear alternate',
-                ...getGradientColor(summerBrandGradient),
-                backgroundSize: '400px',
-                '@keyframes animateGradient': {
-                  '0%': {
-                    backgroundPositionX: '50px',
-                  },
-                  '100%': {
-                    backgroundPositionX: '-160px',
+          <>
+            {isAuthorized && (
+              <Button
+                variant="outlineSmall"
+                disabled={!requiredItems || baseRaysChallengeData?.alreadyClaimed || isAddingPoints}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: 3,
+                  transition: 'box-shadow 0.5s cubic-bezier(0,1.81,.41,1.37)',
+                  userSelect: 'none',
+                  boxShadow: isExploding
+                    ? '-10px -6px 14px -8px #007da3,14px -8px 15px -8px #e7a77f,-11px 14px 15px -14px #e97047'
+                    : '0px',
+                  animation: 'animateGradient 10s infinite linear alternate',
+                  ...getGradientColor(summerBrandGradient),
+                  backgroundSize: '400px',
+                  '@keyframes animateGradient': {
+                    '0%': {
+                      backgroundPositionX: '50px',
+                    },
+                    '100%': {
+                      backgroundPositionX: '-160px',
+                    },
                   },
-                },
-              }}
-              onClick={
-                requiredItems && !baseRaysChallengeData?.alreadyClaimed
-                  ? explodeRaysHandler
-                  : () => null
-              }
-            >
-              <Icon icon={rays} color="primary60" sx={{ mr: 3 }} />
-              Claim {dailyRaysAmount} Rays now
-            </Button>
-          ) : (
+                }}
+                onClick={
+                  requiredItems && !baseRaysChallengeData?.alreadyClaimed
+                    ? explodeRaysHandler
+                    : () => null
+                }
+              >
+                <Icon icon={rays} color="primary60" sx={{ mr: 3 }} />
+                Claim {dailyRaysAmount} Rays now
+              </Button>
+            )}
             <FunctionalContextHandler>
-              <SignTosComponent wallet={wallet?.address} />
+              <SignTosComponent isAuthorized={isAuthorized} />
             </FunctionalContextHandler>
-          )}
+          </>
         </Box>
         {userError && (
           <Text as="p" variant="paragraph3" color="warning100" sx={{ mt: 3 }}>

diff --git a/components/vault/DefaultVaultHeadline.tsx b/components/vault/DefaultVaultHeadline.tsx
@@ -1,4 +1,3 @@
-import type { FollowButtonControlProps } from 'features/follow/controllers/FollowButtonControl'
 import type { PriceInfo } from 'features/shared/priceInfo.types'
 import { formatAmount, formatPercent } from 'helpers/formatters/format'
 import { moreMinutes } from 'helpers/time'
@@ -15,14 +14,12 @@ export function DefaultVaultHeadline({
   token,
   priceInfo,
   colRatio,
-  followButton,
   shareButton,
 }: {
   header: VaultHeadlineProps['header']
   token: VaultHeadlineProps['tokens']
   priceInfo: PriceInfo
   colRatio?: string
-  followButton?: FollowButtonControlProps
   shareButton?: boolean
 }) {
   const { t } = useTranslation()
@@ -72,12 +69,6 @@ export function DefaultVaultHeadline({
   }
 
   return (
-    <VaultHeadline
-      header={header}
-      tokens={token}
-      details={detailsList}
-      followButton={followButton}
-      shareButton={shareButton}
-    />
+    <VaultHeadline header={header} tokens={token} details={detailsList} shareButton={shareButton} />
   )
 }
diff --git a/components/vault/EarnVaultHeadline.tsx b/components/vault/EarnVaultHeadline.tsx
@@ -3,20 +3,8 @@ import React from 'react'
 import type { VaultHeadlineProps } from './VaultHeadline'
 import { VaultHeadline } from './VaultHeadline'
 
-export function EarnVaultHeadline({
-  header,
-  tokens,
-  details,
-  followButton,
-  shareButton,
-}: VaultHeadlineProps) {
+export function EarnVaultHeadline({ header, tokens, details, shareButton }: VaultHeadlineProps) {
   return (
-    <VaultHeadline
-      header={header}
-      tokens={tokens}
-      details={details}
-      followButton={followButton}
-      shareButton={shareButton}
-    />
+    <VaultHeadline header={header} tokens={tokens} details={details} shareButton={shareButton} />
   )
 }
diff --git a/components/vault/GeneralManageControl.tsx b/components/vault/GeneralManageControl.tsx
@@ -1,5 +1,4 @@
 import type { BigNumber } from 'bignumber.js'
-import { useMainContext } from 'components/context/MainContextProvider'
 import { useProductContext } from 'components/context/ProductContextProvider'
 import { MakerAutomationContext } from 'features/automation/contexts/MakerAutomationContext'
 import { RefinanceGeneralContextProvider } from 'features/refinance/contexts'
@@ -18,16 +17,12 @@ interface GeneralManageControlProps {
 }
 
 export function GeneralManageControl({ id }: GeneralManageControlProps) {
-  const { context$ } = useMainContext()
   const { generalManageVault$ } = useProductContext()
   const generalManageVaultWithId$ = generalManageVault$(id)
   const [generalManageVaultData, generalManageVaultError] = useObservable(generalManageVaultWithId$)
-  const [context] = useObservable(context$)
   const { chainId } = useWalletManagement()
   const { MakerTenderly } = useAppConfig('features')
 
-  const account = context?.status === 'connected' ? context.account : ''
-
   useEffect(() => {
     return () => {
       generalManageVaultData?.state.clear()
@@ -51,16 +46,7 @@ export function GeneralManageControl({ id }: GeneralManageControlProps) {
                 We need to refactor it so it accepts reactNode as modal content
               */}
               <ModalProvider>
-                <GeneralManageLayout
-                  generalManageVault={generalManageVault}
-                  followButton={{
-                    followerAddress: account,
-                    vaultId: id,
-                    chainId: chainId,
-                    protocol: 'maker',
-                  }}
-                  chainId={chainId}
-                />
+                <GeneralManageLayout generalManageVault={generalManageVault} chainId={chainId} />
               </ModalProvider>
             </RefinanceGeneralContextProvider>
           </MakerAutomationContext>

diff --git a/components/vault/GeneralManageLayout.tsx b/components/vault/GeneralManageLayout.tsx
@@ -3,7 +3,6 @@ import type { NetworkIds } from 'blockchain/networks'
 import { isSupportedAutomationIlk } from 'blockchain/tokensMetadata'
 import { guniFaq } from 'features/content/faqs/guni'
 import { GuniVaultHeader } from 'features/earn/guni/common/GuniVaultHeader'
-import type { FollowButtonControlProps } from 'features/follow/controllers/FollowButtonControl'
 import type { GeneralManageVaultState } from 'features/generalManageVault/generalManageVault.types'
 import { VaultType } from 'features/generalManageVault/vaultType.types'
 import { VaultNoticesView } from 'features/notices/VaultsNoticesView'
@@ -18,15 +17,10 @@ import { GeneralManageTabBar } from './GeneralManageTabBar'
 
 interface GeneralManageLayoutProps {
   generalManageVault: GeneralManageVaultState
-  followButton?: FollowButtonControlProps
   chainId: NetworkIds
 }
 
-export function GeneralManageLayout({
-  generalManageVault,
-  followButton,
-  chainId,
-}: GeneralManageLayoutProps) {
+export function GeneralManageLayout({ generalManageVault, chainId }: GeneralManageLayoutProps) {
   const { t } = useTranslation()
   const { ilkData, vault, priceInfo, account } = generalManageVault.state
   const colRatioPercnentage = vault.collateralizationRatio.times(100).toFixed(2)
@@ -35,19 +29,13 @@ export function GeneralManageLayout({
 
   const headlineElement =
     generalManageVault.type === VaultType.Earn ? (
-      <GuniVaultHeader
-        token={ilkData.token}
-        ilk={ilkData.ilk}
-        followButton={followButton}
-        shareButton
-      />
+      <GuniVaultHeader token={ilkData.token} ilk={ilkData.ilk} shareButton />
     ) : (
       <DefaultVaultHeadline
         header={t('vault.header', { ilk: vault.ilk, id: vault.id })}
         token={[vault.token]}
         priceInfo={priceInfo}
         colRatio={colRatioPercnentage}
-        followButton={followButton}
         shareButton
       />
     )

diff --git a/components/vault/VaultHeadline.tsx b/components/vault/VaultHeadline.tsx
@@ -8,7 +8,6 @@ import {
   twitterSharePositionText,
   twitterSharePositionVia,
 } from 'features/follow/common/ShareButton'
-import type { FollowButtonControlProps } from 'features/follow/controllers/FollowButtonControl'
 import type { ReactNode } from 'react'
 import React from 'react'
 import { Flex } from 'theme-ui'
@@ -18,7 +17,6 @@ import { VaultHeadlineDetails } from './VaultHeadlineDetails'
 
 export type VaultHeadlineProps = {
   details: HeadlineDetailsProp[]
-  followButton?: FollowButtonControlProps
   header?: ReactNode
   loading?: boolean
   shareButton?: boolean

diff --git a/features/aave/components/AavePositionHeader.tsx b/features/aave/components/AavePositionHeader.tsx
@@ -1,14 +1,11 @@
 import type { IRiskRatio } from '@oasisdex/dma-library'
 import { RiskRatio } from '@oasisdex/dma-library'
-import type { Protocol } from '@prisma/client'
 import type BigNumber from 'bignumber.js'
 import { getPriceChangeColor } from 'components/vault/VaultDetails'
 import { VaultHeadline } from 'components/vault/VaultHeadline'
 import { useAaveContext } from 'features/aave'
-import { createFollowButton } from 'features/aave/helpers/createFollowButton'
 import { useAaveEarnYields } from 'features/aave/hooks'
 import type { IStrategyConfig, ManageAaveHeaderProps } from 'features/aave/types'
-import type { FollowButtonControlProps } from 'features/follow/controllers/FollowButtonControl'
 import { AppSpinner, WithLoadingIndicator } from 'helpers/AppSpinner'
 import { WithErrorHandler } from 'helpers/errorHandlers/WithErrorHandler'
 import { formatCryptoBalance, formatPercent } from 'helpers/formatters/format'
@@ -199,20 +196,15 @@ export function headerWithDetails(minimumRiskRatio: IRiskRatio) {
   }
 }
 
-export function AavePositionHeaderNoDetails({ strategyConfig, positionId }: ManageAaveHeaderProps) {
+export function AavePositionHeaderNoDetails({ strategyConfig }: ManageAaveHeaderProps) {
   const { t } = useTranslation()
   const tokenData = tokenPairList[strategyConfig.protocol][strategyConfig.name]
-  const { protocol } = strategyConfig
-  const followButton: FollowButtonControlProps | undefined = createFollowButton(
-    positionId,
-    protocol.toLowerCase() as Protocol,
-  )
+
   return (
     <VaultHeadline
       header={t(tokenData.translationKey)}
       tokens={tokenData.tokenList}
       details={[]}
-      followButton={followButton}
       shareButton
     />
   )