@chakra-ui/react#Image TypeScript Examples

export default function Home() {
  return (
    <Content>
      <Flex direction="column" justify="center" marginLeft="30%">
        <Center>
          <Image
            src="../icons/dragon.png"
            width="50%"
            opacity="50%"
            filter="grayscale(100%)"
            draggable="false"
          />
        </Center>
        <Center mt="10" opacity="75%">
          Click{" "}
          <Badge mx="1" variant="outline" colorScheme="orange">
            New Tunnel
          </Badge>{" "}
          to add a new tunnel
        </Center>
        <Center mt="4" opacity="75%">
          Click an existing tunnel to toggle
        </Center>
      </Flex>
    </Content>
  );
}

ReceiptItemDope = (
  {dopeId, hideUnderline}: 
  {dopeId: string, hideUnderline?: boolean}
) => {
  return(
    <ReceiptItem hideUnderline={hideUnderline}>
      <DopeLofi>
        • • • • • • • • •
      </DopeLofi>
      <Box flex="1">DOPE NFT #{dopeId}</Box>
      <Box>
        <Image
          src="/images/icon/ethereum.svg"
          width="16px"
          alt="This asset lives on Ethereum Mainnet"
        />
      </Box>
    </ReceiptItem>
  );
}

PoolLogo = ({ boxSize }: { boxSize?: string }) => {
  const { poolLogo } = usePoolInfoFromContext();

  return (
    <Box boxSize={boxSize ?? "37px"} flexShrink={0}>
      <Image boxSize={boxSize ?? "37px"} src={poolLogo} />
    </Box>
  );
}

PngDownloadButton = ({hustlerConfig}: {hustlerConfig: HustlerCustomization}) => {
  return(
    <Button
    onClick={() => {
      svgtopng(
        'svg#dynamicBuiltSvg',
        `dope-wars-hustler-${hustlerConfig.name?.replace(' ', '_')}`,
        hustlerConfig.bgColor,
      );
    }}
  >
    <Image src="/images/icon/download.svg" alt="Download" />
  </Button>
  );
}

ShareEmbedButton: FunctionComponent<Props> = ({ fullPublicUrl }) => {
    const imageButtonHtml = `<a href="${fullPublicUrl}" target="_blank"><img src="${fullBaseUrl}embed-button.png" style="border-radius: 10px; height: 57px !important;width: 229px !important;" alt="Coindrop.to me"></img></a>`;
    const { onCopy: onCopyImage, hasCopied: hasCopiedImage } = useClipboard(imageButtonHtml);
    return (
        <Box>
            <Flex>
                <Box>
                    <Heading
                        as="h2"
                        size="lg"
                    >
                        Button
                    </Heading>
                </Box>
            </Flex>
                <>
                    <Box textAlign="center" my={3}>
                        <Image className={styles['coindrop-html-embed-button']} display="block" mx="auto" src="/embed-button.png" />
                    </Box>
                    <Box textAlign="center">
                        <Button
                            leftIcon={hasCopiedImage ? <CheckIcon /> : <SourceCodeIcon />} // TODO: Fix icon
                            colorScheme="green"
                            mb={1}
                            onClick={onCopyImage}
                        >
                            {hasCopiedImage ? 'Copied' : 'Copy Embed Code'}
                        </Button>
                    </Box>
                </>
        </Box>
    );
}

Fireworks = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  const getRandomX = () => getRandomNumber(0, 100);
  const getRandomY = () => getRandomNumber(0, 100);
  const getRandomWidth = () => getRandomNumber(5, 33);

  const [posX, setPosX] = useState(getRandomX());
  const [posY, setPosY] = useState(getRandomY());
  const [containerWidth, setContainerWidth] = useState(getRandomWidth());

  const setRandomValues = () => {
    setPosX(getRandomX());
    setPosY(getRandomY());
    setContainerWidth(getRandomWidth());
  };

  useInterval(() => {
    setRandomValues();
  }, 2500);

  const FireworkContainer = styled.div`
    position: absolute;
    display: inline-block;
    z-index: 2;
    top: ${posY}%;
    left: ${posX}%;
    width: ${containerWidth}%;
  `;
  return (
    <FireworkContainer ref={containerRef}>
      <Image src="/images/lunar_new_year_2022/fireworks.gif" alt="fireworks" />
    </FireworkContainer>
  );
}

ScreenHeroFiller: React.FC = () => {
  return (
    <Center w="100%" h="100%">
      <VStack spacing="3vw" css={{ "& svg": { height: "auto", width: "100%" } }}>
        <Image src="/assets/hero_hamburger.webp" h="30vw" />
        <Logo />
      </VStack>
    </Center>
  );
}

ContentHustlers = () => {
  const content = `
## Get in the game with a Hustler

Don't confuse Hustlers with basic "PFP" projects. Hustlers are fully-configurable characters that can be upgraded by acquiring Dope Gear NFTs and playing our upcoming games.

Hustlers unlock multiple game experiences. Better equipped Hustlers have higher chances of winning.

[More about Hustlers on our Player's Guide.](https://dope-wars.notion.site/Hustler-Guide-ad81eb1129c2405f8168177ba99774cf)
  `;
  return (
    <>
      <Image
        src="/images/hustler/hustler_about_banner.svg"
        alt="Hustlers are your character in Dope Wars"
      />
      <div
        css={css`
          .markdown {
            padding-bottom: 0px !important;
          }
        `}
      >
        <MarkdownText text={content} />
      </div>
      <div
        className="markdown"
        css={css`
          margin-bottom: 4em;
        `}
      >
        <ReactPlayer url="https://www.youtube.com/watch?v=7q5uvmTttzQ" width="100%" controls />
      </div>
    </>
  );
}

ScreenSponsorLogoSet: React.FC<{ sponsors: ConferenceSponsorship[] }> = ({ sponsors }) => {
  if (sponsors.length == 1) {
    const sponsor = sponsors[0];
    return <Image w="100%" h="100%" src={sponsor.avatar_url} />;
  } else {
    return (
      <Flex w="100%" h="100%" flexDirection="row" flexWrap="wrap">
        {sponsors.map((s) => {
          return (
            <Box key={`${s.id}`} w="50%" p="0.6vw">
              <Image w="100%" h="auto" src={s.avatar_url} />
            </Box>
          );
        })}
      </Flex>
    );
  }
}

MotionImage = motion.custom(
  forwardRef((props, ref) => {
    const chakraProps = Object.fromEntries(
      // do not pass framer props to DOM element
      Object.entries(props).filter(([key]) => !isValidMotionProp(key))
    );
    return (
        <Image
          ref={ref}
          fallbackSrc={placeholder}
          {...chakraProps}
        />
    );
  })
)

TrackOfflineView: React.FC = () => {
  return (
    <AspectRatio ratio={16 / 9}>
      <Center w="100%" h="100%">
        <VStack>
          <Box w="95px" h="95px" css={{ filter: "grayscale(1)" }}>
            <picture>
              <source type="image/webp" srcSet="/assets/hero_hamburger.webp" />
              <Image src="/assets/hero_hamburger.svg" w="100%" h="100%" alt="" />
            </picture>
          </Box>
          <Heading as="div" color={Colors.textMuted}>
            Offline...
          </Heading>
        </VStack>
      </Center>
    </AspectRatio>
  );
}

PermissionsWalkthrough = (): JSX.Element => {
    return (
        <SlideFade in={true} offsetY='150px'>
            <Box px={5}>
                <Text fontSize='4xl'>Permissions</Text>
                <Text fontSize='md' mt={5}>
                    Before setting up BlueBubbles, we need to make sure that the app is given the correct permissions
                    so that it can operate. The main permission that is required is the <strong>Full Disk Access</strong>&nbsp;
                    permission. This will allow BlueBubbles to read the iMessage database and provide notifications for
                    new messages.
                </Text>
                <Alert status='info' mt={2}>
                    <AlertIcon />
                    If you are on macOS Monterey, you will also need to enable&nbsp;<strong>Accessibility</strong>&nbsp;permissions
                    for BlueBubbles.
                </Alert>
                <Text fontSize='md' mt={5}>
                    Here is an evaluation of your current permissions. If Full Disk Access is not enabled, you will not be
                    able to use BlueBubbles
                </Text>
                <Box my={3} />
                <PermissionRequirements />
                <Text fontSize='lg' my={5}>Quick Guide</Text>
                <Text fontSize='md' mt={5}>Open System Preferences, then the following:</Text>
                <Image src={SystemPreferencesImage} borderRadius='lg' my={2} />
                <Image src={FullDiskImage} borderRadius='lg' my={2} />
                
            </Box>
        </SlideFade>
    );
}

LazyImage = (props: LazyImageProps) => {
  const { src, handleClick, blurHash, id } = props;

  return (
    <ProgressiveImage
      delay={500}
      src={src}
    //   placeholder="https://via.placeholder.com/320x216/DCDFDF/ffffff/?text=CoverImage"
      placeholder={placeholder}
    >
      {(src, loading) => {
        return loading ? (
          <BlurhashCanvas
            hash={blurHash}
            width={400}
            height={300}
            punch={1}
          />
        ) : (
          <Image
            src={src}
            height={300}
            width={"100%"}
            cursor={"pointer"}
            objectFit="cover"
            alt="cover image"
            // fallbackSrc="https://via.placeholder.com/320x216/DCDFDF/ffffff/?text=CoverImage"
            fallbackSrc={placeholder}
            onClick={() => handleClick(id)}
          />
        );
      }}
    </ProgressiveImage>
  );
}

RoadmapItem = ({
  title,
  imageReplacement,
  imageUrl,
  imageAlt,
  date,
  complete,
  children,
}: Props) => {
  return (
    <Container>
      <div className="imageBox">
        {imageReplacement && imageReplacement}
        {imageUrl && imageAlt && <Image src={imageUrl} alt={imageAlt} width="100%" />}
        {complete && (
          <Image
            src="/images/icon/check.svg"
            alt="Completed"
            position="absolute"
            marginTop="-32px"
            marginLeft="8px"
            opacity="0.5"
          />
        )}
      </div>
      <div className="contentBox">
        <TitleContainer>
          {title}
          <Date>{date}</Date>
        </TitleContainer>
        <Content>{children}</Content>
      </div>
      <div
        css={css`
          clear: both;
        `}
      ></div>
    </Container>
  );
}

Phone: FC<{
  index: number
  mobile?: boolean
  select?: boolean
}> = ({ index, mobile=false, select=true } ) => {
  const [ manufacturer, setManufacturer ] = useState<Manufacturer>()
  const [ selectedPhones, setSelectedPhones ] = useRecoilState(selectedPhonesState)
  const selectedPhonesData = useRecoilValue(selectedPhonesDataState)

  function updatePhoneIndex(value: string): void {
    setSelectedPhones(v => {
      const copied = [ ...v ]
      copied[index] = value
      return copied as [ string, string, string ]
    })
  }
  return <Box textAlign='left' {...( mobile ? { display: { base: 'none', lg: 'block' } } : {} )}>
    {
      select && <>
        <Text>제조사</Text>
        <Select mb={2} placeholder='선택 안함' onChange={(e) => {
          updatePhoneIndex('')
          setManufacturer(e.target.value as Manufacturer)
        }}>
          {
            Manufacturers.map((m: Manufacturer) => <option key={m} value={m}>{ManufacturersName[m]}</option>)
          }
        </Select>
        <Text>기종</Text>
        <Select placeholder='선택해주세요' value={selectedPhones[index]} onChange={(e) => updatePhoneIndex(e.target.value)}>
          {
            Phones.filter(el => manufacturer ? el.data.manufacturer === manufacturer : true).map(phone => <option key={phone.data.id} value={phone.data.id}>{!manufacturer && `[${ManufacturersName[phone.data.manufacturer]}] `}{phone.data.name}</option>)
          }
        </Select>
      </>
    }
    {
      selectedPhonesData[index] ? <Box mt={10} textAlign='center'>
        <Image mx='auto' src={selectedPhonesData[index]?.image} alt={selectedPhonesData[index]?.data.name} width={{ base: '150px', md: '350px' }} height={{ base: '200px', md: '450px' }} />
        <Text fontSize='3xl' fontWeight='bold'>{selectedPhonesData[index]?.data.name}</Text>
        <Text mt={2}>색상</Text>
        <Flex wrap='wrap' justifyContent='center'>
          {
            selectedPhonesData[index]?.colors.map(color => <ColorLabel color={color} key={color.id} />)
          }
        </Flex>
      </Box> : <Box mt={10} width={{ base: '150px', md: '350px' }} height={{ base: '200px', md: '450px' }} />
    } 
  </Box>
}

MintTo = ({
  mintTo,
  setMintTo,
  mintAddress,
  setMintAddress,
}: {
  mintTo: boolean;
  setMintTo: (shouldMintTo: boolean) => void;
  mintAddress: string | undefined;
  setMintAddress: (value: string) => void;
}) => {
  const { account } = useWeb3React();
  const isContract = useIsContract(account);

  useEffect(() => {
    if (isContract) {
      setMintTo(true);
    }
  }, [isContract, setMintTo]);

  if (!mintTo && !isContract) {
    return <Button onClick={() => setMintTo(true)}>Send to a friend?</Button>;
  }

  return (
    <PanelContainer justifyContent="flex-start" css={css`max-height:180px;`}>
      <PanelTitleBarFlex onClick={() => setMintTo(false)}>
        <span>Send to Different Address</span>
        <Image
          src="/images/icon/circle-clear-input.svg"
          alt="close"
          width="16px"
          marginRight="8px"
          cursor="pointer"
        />
      </PanelTitleBarFlex>
      <PanelBody>
        {!isContract && <p>Send to a friend, or another wallet?</p>}
        {isContract && (
          <p>
            It looks like you are using a contract wallet. Please set the Optimism address you want these items sent to.
          </p>
        )}
        <Input
          placeholder="0x…"
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMintAddress(e.target.value)}
          value={mintAddress}
        />
      </PanelBody>
    </PanelContainer>
  );
}

Header = () => {
  const { user, logout } = useAuth();

  return (
    <nav>
      <Container maxW="5xl">
        <Box
          display="flex"
          alignItems="center"
          justifyContent="space-between"
          h={16}
        >
          <Box display="flex" alignItems="center">
            <Heading as="h3" fontSize="medium">
              <Link to="/">Ledokku</Link>
            </Heading>
          </Box>
          <div>
            <Menu placement="bottom-end">
              <MenuButton>
                {user?.avatarUrl && (
                  <Image
                    h={8}
                    w={8}
                    borderRadius="full"
                    src={user.avatarUrl}
                    alt="Avatar"
                  />
                )}
              </MenuButton>
              <MenuList fontSize="sm" color="gray.700">
                <MenuItem as={Link} to="/dashboard">
                  Dashboard
                </MenuItem>
                <MenuDivider />
                <MenuItem
                  as="a"
                  href="https://github.com/ledokku/ledokku"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Github
                </MenuItem>
                <MenuDivider />
                <MenuItem onClick={() => logout()}>Logout</MenuItem>
              </MenuList>
            </Menu>
          </div>
        </Box>
      </Container>
    </nav>
  );
}

components = {
  h1: (props) => (
    <HeadingAnchored as="h1"  size="xl" mb={4} {...props}/>
  ),
  h2: ({children, ...rest}) => (
    <HeadingAnchored as="h2" size="lg" py={4} { ...rest}>
      {children}
      <Divider mt={4}/>
    </HeadingAnchored>
  ),
  h3: (props) => (
    <HeadingAnchored as="h3" size="md" pt={4} mb={4} {...props}/>
  ),
  h4: (props) => (
    <HeadingAnchored as="h4" size="sm" pt={4} mb={4} {...props}/>
  ),
  h5: (props) => (
    <HeadingAnchored as="h5" size="xs" pt={2} mb={1} {...props}/>
  ),
  h6: (props) => (
    <HeadingAnchored as="h6" size="xs" pt={2} mb={1} opacity={.75} {...props}/>
  ),
  ul: (props) => <UnorderedList my={2}>{props.children}</UnorderedList>,
  ol: (props) => <OrderedList my={2}>{props.children}</OrderedList>,
  li: (props) => <ListItem my={1}>{props.children}</ListItem>,
  p: (props) => <Text my={4}>{props.children}</Text>,
  img: ({ children, ...rest }) => <Image {...rest} borderRadius={4} my={2}>{children}</Image>,
  code: ({ className, children: code }) => {
    const language = className.replace('language-', '');

    return (
      <CodeBlock
        //@ts-ignore
        my={6}
        code={code}
        language={language}
      />
    )
  },
  table: (props) => <Table {...props} rounded={4} mb={4}/>,
  thead: Thead,
  tbody: Tbody,
  tr: Tr,
  th: Th,
  td: Td,
  blockquote: (props) => (
    <Alert
      mt="4"
      role="none"
      status="warning"
      variant="left-accent"
      as="blockquote"
      rounded={4}
      my="1.5rem"
      {...props}
    />
  ),
  inlineCode: InlineCode,
  hr: (props) => <Divider my={4}/>,
  a: ({children, href, ...rest}) => {
    let link = href
    const isExternal = link.startsWith('http')

    if(link.startsWith('packages/')) {
      link = href.replace('packages/', '')
    }

    link = link.replace('.md', '')

    return (
      <NextLink
        href={isExternal ? href : `/docs/${link}`}
        {...rest}
        passHref
      >
        <Link isExternal={isExternal} color='#F56565'>{children}</Link>
      </NextLink>
    )
  }
}

Login: React.FC = () => {
  return (
    <Box w="100%" h="100%" minH="100vh" bgColor={Colors.bg} py={["20px", "20px", "20px", "165px"]}>
      <Container maxW={["auto", "auto", "auto", "780px"]} w="100%">
        <Flex
          direction={["column", "column", "column", "row"]}
          justifyContent="space-around"
          alignItems="top"
          mx="15px"
        >
          <Box maxW="331px" w="100%" mb="15px" display="flex" direction="row" alignItems="center">
            <picture>
              <source type="image/webp" srcSet="/assets/hero_hamburger.webp" />
              <Image src="/assets/hero_hamburger.svg" w="100%" />
            </picture>
          </Box>
          <Box>
            <VStack>
              <Box>
                <Heading
                  as="h1"
                  w={["100%", "100%", "360px", "360px"]}
                  h="auto"
                  color={Colors.main}
                  css={{ "& svg": { maxWidth: "100%", height: "auto" } }}
                >
                  <Logo />
                  <VisuallyHidden>RubyKaigi Takeout 2021 Streaming Login</VisuallyHidden>
                </Heading>
                <Flex direction="row-reverse">
                  <Box mr="-10px">
                    <StreamingLogo />
                  </Box>
                </Flex>
              </Box>
              <Box textAlign="center" pt="30px">
                <Text>
                  A paid ticket is required to access this virtual conference.{" "}
                  <Link isExternal href="https://ti.to/rubykaigi/takeout-2021" textDecoration="underline">
                    Register now.
                  </Link>
                </Text>
              </Box>
              <LoginForm />
            </VStack>
          </Box>
        </Flex>
      </Container>
    </Box>
  );
}

Card = (props: CardProps) => {
  const { title, role, skills, period, logo, colorMode, alt } = props;
  return (
    <CardTransition>
      <Box
        px={4}
        py={5}
        borderWidth="1px"
        _hover={{ shadow: "lg" }}
        bg={useColorModeValue("white", "gray.800")}
        position="relative"
        rounded="md"
      >
        <Flex justifyContent="space-between">
          <Flex>
            <Image
              rounded="full"
              w={16}
              h={16}
              objectFit="cover"
              fallbackSrc={placeholder}
              src={logo}
              alt={alt}
            />
            <Stack spacing={2} pl={3} align="left">
              <Heading
                align="left"
                fontSize="xl"
                color={`mode.${colorMode}.career.text`}
              >
                {title}
              </Heading>
              <Heading
                align="left"
                fontSize="sm"
                color={`mode.${colorMode}.career.subtext`}
              >
                {role}
              </Heading>
              <Stack
                spacing={1}
                mt={3}
                isInline
                alignItems="center"
                display={["none", "none", "flex", "flex"]}
              >
                {skills.map(skill => (
                  <Tag size="sm" padding="0 3px" key={skill}>
                    {skill}
                  </Tag>
                ))}
              </Stack>
            </Stack>
          </Flex>
          <Stack display={["none", "none", "flex", "flex"]}>
            <Text fontSize={14} color={`mode.${colorMode}.career.subtext`}>
              {period}
            </Text>
          </Stack>
        </Flex>
        <Stack
          spacing={1}
          mt={3}
          isInline
          alignItems="center"
          display={["flex", "flex", "none", "none"]}
        >
          {skills.map(skill => (
            <Tag size="sm" padding="0 3px" key={skill}>
              {skill}
            </Tag>
          ))}
        </Stack>
      </Box>
    </CardTransition>
  );
}

TokenRow = memo(
  ({
    data: { tokenKeys, onClick, mode },
    index,
    style,
  }: {
    data: {
      tokenKeys: string[];
      onClick: (symbol: string) => any;
      mode: Mode;
    };
    index: number;
    style: CSSProperties;
  }) => {
    const token = tokens[tokenKeys[index]];

    const { data: balance, isLoading: isBalanceLoading } = useTokenBalance(
      token.address
    );

    return (
      <div style={style}>
        <Row
          flexShrink={0}
          as="button"
          onClick={() => onClick(token.symbol)}
          mainAxisAlignment="flex-start"
          crossAxisAlignment="center"
          width="100%"
        >
          <Box height="45px" width="45px" borderRadius="50%" mr={2}>
            <Image
              width="100%"
              height="100%"
              borderRadius="50%"
              backgroundImage={`url(${BigWhiteCircle})`}
              src={token.logoURL}
              alt=""
            />
          </Box>
          <Column
            mainAxisAlignment="flex-start"
            crossAxisAlignment="flex-start"
          >
            <Heading fontSize="20px" lineHeight="1.25rem" color={token.color}>
              {token.symbol}
            </Heading>
            <Text fontWeight="thin" fontSize="15px">
              {mode === Mode.DEPOSIT
                ? isBalanceLoading
                  ? "?"
                  : usdFormatter(
                      parseFloat(balance!.toString()) / 10 ** token.decimals
                    ).replace("$", "")
                : null}
            </Text>
          </Column>
        </Row>
      </div>
    );
  },
  areEqual
)

export default function Layout({ children }: Props) {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta name="description" content="Dendron" />
        <meta
          property="og:image"
          content="https://foundation-prod-assetspublic53c57cce-8cpvgjldwysl.s3-us-west-2.amazonaws.com/assets/logo-256.png"
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>

      <Flex height="full" direction="column">
        <Flex
          as="header"
          bgColor="gray.900"
          color="white"
          paddingX={4}
          paddingY={2}
          alignItems="center"
        >
          <Image
            src="https://foundation-prod-assetspublic53c57cce-8cpvgjldwysl.s3-us-west-2.amazonaws.com/assets/logo-256.png"
            id="logo"
            alt={name}
            boxSize={12}
          />

          {/*
          <Box marginLeft="auto">
            <Link
              target="_blank"
              href="https://dendron.memberful.com/account/subscriptions"
              color="currentColor"
              textDecoration="none"
              _hover={{ textDecoration: "inherit" }}
              role="group"
            >
              Contribute to Dendron{" "}
              <Box as="span" _groupHover={{ display: "none" }}>
                ?
              </Box>
              <Icon
                as={GoLinkExternal}
                display="none"
                _groupHover={{ display: "inline-block" }}
              />
            </Link>
          </Box>
            */}
        </Flex>

        <Box flexGrow={1} padding={8}>
          {children}
        </Box>
      </Flex>
    </ChakraProvider>
  );
}

RewardsDistributorRow = ({
  rewardsDistributor,
  handleRowClick,
  hideModalDivider,
  activeCTokens,
}: {
  rewardsDistributor: RewardsDistributor;
  handleRowClick: (rD: RewardsDistributor) => void;
  hideModalDivider: boolean;
  activeCTokens: string[];
}) => {
  const { address, fuse } = useRari();
  const isAdmin = address === rewardsDistributor.admin;

  const tokenData = useTokenData(rewardsDistributor.rewardToken);
  //   Balances
  const { data: rDBalance } = useTokenBalance(
    rewardsDistributor.rewardToken,
    rewardsDistributor.address
  );

  const underlyingsMap = useCTokensUnderlying(activeCTokens);
  const underlyings = Object.values(underlyingsMap);

  return (
    <>
      <Tr
        _hover={{ background: "grey", cursor: "pointer" }}
        h="30px"
        p={5}
        flexDir="row"
        onClick={() => handleRowClick(rewardsDistributor)}
      >
        <Td>
          <HStack>
            {tokenData?.logoURL ? (
              <Image
                src={tokenData.logoURL}
                boxSize="30px"
                borderRadius="50%"
              />
            ) : null}
            <Heading fontSize="22px" color={tokenData?.color ?? "#FFF"} ml={2}>
              {tokenData
                ? tokenData.symbol ?? "Invalid Address!"
                : "Loading..."}
            </Heading>
          </HStack>
        </Td>

        <Td>
          {!!underlyings.length ? (
            <CTokenAvatarGroup tokenAddresses={underlyings} popOnHover={true} />
          ) : (
            <Badge colorScheme="red">Inactive</Badge>
          )}
        </Td>

        <Td>
          {(
            parseFloat(rDBalance?.toString() ?? "0") /
            10 ** (tokenData?.decimals ?? 18)
          ).toFixed(3)}{" "}
          {tokenData?.symbol}
        </Td>

        <Td>
          <Badge colorScheme={isAdmin ? "green" : "red"}>
            {isAdmin ? "Is Admin" : "Not Admin"}
          </Badge>
        </Td>
      </Tr>
      {/* {!hideModalDivider && <ModalDivider />} */}
    </>
  );
}

SkillCard = ({ name, image, link, description }) => {
  const { data, loading } = usePalette(image);

  return (
    <MotionBox variants={item}>
      <MotionBox whileHover={{ y: -5 }}>
        <Link href={link} isExternal>
          <HStack
            p={4}
            bg={useColorModeValue("white", "gray.800")}
            rounded="xl"
            borderWidth="1px"
            borderColor={useColorModeValue("gray.100", "gray.700")}
            w="100%"
            textAlign="left"
            align="start"
            spacing={4}
            _hover={{ shadow: "md" }}
          >
            <Box
              rounded="lg"
              p={2}
              position="relative"
              overflow="hidden"
              lineHeight={0}
              boxShadow="inset 0 0 1px 1px rgba(0, 0, 0, 0.015)"
            >
              <Box
                bg={data.lightVibrant}
                position="absolute"
                top={0}
                bottom={0}
                left={0}
                right={0}
                opacity={0.25}
              ></Box>
              {loading ? (
                <Skeleton height={26} width={26} rounded="md" />
              ) : (
                <Image
                  src={image}
                  height={26}
                  width={26}
                  layout="fixed"
                  rounded="md"
                />
              )}
            </Box>
            <VStack
              align="start"
              justify="flex-start"
              spacing={1}
              maxW="lg"
              h="100%"
            >
              <VStack spacing={0} align="start" flexGrow="1">
                <Text fontWeight="bold" fontSize="md" noOfLines={2}>
                  {name}
                </Text>
                <Text
                  fontSize="sm"
                  color={useColorModeValue("gray.500", "gray.200")}
                >
                  {description}
                </Text>
              </VStack>
            </VStack>
          </HStack>
        </Link>
      </MotionBox>
    </MotionBox>
  );
}

lanternImg = <Image src="/images/lunar_new_year_2022/pixel-lantern.png" alt="Lantern" />

EditRewardsDistributorModal = ({
  rewardsDistributor,
  pool,
  isOpen,
  onClose,
}: {
  rewardsDistributor: RewardsDistributor;
  pool: FusePoolData;
  isOpen: boolean;
  onClose: () => any;
}) => {
  const { t } = useTranslation();

  const { address, fuse } = useRari();
  const rewardsDistributorInstance = useRewardsDistributorInstance(
    rewardsDistributor.address
  );
  const tokenData = useTokenData(rewardsDistributor.rewardToken);
  const isAdmin = address === rewardsDistributor.admin;

  //   Balances
  const { data: balanceERC20 } = useTokenBalance(
    rewardsDistributor.rewardToken,
    rewardsDistributor.address
  );

  const { data: myBalance } = useTokenBalance(rewardsDistributor.rewardToken);

  const toast = useToast();

  // Inputs
  const [sendAmt, setSendAmt] = useState<number>(0);

  const [supplySpeed, setSupplySpeed] = useState<number>(0.001);
  const [borrowSpeed, setBorrowSpeed] = useState<number>(0.001);

  //  Loading states
  const [fundingDistributor, setFundingDistributor] = useState(false);
  const [seizing, setSeizing] = useState(false);
  const [changingSpeed, setChangingSpeed] = useState(false);
  const [changingBorrowSpeed, setChangingBorrowSpeed] = useState(false);
  const [selectedAsset, setSelectedAsset] = useState<
    USDPricedFuseAsset | undefined
  >(pool?.assets[0] ?? undefined);

  //   RewardsSpeeds
  const [supplySpeedForCToken, borrowSpeedForCToken] = useRewardSpeedsOfCToken(
    rewardsDistributor.address,
    selectedAsset?.cToken
  );

  const { hasCopied, onCopy } = useClipboard(rewardsDistributor?.address ?? "");

  // Sends tokens to distributor
  const fundDistributor = async () => {
    // Create ERC20 instance of rewardToken
    const token = new fuse.web3.eth.Contract(
      JSON.parse(
        fuse.compoundContracts["contracts/EIP20Interface.sol:EIP20Interface"]
          .abi
      ),
      rewardsDistributor.rewardToken
    );

    setFundingDistributor(true);
    try {
      await token.methods
        .transfer(
          rewardsDistributor.address,
          Fuse.Web3.utils
            .toBN(sendAmt)
            .mul(
              Fuse.Web3.utils
                .toBN(10)
                .pow(Fuse.Web3.utils.toBN(tokenData?.decimals ?? 18))
            )
        )
        .send({
          from: address,
        });

      setFundingDistributor(false);
    } catch (err) {
      handleGenericError(err, toast);
      setFundingDistributor(false);
    }
  };

  //   Adds LM to supply side of a CToken in this fuse pool
  const changeSupplySpeed = async () => {
    try {
      if (!isAdmin) throw new Error("User is not admin of this Distributor!");

      setChangingSpeed(true);

      await rewardsDistributorInstance.methods
        ._setCompSupplySpeed(
          selectedAsset?.cToken,
          Fuse.Web3.utils.toBN(supplySpeed * 10 ** (tokenData?.decimals ?? 18)) // set supplySpeed to 0.001e18 for now
        )
        .send({ from: address });

      setChangingSpeed(false);
    } catch (err) {
      handleGenericError(err, toast);
      setChangingSpeed(false);
    }
  };

  //   Adds LM to supply side of a CToken in this fuse pool
  const changeBorrowSpeed = async () => {
    try {
      if (!isAdmin) throw new Error("User is not admin of this Distributor!");

      setChangingBorrowSpeed(true);

      await rewardsDistributorInstance.methods
        ._setCompBorrowSpeed(
          selectedAsset?.cToken,
          Fuse.Web3.utils.toBN(borrowSpeed * 10 ** (tokenData?.decimals ?? 18)) // set supplySpeed to 0.001e18 for now
        )
        .send({ from: address });

      setChangingBorrowSpeed(false);
    } catch (err) {
      handleGenericError(err, toast);
      setChangingBorrowSpeed(false);
    }
  };

  const handleSeizeTokens = async () => {
    setSeizing(true);
    if (isAdmin) {
      await rewardsDistributorInstance.methods._grantComp(
        address,
        balanceERC20
      );
    } else {
      toast({
        title: "Admin Only!",
        description: "Only admin can seize tokens!",
        status: "error",
        duration: 9000,
        isClosable: true,
        position: "top-right",
      });
    }
    setSeizing(false);
  };

  return (
    <Modal
      motionPreset="slideInBottom"
      isOpen={isOpen}
      onClose={onClose}
      isCentered
    >
      <ModalOverlay />
      <ModalContent {...MODAL_PROPS}>
        <Heading fontSize="27px" my={4} textAlign="center">
          {t("Edit Rewards Distributor")}
        </Heading>

        <ModalDivider />

        {/*  RewardToken data */}
        <Column
          mainAxisAlignment="flex-start"
          crossAxisAlignment="center"
          p={4}
        >
          <>
            {tokenData?.logoURL ? (
              <Image
                mt={4}
                src={tokenData.logoURL}
                boxSize="50px"
                borderRadius="50%"
                backgroundImage={`url(${SmallWhiteCircle})`}
                backgroundSize="100% auto"
              />
            ) : null}
            <Heading
              my={tokenData?.symbol ? 3 : 6}
              fontSize="22px"
              color={tokenData?.color ?? "#FFF"}
            >
              {tokenData ? tokenData.name ?? "Invalid Address!" : "Loading..."}
            </Heading>
            <Text>
              {balanceERC20 && tokenData && tokenData.decimals
                ? (
                    parseFloat(balanceERC20?.toString()) /
                    10 ** tokenData.decimals
                  ).toFixed(3)
                : 0}{" "}
              {tokenData?.symbol}
            </Text>
            <Text onClick={onCopy}>
              Contract: {shortAddress(rewardsDistributor.address)}{" "}
              {hasCopied && "Copied!"}
            </Text>
          </>
        </Column>

        <AdminAlert
          isAdmin={isAdmin}
          mt={2}
          isNotAdminText="You are not the admin of this RewardsDistributor. Only the admin can configure rewards."
        />

        {/* Basic Info  */}
        <Column
          mainAxisAlignment="flex-start"
          crossAxisAlignment="flex-start"
          py={4}
        >
          {/* <Row mainAxisAlignment="flex-start" crossAxisAlignment="center">
            <Text>Address: {rewardsDistributor.address}</Text>
          </Row>
          <Row mainAxisAlignment="flex-start" crossAxisAlignment="center">
            <Text>Admin: {rewardsDistributor.admin}</Text>
          </Row>
          <Row mainAxisAlignment="flex-start" crossAxisAlignment="center">
            <Text>
              Balance:{" "}
              {balanceERC20 ? parseFloat(balanceERC20?.toString()) / 1e18 : 0}{" "}
              {tokenData?.symbol}
            </Text>
          </Row> */}

          <ModalDivider />

          {/* Fund distributor */}
          <Column
            mainAxisAlignment="flex-start"
            crossAxisAlignment="flex-start"
            p={4}
          >
            <Heading fontSize={"lg"}> Fund Distributor </Heading>
            <Row
              mainAxisAlignment="flex-start"
              crossAxisAlignment="center"
              mt={1}
            >
              <NumberInput
                step={0.1}
                min={0}
                onChange={(valueString) => {
                  console.log({ valueString });
                  setSendAmt(parseFloat(valueString));
                }}
              >
                <NumberInputField
                  width="100%"
                  textAlign="center"
                  placeholder={"0 " + tokenData?.symbol}
                />
                <NumberInputStepper>
                  <NumberIncrementStepper />
                  <NumberDecrementStepper />
                </NumberInputStepper>
              </NumberInput>
              <Button
                onClick={fundDistributor}
                bg="black"
                disabled={fundingDistributor}
              >
                {fundingDistributor ? <Spinner /> : "Send"}
              </Button>
              {isAdmin && (!balanceERC20?.isZero() ?? false) && (
                <Button onClick={handleSeizeTokens} bg="red" disabled={seizing}>
                  {seizing ? <Spinner /> : "Withdraw Tokens"}
                </Button>
              )}
            </Row>
            <Text mt={1}>
              Your balance:{" "}
              {myBalance
                ? (
                    parseFloat(myBalance?.toString()) /
                    10 ** (tokenData?.decimals ?? 18)
                  ).toFixed(2)
                : 0}{" "}
              {tokenData?.symbol}
            </Text>
          </Column>

          {/* Add or Edit a CToken to the Distributor */}

          {pool.assets.length ? (
            <Column
              mainAxisAlignment="flex-start"
              crossAxisAlignment="flex-start"
              p={4}
            >
              <Heading fontSize={"lg"}> Manage CToken Rewards </Heading>
              {/* Select Asset */}
              <Row
                mainAxisAlignment="flex-start"
                crossAxisAlignment="center"
                mt={1}
              >
                {pool.assets.map(
                  (asset: USDPricedFuseAsset, index: number, array: any[]) => {
                    return (
                      <Box
                        pr={index === array.length - 1 ? 4 : 2}
                        key={asset.cToken}
                        flexShrink={0}
                      >
                        <DashboardBox
                          as="button"
                          onClick={() => setSelectedAsset(asset)}
                          {...(asset.cToken === selectedAsset?.cToken
                            ? activeStyle
                            : noop)}
                        >
                          <Center expand px={4} py={1} fontWeight="bold">
                            {asset.underlyingSymbol}
                          </Center>
                        </DashboardBox>
                      </Box>
                    );
                  }
                )}
              </Row>

              {/* Change Supply Speed */}
              <Column
                mainAxisAlignment="flex-start"
                crossAxisAlignment="flex-start"
                py={3}
              >
                <Row
                  mainAxisAlignment="flex-start"
                  crossAxisAlignment="flex-start"
                >
                  <NumberInput
                    step={0.1}
                    min={0}
                    onChange={(supplySpeed) => {
                      console.log({ supplySpeed });
                      setSupplySpeed(parseFloat(supplySpeed));
                    }}
                  >
                    <NumberInputField
                      width="100%"
                      textAlign="center"
                      placeholder={"0 " + tokenData?.symbol}
                    />
                    <NumberInputStepper>
                      <NumberIncrementStepper />
                      <NumberDecrementStepper />
                    </NumberInputStepper>
                  </NumberInput>
                  <Button
                    onClick={changeSupplySpeed}
                    bg="black"
                    disabled={changingSpeed || !isAdmin}
                  >
                    {changingSpeed ? <Spinner /> : "Set"}
                  </Button>
                </Row>
                <Row
                  mainAxisAlignment="flex-start"
                  crossAxisAlignment="flex-start"
                >
                  <Text>
                    Supply Speed:{" "}
                    {(parseFloat(supplySpeedForCToken) / 1e18).toFixed(4)}
                  </Text>
                </Row>
              </Column>

              {/* Change Borrow Speed */}
              <Column
                mainAxisAlignment="flex-start"
                crossAxisAlignment="flex-start"
                py={3}
              >
                <Row
                  mainAxisAlignment="flex-start"
                  crossAxisAlignment="flex-start"
                >
                  <NumberInput
                    step={0.1}
                    min={0}
                    onChange={(borrowSpeed) => {
                      console.log({ borrowSpeed });
                      setBorrowSpeed(parseFloat(borrowSpeed));
                    }}
                  >
                    <NumberInputField
                      width="100%"
                      textAlign="center"
                      placeholder={"0 " + tokenData?.symbol}
                    />
                    <NumberInputStepper>
                      <NumberIncrementStepper />
                      <NumberDecrementStepper />
                    </NumberInputStepper>
                  </NumberInput>

                  <Button
                    onClick={changeBorrowSpeed}
                    bg="black"
                    disabled={changingBorrowSpeed || !isAdmin}
                  >
                    {changingBorrowSpeed ? <Spinner /> : "Set"}
                  </Button>
                </Row>
                <Row
                  mainAxisAlignment="flex-start"
                  crossAxisAlignment="flex-start"
                >
                  <Text>
                    Borrow Speed:{" "}
                    {(parseFloat(borrowSpeedForCToken) / 1e18).toFixed(2)}
                  </Text>
                </Row>
              </Column>
            </Column>
          ) : (
            <Center p={4}>
              <Text fontWeight="bold">
                Add CTokens to this pool to configure their rewards.
              </Text>
            </Center>
          )}
        </Column>
      </ModalContent>
    </Modal>
  );
}

MintSuccess = () => {
  const router = useRouter();
  const { items } = router.query;

  const parsed: { typ: number; id: string }[] = useMemo(() => {
    if (items) {
      return JSON.parse(items as string);
    }

    return [];
  }, [items]);

  return (
    <AppWindowOptimism
      requiresWalletConnection
      title="Success!"
      background="#000 url(/images/lunar_new_year_2022/explosion_city-bg.png) center / contain repeat-x"
      padBody={false}
      scrollable={true}
    >
      <Fireworks />
      <div
        css={css`
          display: flex;
          width: 100%;
          flex-direction: column;
        `}
      >
        <EventHeader />
        <MessageContainer>
          <h3>Your gift has been revealed</h3>
          <div
            css={css`
              display: flex;
              flex-direction: column;
              gap: 16px;
              & > * {
                flex: 1;
              }
            `}
          >
            {parsed.map((item, i) => {
              if (item.typ === 1) {
                return <Item key={i} id={item.id} />;
              } else {
                return (
                  <div key={i}>
                    <ProfileCard>
                      <PanelTitleBar centered>
                        <div>YOU WON 1000 $PAPER</div>
                      </PanelTitleBar>
                      <Image src="/images/desktop/PAPER.png" alt="1000 $PAPER" />
                    </ProfileCard>
                  </div>
                );
              }
            })}
            <Link href="/inventory?section=Gear" passHref>
              <Button variant="cny">View your gifts</Button>
            </Link>
            <Link href="/lunar-new-year?section=mask" passHref>
              <Button
                variant="cny"
                css={css`
                  margin-top: 8px;
                `}
              >
                Buy a Rare Mask
              </Button>
            </Link>
          </div>
        </MessageContainer>
      </div>
      <LogoContainer>
        <Image src="/images/Logo-Gold.png" alt="Dope Wars" />
      </LogoContainer>
      <FireworksShow>
        <Image src="/images/lunar_new_year_2022/firecrackers.gif" alt="Fireworks" />
        <Image src="/images/lunar_new_year_2022/firecrackers.gif" alt="Fireworks" />
        <Image src="/images/lunar_new_year_2022/firecrackers.gif" alt="Fireworks" />
      </FireworksShow>
    </AppWindowOptimism>
  );
}

TokenNameAndMaxButton = ({
  updateAmount,
  logoURL,
  asset,
  mode,
  symbol,
  comptrollerAddress,
}: {
  logoURL: string;
  symbol: string;
  asset: USDPricedFuseAsset;
  mode: Mode;
  comptrollerAddress: string;
  updateAmount: (newAmount: string) => any;
}) => {
  const { fuse, address } = useRari();

  const toast = useToast();

  const [isMaxLoading, setIsMaxLoading] = useState(false);

  const setToMax = async () => {
    setIsMaxLoading(true);

    try {
      const maxBN = await fetchMaxAmount(mode, fuse, address, asset);

      if (maxBN!.isNeg() || maxBN!.isZero()) {
        updateAmount("");
      } else {
        const str = new BigNumber(maxBN!.toString())
          .div(10 ** asset.underlyingDecimals)
          .toFixed(18)
          // Remove trailing zeroes
          .replace(/\.?0+$/, "");

        updateAmount(str);
      }

      setIsMaxLoading(false);
    } catch (e) {
      handleGenericError(e, toast);
    }
  };

  const { t } = useTranslation();

  return (
    <Row
      mainAxisAlignment="flex-start"
      crossAxisAlignment="center"
      flexShrink={0}
    >
      <Row mainAxisAlignment="flex-start" crossAxisAlignment="center">
        <Box height="25px" width="25px" mb="2px" mr={2}>
          <Image
            width="100%"
            height="100%"
            borderRadius="50%"
            backgroundImage={`url(${SmallWhiteCircle})`}
            src={logoURL}
            alt=""
          />
        </Box>
        <Heading fontSize="24px" mr={2} flexShrink={0}>
          {symbol}
        </Heading>
      </Row>

      <Button
        ml={1}
        height="28px"
        width="58px"
        bg="transparent"
        border="2px"
        borderRadius="8px"
        borderColor="#272727"
        fontSize="sm"
        fontWeight="extrabold"
        _hover={{}}
        _active={{}}
        onClick={setToMax}
        isLoading={isMaxLoading}
      >
        {t("MAX")}
      </Button>
    </Row>
  );
}

CreateApp = () => {
  const history = useHistory();
  const toast = useToast();

  const createAppSchema = yup.object({
    type: yup
      .string()
      .oneOf(['GITHUB', 'GITLAB', 'DOCKER', 'DOKKU'])
      .required(),
  });

  const formik = useFormik<{ type: AppTypes }>({
    initialValues: {
      type: AppTypes.GITHUB,
    },
    validateOnChange: true,
    validationSchema: createAppSchema,
    onSubmit: async (values) => {
      try {
        values.type === AppTypes.GITHUB
          ? history.push('/create-app-github')
          : history.push('/create-app-dokku');
      } catch (error) {
        toast.error(error.message);
      }
    },
  });

  return (
    <>
      <HeaderContainer>
        <Header />
      </HeaderContainer>

      <Container maxW="5xl" my="4">
        <Heading py="2" as="h2" size="md">
          App source
        </Heading>
        <Box mt="24">
          <Box mt="4">
            <form onSubmit={formik.handleSubmit}>
              <Box mt="20">
                <Text mb="5" color="gray.500">
                  Choose between creating app from a Github repository or
                  creating a standalone Dokku app.
                </Text>
                <Grid
                  templateColumns={{
                    base: 'repeat(2, minmax(0, 1fr))',
                    md: 'repeat(4, minmax(0, 1fr))',
                  }}
                  gap="4"
                >
                  <SourceBox
                    selected={formik.values.type === AppTypes.GITHUB}
                    label="GitHub"
                    icon={<GithubIcon size={40} />}
                    onClick={() => formik.setFieldValue('type', 'GITHUB')}
                  />
                  <SourceBox
                    selected={formik.values.type === AppTypes.DOKKU}
                    label="Dokku"
                    icon={
                      <Image
                        boxSize="48px"
                        objectFit="cover"
                        src="/dokku.png"
                        alt="dokkuLogo"
                      />
                    }
                    onClick={() => formik.setFieldValue('type', 'DOKKU')}
                  />
                  <SourceBox
                    selected={formik.values.type === AppTypes.GITLAB}
                    label="Gitlab"
                    icon={<GitlabIcon size={40} />}
                    badge={
                      <Badge ml="1" colorScheme="red">
                        Coming soon
                      </Badge>
                    }
                    // Uncomment this when we can handle docker deployments
                    // onClick={() => formik.setFieldValue('type', 'GITLAB')}
                  />
                  <SourceBox
                    selected={formik.values.type === AppTypes.DOCKER}
                    label="Docker"
                    icon={<DockerIcon size={40} />}
                    badge={
                      <Badge ml="1" colorScheme="red">
                        Coming soon
                      </Badge>
                    }
                    // Uncomment this when we can handle docker deployments
                    // onClick={() => formik.setFieldValue('type', 'DOCKER')}
                  />
                </Grid>
              </Box>

              <Box mt="36" display="flex" justifyContent="flex-end">
                <Button
                  isLoading={formik.isSubmitting}
                  disabled={!formik.values.type || !!formik.errors.type}
                  rightIcon={<FiArrowRight size={20} />}
                  type="submit"
                >
                  Next
                </Button>
              </Box>
            </form>
          </Box>
        </Box>
      </Container>
    </>
  );
}