fix: replacing kyper token provider with a stub

package.json

@@ -46,9 +46,9 @@
     "@emotion/styled": "^11.14.1",
     "@kyper/hooks": "^1.3.0",
     "@kyper/icon": "^1.22.0",
-    "@kyper/tokenprovider": "^4.4.0",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
+    "@mxenabled/design-tokens": "^1.0.3",
     "@mxenabled/mxui": "^2.10.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/node": "^22.1.0",

src/Connect.tsx

@@ -6,7 +6,7 @@ import _isNil from 'lodash/isNil'
 import _toLower from 'lodash/toLower'
 import { Message, sha256 } from 'js-sha256'
 // import 'posthog-js/dist/recorder-v2' // Added for security requirements to use PostHog Session Recording
-import { TokenContext } from '@kyper/tokenprovider'
+import { TokenContext } from 'src/context/LegacyTokenProvider'
 import { usePrevious } from '@kyper/hooks'
 
 import * as connectActions from 'src/redux/actions/Connect'

src/ConnectedTokenProvider.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 
 import { ThemeProvider } from '@mui/material'
 import { createMXTheme } from '@mxenabled/mxui'
-import { TokenProvider, THEMES } from '@kyper/tokenprovider'
+import { LegacyTokenProvider, THEMES } from 'src/context/LegacyTokenProvider'
 
 import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme'
 
@@ -52,17 +52,17 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
         Container: mxTheme.palette.background.paper,
       },
     }),
-    // TokenProvider keys a useEffect off this object's identity, so it has to
+    // LegacyTokenProvider keys a useEffect off this object's identity, so it has to
     // be stable across renders.
     [isDarkModeEnabled, mxTheme.palette.primary, mxTheme.palette.background],
   )
 
   return (
-    <TokenProvider
+    <LegacyTokenProvider
       theme={isDarkModeEnabled ? THEMES.DARK : colorScheme}
       tokenOverrides={kyperTokenOverrides}
     >
       <ThemeProvider theme={mxTheme}>{children}</ThemeProvider>
-    </TokenProvider>
+    </LegacyTokenProvider>
   )
 }

src/components/ActionTile.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Text, Icon } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
 

src/components/ActionableUtilityRow.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { Text } from '@mxenabled/mxui'
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Button } from '@mui/material'
 
 interface ActionableUtilityRowProps {

src/components/ClientLogo.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { css } from '@mxenabled/cssinjs'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import { selectColorScheme } from 'src/redux/reducers/configSlice'
 import { COLOR_SCHEME } from 'src/const/Connect'

src/components/ConnectInstitutionHeader.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { InstitutionLogo } from '@mxenabled/mxui'
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import { selectColorScheme } from 'src/redux/reducers/configSlice'
 import { COLOR_SCHEME } from 'src/const/Connect'

src/components/ConnectLogoHeader.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { InstitutionLogo } from '@mxenabled/mxui'
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import { selectColorScheme } from 'src/redux/reducers/configSlice'
 

src/components/Container.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { STEPS } from 'src/const/Connect'
 
 interface ContainerProps {

src/components/DataCluster.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Text } from '@mxenabled/mxui'
 
 export const DataCluster = (props) => {

src/components/DetailReviewItem.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Icon, Text } from '@mxenabled/mxui'
 import { Text as ProtectedText } from 'src/privacy/components'
 import { IconButton } from '@mui/material'

src/components/FindAccountInfo.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Text } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
 

src/components/InstitutionBlock.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { __ } from 'src/utilities/Intl'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { InstitutionLogo } from '@mxenabled/mxui'
 
 import { formatUrl } from 'src/utilities/FormatUrl'

src/components/InstitutionGridTile.js

@@ -5,7 +5,7 @@ import { css } from '@mxenabled/cssinjs'
 
 import { __ } from 'src/utilities/Intl'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { InstitutionLogo } from '@mxenabled/mxui'
 import { Button, Stack } from '@mui/material'
 

src/components/InstitutionTile.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { __ } from 'src/utilities/Intl'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import { Button } from '@mui/material'
 import { Icon, InstitutionLogo, Tag } from '@mxenabled/mxui'

src/components/InstructionList.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { css } from '@mxenabled/cssinjs'
 import DOMPurify from 'dompurify'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Text } from '@mxenabled/mxui'
 
 import { goToUrlLink } from 'src/utilities/global'

src/components/RenderConnectStep.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import _isEmpty from 'lodash/isEmpty'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import * as connectActions from 'src/redux/actions/Connect'
 

src/components/StickyComponentContainer.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 interface StickyComponentContainerProps {
   children?: React.ReactNode

src/components/StyledAccountTypeIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import { Icon } from '@mxenabled/mxui'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import { AccountTypes } from 'src/views/manualAccount/constants'
 

src/components/ViewTitle.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { Stack } from '@mui/material'
 import { Icon, Text } from '@mxenabled/mxui'
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { InfoFilled } from '@kyper/icon/InfoFilled'
 
 import { ReadableStatuses } from 'src/const/Statuses'

src/components/support/GeneralSupport.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import _isEmpty from 'lodash/isEmpty'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Text } from '@mxenabled/mxui'
 import { TextField } from 'src/privacy/input'
 import { Button } from '@mui/material'

src/components/support/Support.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useImperativeHandle } from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 
 import { SupportMenu } from 'src/components/support/SupportMenu'
 import { GeneralSupport } from 'src/components/support/GeneralSupport'

src/components/support/SupportMenu.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Icon, Text } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'

src/components/support/SupportSuccess.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
+import { useTokens } from 'src/context/LegacyTokenProvider'
 import { Text } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
 

src/context/LegacyTokenProvider.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { light, dark } from '@mxenabled/design-tokens'
+import { LegacyTokenProvider, THEMES, useTokens } from 'src/context/LegacyTokenProvider'
+
+const TokenReader = () => {
+  const tokens = useTokens()
+
+  return (
+    <div>
+      <span data-test="body">{tokens.BackgroundColor.Body}</span>
+      <span data-test="brand300">{tokens.Color.Brand300}</span>
+    </div>
+  )
+}
+
+describe('LegacyTokenProvider', () => {
+  it('returns the light tokens by default without a provider', () => {
+    render(<TokenReader />)
+
+    expect(screen.getByTestId('body')).toHaveTextContent(light.BackgroundColor.Body)
+  })
+
+  it('provides the light tokens by default', () => {
+    render(
+      <LegacyTokenProvider>
+        <TokenReader />
+      </LegacyTokenProvider>,
+    )
+
+    expect(screen.getByTestId('body')).toHaveTextContent(light.BackgroundColor.Body)
+  })
+
+  it('provides the dark tokens when the dark theme is used', () => {
+    render(
+      <LegacyTokenProvider theme={THEMES.DARK}>
+        <TokenReader />
+      </LegacyTokenProvider>,
+    )
+
+    expect(screen.getByTestId('body')).toHaveTextContent(dark.BackgroundColor.Body)
+  })
+
+  it('applies token overrides', async () => {
+    const tokenOverrides = { Color: { Brand300: '#123456' }, BackgroundColor: { Body: '#abcdef' } }
+
+    render(
+      <LegacyTokenProvider tokenOverrides={tokenOverrides}>
+        <TokenReader />
+      </LegacyTokenProvider>,
+    )
+
+    await waitFor(() => expect(screen.getByTestId('brand300')).toHaveTextContent('#123456'))
+    expect(screen.getByTestId('body')).toHaveTextContent('#abcdef')
+  })
+})

src/context/LegacyTokenProvider.tsx

@@ -0,0 +1,63 @@
+// Local copy of @kyper/tokenprovider (v4.4.0) so we no longer depend on the Kyper package.
+// Source: https://gitlab.com/mxtechnologies/mx/kyper-react/-/blob/master/packages/tokenprovider/lib/TokenProvider.js
+import React, { useEffect, useState } from 'react'
+import { light, dark, buildTheme } from '@mxenabled/design-tokens'
+import type { TokenTypes } from '@mxenabled/design-tokens'
+
+export const targets = {
+  REACT: 'react',
+  REACT_NATIVE: 'react_native',
+  NATIVE: 'native',
+} as const
+
+export const THEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+} as const
+
+type Target = (typeof targets)[keyof typeof targets]
+type Theme = (typeof THEMES)[keyof typeof THEMES]
+
+const defaultTokenOverrides = {}
+
+export const TokenContext = React.createContext<TokenTypes>(light)
+export const ReactNativeTokenContext = React.createContext<TokenTypes>(
+  buildTheme(THEMES.LIGHT, targets.REACT_NATIVE),
+)
+
+export const useTokens = (target: Target = targets.REACT, tokenOverrides = {}): TokenTypes => {
+  const contextTarget = target === targets.REACT ? TokenContext : ReactNativeTokenContext
+  const context = React.useContext(contextTarget)
+
+  return context ? context : buildTheme(THEMES.LIGHT, target, { ...tokenOverrides })
+}
+
+interface LegacyTokenProviderProps {
+  theme?: Theme | string
+  target?: typeof targets.REACT | typeof targets.REACT_NATIVE
+  tokenOverrides?: object
+  children?: React.ReactNode
+}
+
+export const LegacyTokenProvider = ({
+  theme = THEMES.LIGHT,
+  target = targets.REACT,
+  tokenOverrides = defaultTokenOverrides,
+  children,
+}: LegacyTokenProviderProps) => {
+  const [tokens, setTokens] = useState<TokenTypes>(theme === THEMES.LIGHT ? light : dark)
+
+  useEffect(() => {
+    const userSpecificTokens = buildTheme(theme, target, { ...tokenOverrides })
+
+    setTokens(userSpecificTokens)
+  }, [theme, target, tokenOverrides])
+
+  if (target === targets.REACT) {
+    return <TokenContext.Provider value={tokens}>{children}</TokenContext.Provider>
+  }
+
+  return (
+    <ReactNativeTokenContext.Provider value={tokens}>{children}</ReactNativeTokenContext.Provider>
+  )
+}