UI: Initiate Minting step

src/components/LabeledBadge/LabeledBadge.tsx

@@ -0,0 +1,37 @@
+import { Badge, BadgeProps, Flex, Icon, Text } from "@chakra-ui/react"
+import { FC } from "react"
+import { IconType } from "react-icons"
+
+interface LabeledBadgeProps extends BadgeProps {
+  label: string
+  icon?: IconType
+}
+
+const LabeledBadge: FC<LabeledBadgeProps> = ({
+  label,
+  icon,
+  children,
+  ...restProps
+}) => {
+  return (
+    <Flex
+      as={Badge}
+      align="center"
+      color="hsl(0, 0%, 53%)"
+      fontSize="xs"
+      lineHeight={1}
+      fontWeight="medium"
+      p={2}
+      pr={3}
+      {...restProps}
+    >
+      <Icon as={icon} mr={2} w={3.5} h={3.5} />
+      {label}&nbsp;
+      <Text as="span" color="hsl(26, 96%, 65%)" textTransform="lowercase">
+        {children}
+      </Text>
+    </Flex>
+  )
+}
+
+export default LabeledBadge

src/components/LabeledBadge/index.ts

@@ -0,0 +1 @@
+export { default as LabeledBadge } from "./LabeledBadge"

src/components/Modal/SelectWalletModal/index.tsx

@@ -84,34 +84,14 @@ const SelectWalletModal: FC<BaseModalProps> = () => {
     setWalletToConnect(walletType)
   }
 
-  return (
-    <>
-      <ModalHeader
-        as={Flex}
-        align="center"
-        justify="space-between"
-        p={6}
-        mb={4}
-      >
-        <Text as="h2" fontSize="xl" lineHeight={6} fontWeight="medium">
-          Connect a Wallet
-        </Text>
-        <ModalCloseButton position="relative" inset={0} />
-      </ModalHeader>
-
-      {walletToConnect === null ? (
-        <InitialWalletSelection
-          walletOptions={walletOptions}
-          onSelect={onClick}
-        />
-      ) : (
-        <ConnectWallet
-          walletType={walletToConnect}
-          goBack={goBack}
-          onClose={closeModal}
-        />
-      )}
-    </>
+  return walletToConnect === null ? (
+    <InitialWalletSelection walletOptions={walletOptions} onSelect={onClick} />
+  ) : (
+    <ConnectWallet
+      walletType={walletToConnect}
+      goBack={goBack}
+      onClose={closeModal}
+    />
   )
 }
 
@@ -136,4 +116,4 @@ const ConnectWallet: FC<{
   }
 }
 
-export default withBaseModal(SelectWalletModal)
+export default withBaseModal(SelectWalletModal, "Connect a Wallet")

src/components/Modal/TransactionModal/TransactionFailed.tsx

@@ -1,27 +1,25 @@
 import { FC } from "react"
 import {
   Alert,
-  AlertDescription,
   AlertIcon,
   AlertTitle,
   Box,
-  Button,
-  HStack,
-  Stack,
   ModalBody,
   ModalFooter,
-  ModalHeader,
   useDisclosure,
+  VStack,
+  Button,
+  Icon,
 } from "@chakra-ui/react"
-import TransactionError from "../../../static/icons/TransactionError"
 import { BodySm } from "@threshold-network/components"
 import { ExternalHref } from "../../../enums"
 import { BaseModalProps } from "../../../types"
-import ViewInBlockExplorer from "../../ViewInBlockExplorer"
-import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 import withBaseModal from "../withBaseModal"
 import Link from "../../Link"
-import ModalCloseButton from "../ModalCloseButton"
+import {
+  HiOutlinePlus as PlusIcon,
+  HiOutlineMinus as MinusIcon,
+} from "react-icons/hi"
 
 interface TransactionFailedProps extends BaseModalProps {
   transactionHash?: string
@@ -32,98 +30,68 @@ interface TransactionFailedProps extends BaseModalProps {
 const TransactionFailed: FC<TransactionFailedProps> = ({
   error,
   isExpandableError,
-  closeModal,
-  transactionHash,
 }) => {
   const { isOpen, onToggle } = useDisclosure()
 
-  const errorTitle = "Error"
-
   return (
     <>
-      <ModalHeader>Error</ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>
-        <Box mb={6}>
-          <Alert
-            status="error"
-            mb={4}
-            zIndex={999}
-            height={isOpen ? "280px" : undefined}
-            flexDirection="column"
-            overflowY="auto"
-            css={{
-              "&::-webkit-scrollbar": {
-                width: "4px",
-                marginRight: "4px",
-              },
-              "&::-webkit-scrollbar-track": {
-                width: "6px",
-              },
-              "&::-webkit-scrollbar-thumb": {
-                background: "red",
-                borderRadius: "24px",
-              },
-            }}
+      <ModalBody p={0}>
+        <VStack spacing={0}>
+          <VStack
+            align="flex-start"
+            alignSelf="stretch"
+            spacing={4}
+            p={6}
+            pt={0}
           >
-            <HStack alignSelf="flex-start" mb={isOpen ? 6 : 0}>
+            <Alert status="error" alignSelf="stretch">
               <AlertIcon />
-              <AlertTitle display="flex">
-                {isExpandableError ? (
-                  <Stack>
-                    <BodySm wordBreak="break-word">{errorTitle}</BodySm>
-                    <BodySm
-                      onClick={onToggle}
-                      ml={4}
-                      textDecoration="underline"
-                      cursor="pointer"
-                      minW="80px"
-                    >
-                      Show {isOpen ? "Less" : "More"}
-                    </BodySm>
-                  </Stack>
-                ) : (
-                  errorTitle
-                )}
-              </AlertTitle>
-            </HStack>
-            {isOpen && (
-              <AlertDescription maxWidth="100%">
-                <BodySm mb={8}>{error}</BodySm>
-                <Link
-                  isExternal
-                  href={ExternalHref.thresholdDiscord}
-                  fontWeight="bold"
-                >
-                  Get help on discord
-                </Link>
-              </AlertDescription>
-            )}
-          </Alert>
-          {!isOpen && (
-            <Box borderRadius="md" bg="gray.50" pt={12} pb={8} mb={8}>
-              <HStack position="relative" justify="center" mb={8}>
-                <TransactionError boxSize="120px" zIndex={0} />
-              </HStack>
+              <AlertTitle display="flex">Transaction error occured</AlertTitle>
+            </Alert>
+            {isExpandableError ? (
+              <Button
+                variant="outline"
+                size="sm"
+                borderWidth={0}
+                onClick={onToggle}
+                leftIcon={<Icon as={isOpen ? MinusIcon : PlusIcon} />}
+              >
+                Show {isOpen ? "less" : "more"}
+              </Button>
+            ) : null}
+          </VStack>
+          {isExpandableError && isOpen ? (
+            <Box p={6} pb={0} borderTop="1px solid" borderColor="inherit">
+              <Box
+                as="pre"
+                bg="hsl(0, 0%, 12%)"
+                color="hsla(0, 0%, 100%, 80%)"
+                p={4}
+                whiteSpace="pre-wrap"
+                fontFamily="monospace"
+                maxH="xs"
+                overflowY="scroll"
+              >
+                {error}
+              </Box>
             </Box>
-          )}
-        </Box>
-        {transactionHash && (
-          <BodySm>
-            <ViewInBlockExplorer
-              id={transactionHash}
-              type={ExplorerDataType.TRANSACTION}
-              text="View"
-            />
-            transaction on Etherscan
-          </BodySm>
-        )}
+          ) : null}
+        </VStack>
       </ModalBody>
-      <ModalFooter>
-        <Button onClick={closeModal}>Dismiss</Button>
+      <ModalFooter p={6}>
+        <BodySm>
+          Get help on&nbsp;
+          <Link
+            isExternal
+            href={ExternalHref.thresholdDiscord}
+            color="brand.100"
+          >
+            Discord
+          </Link>
+        </BodySm>
       </ModalFooter>
     </>
   )
 }
 
-export default withBaseModal(TransactionFailed)
+export default withBaseModal(TransactionFailed, "Error")