Merge pull request #88 from blockscout/toast-styles

toasts

lib/hooks/useToast.tsx

+import type { UseToastOptions, ToastProps } from '@chakra-ui/react';
+import { createToastFn, useChakra } from '@chakra-ui/react';
+import React from 'react';
+
+import Toast from 'ui/shared/Toast';
+
+// there is no toastComponent prop in UseToastOptions type
+// but these options will be passed to createRenderToast under the hood
+// and it accepts custom toastComponent
+const defaultOptions: UseToastOptions & { toastComponent?: React.FC<ToastProps> } = {
+  toastComponent: Toast,
+  position: 'top-right',
+  duration: 10000000,
+  isClosable: true,
+};
+
+export default function useToastModified() {
+  const { theme } = useChakra();
+
+  return React.useMemo(
+    () => createToastFn(theme.direction, defaultOptions),
+    [ theme.direction ],
+  );
+}

pages/[network_type]/[network_sub_type]/index.tsx

-import { Center } from '@chakra-ui/react';
+import type { AlertStatus } from '@chakra-ui/react';
+import { Center, Button, VStack, HStack, Box } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useToast from 'lib/hooks/useToast';
 import Page from 'ui/shared/Page/Page';
 
 const Home: NextPage = () => {
   const router = useRouter();
+  const toast = useToast();
+
+  const openToast = (status: AlertStatus) => () => {
+    toast({
+      title: 'Account created.',
+      description: 'We\'ve created your account for you.',
+      status,
+    });
+  };
 
   return (
     <Page>
       <Center h="100%">
-        home page for { router.query.network_type } { router.query.network_sub_type } network
+        <VStack gap={ 4 }>
+          <Box>home page for { router.query.network_type } { router.query.network_sub_type } network</Box>
+          <HStack>
+            <Button onClick={ openToast('info') } > Show Info </Button>
+            <Button onClick={ openToast('error') } > Show Error </Button>
+            <Button onClick={ openToast('warning') } > Show Warning </Button>
+            <Button onClick={ openToast('success') } > Show Success </Button>
+          </HStack>
+        </VStack>
       </Center>
     </Page>
   );

ui/shared/Toast.tsx

+import type { ToastProps, AlertStatus } from '@chakra-ui/react';
+import { Alert, AlertTitle, AlertDescription, CloseButton } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/system';
+import React from 'react';
+
+function getBgColor(status?: AlertStatus) {
+  switch (status) {
+    case 'success':
+      return 'green.100';
+
+    case 'error':
+      return 'red.100';
+
+    case 'warning':
+      return 'orange.100';
+
+    case 'info':
+    default:
+      return 'blue.100';
+  }
+}
+
+const Toast = ({ onClose, title, description, id, isClosable, status }: ToastProps) => {
+
+  const ids = id ?
+    {
+      root: `toast-${ id }`,
+      title: `toast-${ id }-title`,
+      description: `toast-${ id }-description`,
+    } :
+    undefined;
+
+  const bgColor = getBgColor(status);
+
+  return (
+    <Alert
+      id={ ids?.root }
+      alignItems="start"
+      borderRadius="md"
+      boxShadow="lg"
+      paddingY={ 4 }
+      paddingLeft={ 6 }
+      paddingRight="72px"
+      color="gray.700"
+      bgColor={ bgColor }
+      textAlign="start"
+      width="auto"
+    >
+      <chakra.div flex="1" maxWidth="100%">
+        { title && <AlertTitle id={ ids?.title }>{ title }</AlertTitle> }
+        { description && (
+          <AlertDescription id={ ids?.description } display="block">
+            { description }
+          </AlertDescription>
+        ) }
+      </chakra.div>
+      { isClosable && (
+        <CloseButton
+          size="md"
+          borderRadius="base"
+          color="gray.700"
+          onClick={ onClose }
+          position="absolute"
+          insetEnd={ 4 }
+          top={ 4 }
+        />
+      ) }
+    </Alert>
+  );
+};
+
+export default Toast;