api docs pages

pages/api-docs.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import PageNextJs from 'nextjs/PageNextJs';
 
 import config from 'configs/app';
-// import SwaggerUI from 'ui/apiDocs/SwaggerUI';
+import SwaggerUI from 'ui/apiDocs/SwaggerUI';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const Page: NextPage = () => {
@@ -13,7 +13,7 @@ const Page: NextPage = () => {
       <PageTitle
         title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } API documentation` : 'API documentation' }
       />
-      { /* <SwaggerUI/> */ }
+      <SwaggerUI/>
     </PageNextJs>
   );
 };

pages/graphiql.tsx

@@ -8,10 +8,10 @@ import config from 'configs/app';
 import ContentLoader from 'ui/shared/ContentLoader';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-// const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
-//   loading: () => <ContentLoader/>,
-//   ssr: false,
-// });
+const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
+  loading: () => <ContentLoader/>,
+  ssr: false,
+});
 
 const Page: NextPage = () => {
 
@@ -20,7 +20,7 @@ const Page: NextPage = () => {
       <PageTitle
         title={ config.meta.seo.enhancedDataEnabled ? `GraphiQL ${ config.chain.name } interface` : 'GraphQL playground' }
       />
-      { /* <GraphQL/> */ }
+      <GraphQL/>
     </PageNextJs>
   );
 };

toolkit/theme/foundations/semanticTokens.ts

@@ -453,10 +453,10 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       DEFAULT: { value: '{colors.gray.400}' },
       _dark: { value: '{colors.gray.500}' },
     },
-    error: {
-      DEFAULT: { value: '{colors.red.500}' },
-      _dark: { value: '{colors.red.500}' },
-    },
+    // error: {
+    //   DEFAULT: { value: '{colors.red.500}' },
+    //   _dark: { value: '{colors.red.500}' },
+    // },
     // dialog_bg: {
     //   DEFAULT: { value: '{colors.white}' },
     //   _dark: { value: '{colors.gray.900}' },

ui/apiDocs/SwaggerUI.tsx

@@ -5,7 +5,7 @@ const SwaggerUIReact = dynamic(() => import('swagger-ui-react'), {
 });
 
 import type { SystemStyleObject } from '@chakra-ui/react';
-import { Box, useColorModeValue, useToken } from '@chakra-ui/react';
+import { Box, useToken } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
@@ -29,84 +29,84 @@ const NeverShowInfoPlugin = () => {
 };
 
 const SwaggerUI = () => {
-  const mainColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const mainColor = { _light: 'blackAlpha.800', _dark: 'whiteAlpha.800' };
   const borderColor = useToken('colors', 'border.divider');
-  const mainBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+  const mainBgColor = { _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' };
 
   const swaggerStyle: SystemStyleObject = {
-    '.swagger-ui .scheme-container, .opblock-tag': {
+    '& .swagger-ui .scheme-container, & .opblock-tag': {
       display: 'none',
     },
-    '.swagger-ui': {
+    '& .swagger-ui': {
       color: mainColor,
     },
-    '.swagger-ui .opblock-summary-control:focus': {
+    '& .swagger-ui .opblock-summary-control:focus': {
       outline: 'none',
     },
     // eslint-disable-next-line max-len
-    '.swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-description, .swagger-ui div, .swagger-ui p, .swagger-ui h5, .swagger-ui .response-col_links, .swagger-ui h4, .swagger-ui table thead tr th, .swagger-ui table thead tr td, .swagger-ui .parameter__name, .swagger-ui .parameter__type, .swagger-ui .response-col_status, .swagger-ui .tab li, .swagger-ui .opblock .opblock-section-header h4': {
+    '& .swagger-ui .opblock .opblock-summary-path, & .swagger-ui .opblock .opblock-summary-description, & .swagger-ui div, & .swagger-ui p, & .swagger-ui h5, & .swagger-ui .response-col_links, & .swagger-ui h4, & .swagger-ui table thead tr th, & .swagger-ui table thead tr td, & .swagger-ui .parameter__name, & .swagger-ui .parameter__type, & .swagger-ui .response-col_status, & .swagger-ui .tab li, & .swagger-ui .opblock .opblock-section-header h4': {
       color: 'unset',
     },
-    '.swagger-ui input': {
+    '& .swagger-ui input': {
       color: 'blackAlpha.800',
     },
-    '.swagger-ui .opblock .opblock-section-header': {
-      background: useColorModeValue('whiteAlpha.800', 'blackAlpha.800'),
+    '& .swagger-ui .opblock .opblock-section-header': {
+      background: { _light: 'whiteAlpha.800', _dark: 'blackAlpha.800' },
     },
-    '.swagger-ui .response-col_description__inner p, .swagger-ui .parameters-col_description p': {
+    '& .swagger-ui .response-col_description__inner p, & .swagger-ui .parameters-col_description p': {
       margin: 0,
     },
-    '.swagger-ui .wrapper': {
+    '& .swagger-ui .wrapper': {
       padding: 0,
     },
-    '.swagger-ui .prop-type': {
-      color: useColorModeValue('blue.600', 'blue.400'),
+    '& .swagger-ui .prop-type': {
+      color: { _light: 'blue.600', _dark: 'blue.400' },
     },
-    '.swagger-ui .btn.try-out__btn': {
-      borderColor: useToken('colors', 'link'),
-      color: useToken('colors', 'link'),
+    '& .swagger-ui .btn.try-out__btn': {
+      borderColor: useToken('colors', 'link.primary'),
+      color: useToken('colors', 'link.primary'),
       borderRadius: 'sm',
     },
-    '.swagger-ui .btn.try-out__btn:hover': {
+    '& .swagger-ui .btn.try-out__btn:hover': {
       boxShadow: 'none',
-      borderColor: useToken('colors', 'link_hovered'),
-      color: useToken('colors', 'link_hovered'),
+      borderColor: useToken('colors', 'link.primary.hover'),
+      color: useToken('colors', 'link.primary.hover'),
     },
-    '.swagger-ui .btn.try-out__btn.cancel': {
-      borderColor: useToken('colors', 'error'),
-      color: useToken('colors', 'error'),
+    '& .swagger-ui .btn.try-out__btn.cancel': {
+      borderColor: useToken('colors', 'text.error'),
+      color: useToken('colors', 'text.error'),
     },
-    '.swagger-ui .btn.try-out__btn.cancel:hover': {
-      borderColor: useColorModeValue('red.600', 'red.500'),
-      color: useColorModeValue('red.500', 'red.400'),
+    '& .swagger-ui .btn.try-out__btn.cancel:hover': {
+      borderColor: { _light: 'red.600', _dark: 'red.500' },
+      color: { _light: 'red.500', _dark: 'red.400' },
     },
 
     // MODELS
-    '.swagger-ui section.models': {
+    '& .swagger-ui section.models': {
       borderColor: borderColor,
     },
-    '.swagger-ui section.models h4': {
+    '& .swagger-ui section.models h4': {
       color: mainColor,
     },
-    '.swagger-ui section.models .model-container': {
+    '& .swagger-ui section.models .model-container': {
       bgColor: mainBgColor,
     },
-    '.swagger-ui .model-title': {
+    '& .swagger-ui .model-title': {
       wordBreak: 'break-all',
       color: mainColor,
     },
-    '.swagger-ui .model': {
+    '& .swagger-ui .model': {
       color: mainColor,
     },
-    '.swagger-ui .model-box-control:focus': {
+    '& .swagger-ui .model-box-control:focus': {
       outline: 'none',
     },
-    '.swagger-ui .model-toggle': {
-      bgColor: useColorModeValue('transparent', 'whiteAlpha.700'),
+    '& .swagger-ui .model-toggle': {
+      bgColor: { _light: 'transparent', _dark: 'whiteAlpha.700' },
       borderRadius: 'sm',
     },
-    '.swagger-ui .model .property.primitive': {
-      color: useToken('colors', 'text_secondary'),
+    '& .swagger-ui .model .property.primitive': {
+      color: useToken('colors', 'text_.secondary'),
       wordBreak: 'break-all',
     },
   };
@@ -132,7 +132,7 @@ const SwaggerUI = () => {
   }
 
   return (
-    <Box sx={ swaggerStyle }>
+    <Box css={ swaggerStyle }>
       <SwaggerUIReact
         url={ feature.specUrl }
         plugins={ [ NeverShowInfoPlugin ] }

ui/graphQL/GraphQL.tsx

@@ -1,4 +1,4 @@
-import { Box, useColorMode } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
 import React from 'react';
@@ -7,6 +7,7 @@ import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
 import 'graphiql/graphiql.css';
 import isBrowser from 'lib/isBrowser';
+import { useColorMode } from 'toolkit/chakra/color-mode';
 
 const feature = config.features.graphqlApiDocs;
 
@@ -61,8 +62,8 @@ const GraphQL = () => {
   });
 
   return (
-    <Box h="100vh" overflowX="scroll" sx={ graphQLStyle }>
-      <Box h="100vh" minW="900px" sx={ graphQLStyle }>
+    <Box h="100vh" overflowX="scroll" css={ graphQLStyle }>
+      <Box h="100vh" minW="900px" css={ graphQLStyle }>
         <GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery } key={ colorModeState }/>
       </Box>
     </Box>

ui/pages/Chakra.tsx

@@ -18,6 +18,7 @@ import LoadersShowcase from 'ui/showcases/Loaders';
 import MenuShowcase from 'ui/showcases/Menu';
 import PaginationShowcase from 'ui/showcases/Pagination';
 import PinInputShowcase from 'ui/showcases/PinInput';
+import PopoverShowcase from 'ui/showcases/Popover';
 import ProgressCircleShowcase from 'ui/showcases/ProgressCircle';
 import RadioShowcase from 'ui/showcases/Radio';
 import SelectShowcase from 'ui/showcases/Select';
@@ -53,6 +54,7 @@ const tabs = [
   { label: 'Progress Circle', value: 'progress-circle', component: <ProgressCircleShowcase/> },
   { label: 'Radio', value: 'radio', component: <RadioShowcase/> },
   { label: 'Pin input', value: 'pin-input', component: <PinInputShowcase/> },
+  { label: 'Popover', value: 'popover', component: <PopoverShowcase/> },
   { label: 'Select', value: 'select', component: <SelectShowcase/> },
   { label: 'Table', value: 'table', component: <TableShowcase/> },
   { label: 'Tabs', value: 'tabs', component: <TabsShowcase/> },
@@ -79,7 +81,7 @@ const ChakraShowcases = () => {
             <TabsTrigger key={ tab.value } value={ tab.value }>{ tab.label }</TabsTrigger>
           )) }
         </TabsList>
-        { tabs.map((tab) => tab.component) }
+        { tabs.map((tab) => <React.Fragment key={ tab.value }>{ tab.component }</React.Fragment>) }
       </TabsRoot>
     </>
   );

ui/showcases/Popover.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Button } from 'toolkit/chakra/button';
+import { PopoverRoot, PopoverTrigger, PopoverContent, PopoverBody } from 'toolkit/chakra/popover';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const PopoverShowcase = () => {
+  return (
+    <Container value="popover">
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: sm">
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="dropdown">Trigger</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  Popover content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(PopoverShowcase);