feat: set background gradient on nfa detail page

ui/src/app.context.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { createContext } from './utils';
+
+export type AppContext = {
+  backgroundColor: string;
+  setBackgroundColor: (color: string) => void;
+};
+
+const [AppProvider, useContext] = createContext<AppContext>({
+  name: 'App.Context',
+  hookName: 'App.useContext',
+  providerName: 'App.Provider',
+});
+
+export abstract class App {
+  static readonly useContext = useContext;
+  static readonly Provider: React.FC<App.AppProps> = ({ children }) => {
+    const [backgroundColor, setBackgroundColor] = useState('');
+
+    return (
+      <AppProvider value={{ backgroundColor, setBackgroundColor }}>
+        {children}
+      </AppProvider>
+    );
+  };
+}
+
+export namespace App {
+  export type AppProps = {
+    children: React.ReactNode;
+  };
+}

ui/src/app.tsx

@@ -2,6 +2,7 @@ import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import { themeGlobals } from '@/theme/globals';
 
+import { App as AppContext } from './app.context';
 import { AppPage, ToastProvider } from './components';
 import {
   ComponentsTest,
@@ -17,17 +18,19 @@ export const App: React.FC = () => {
     <>
       <HashRouter>
         <ToastProvider />
-        <AppPage>
-          <Routes>
-            <Route path="/" element={<ExploreView />} />
-            <Route path="/mint" element={<Mint />} />
-            <Route path="/create-ap/:id" element={<CreateAP />} />
-            <Route path="/nfa/:id" element={<IndexedNFAView />} />
-            {/** TODO remove for release */}
-            <Route path="/components-test" element={<ComponentsTest />} />
-            <Route path="*" element={<Navigate to="/" />} />
-          </Routes>
-        </AppPage>
+        <AppContext.Provider>
+          <AppPage>
+            <Routes>
+              <Route path="/" element={<ExploreView />} />
+              <Route path="/mint" element={<Mint />} />
+              <Route path="/create-ap/:id" element={<CreateAP />} />
+              <Route path="/nfa/:id" element={<IndexedNFAView />} />
+              {/** TODO remove for release */}
+              <Route path="/components-test" element={<ComponentsTest />} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </Routes>
+          </AppPage>
+        </AppContext.Provider>
       </HashRouter>
     </>
   );

ui/src/components/layout/nav-bar/nav-bar.styles.ts

@@ -19,7 +19,6 @@ export const NavBarStyles = {
       content: '""',
       position: 'absolute',
       inset: 0,
-      backgroundColor: alphaColor('black', 0.8),
       backdropFilter: 'blur(4px)',
       zIndex: -1,
     },

ui/src/components/layout/page/app-page.tsx

@@ -1,3 +1,4 @@
+import { App } from '@/app.context';
 import { NavBar } from '@/components';
 
 import { PageStyles as PS } from './page.styles';
@@ -7,8 +8,15 @@ export type AppPageProps = {
 };
 
 export const AppPage: React.FC<AppPageProps> = ({ children }: AppPageProps) => {
+  const { backgroundColor } = App.useContext();
+  const background = `linear-gradient(180deg, #${backgroundColor}59 0%, #000000 30%)`;
+
   return (
-    <PS.Container>
+    <PS.Container
+      css={{
+        background: background,
+      }}
+    >
       <NavBar />
       <PS.Content as="main">{children}</PS.Content>
     </PS.Container>

ui/src/utils/color.ts

@@ -10,6 +10,5 @@ export const parseColorToNumber = (color: string): number => {
  * Converts string number to hex color string.
  */
 export const parseNumberToHexColor = (color: number): string => {
-  const hexColor = color.toString(16);
-  return hexColor;
+  return `${`000000${color.toString(16)}`.slice(-6)}`;
 };

ui/src/views/explore/explore-list/nfa-search.styles.ts

@@ -1,4 +1,4 @@
-import { Flex, Icon, Input } from '@/components';
+import { Flex, Icon } from '@/components';
 import { styled } from '@/theme';
 
 export const NFASearchFragmentStyles = {

ui/src/views/indexed-nfa/fragments/aside.fragment.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button, Flex, Icon, NFAPreview } from '@/components';
+import { parseNumberToHexColor } from '@/utils/color';
 
 import { IndexedNFA } from '../indexed-nfa.context';
 import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
@@ -10,8 +11,7 @@ const Preview: React.FC = () => {
   const { nfa } = IndexedNFA.useContext();
 
   const color = useMemo(
-    // TODO: replace with util function
-    () => `#${`000000${nfa.color.toString(16)}`.slice(-6)}`,
+    () => `#${parseNumberToHexColor(nfa.color ?? '')}`,
     [nfa]
   );
 

ui/src/views/indexed-nfa/indexed-nfa.tsx

@@ -1,10 +1,13 @@
 import { useQuery } from '@apollo/client';
 import { ethers } from 'ethers';
+import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { App } from '@/app.context';
 import { getNFADocument } from '@/graphclient';
 import { NFAMock } from '@/mocks';
 import { AppLog } from '@/utils';
+import { parseNumberToHexColor } from '@/utils/color';
 
 import {
   IndexedNFAAsideFragment,
@@ -16,8 +19,15 @@ import { IndexedNFAStyles as S } from './indexed-nfa.styles';
 
 export const IndexedNFAView: React.FC = () => {
   const { id } = useParams<{ id: string }>();
+  const { setBackgroundColor } = App.useContext();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    return () => {
+      setBackgroundColor('000000');
+    };
+  }, [setBackgroundColor]);
+
   const handleError = (error: unknown): void => {
     AppLog.errorToast(
       `It was not possible to find the NFA with id "${id}"`,
@@ -33,6 +43,8 @@ export const IndexedNFAView: React.FC = () => {
     },
     onCompleted(data) {
       if (!data.token) handleError(new Error('Token not found'));
+      if (data.token?.color)
+        setBackgroundColor(parseNumberToHexColor(data.token.color));
     },
     onError(error) {
       handleError(error);