Merge pull request #10470 from ethereum/migrate-eth-page

Migrate `eth` page

Author: pettinarip

src/components/ActionCard.tsx

@@ -9,6 +9,7 @@ import {
   LinkOverlay,
   Image,
   useColorModeValue,
+  LinkBoxProps,
 } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
@@ -26,7 +27,7 @@ const linkFocusStyles: BoxProps = {
   textDecoration: "none",
 }
 
-export interface IProps {
+export interface IProps extends Omit<LinkBoxProps, "title"> {
   children?: React.ReactNode
   to: string
   alt?: string
@@ -48,6 +49,7 @@ const ActionCard: React.FC<IProps> = ({
   className,
   isRight,
   isBottom = true,
+  ...rest
 }) => {
   const isImageURL = typeof image === "string"
   const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
@@ -63,6 +65,7 @@ const ActionCard: React.FC<IProps> = ({
       _focus={linkBoxFocusStyles}
       className={className}
       m={4}
+      {...rest}
     >
       <Flex
         minH="260px"

src/components/EthPriceCard.tsx

@@ -1,19 +1,18 @@
 import React, { useState, useEffect } from "react"
-import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
+import { Box, Flex, FlexProps, Heading, Icon } from "@chakra-ui/react"
 import { MdInfoOutline } from "react-icons/md"
 import axios from "axios"
 
 import Translation from "./Translation"
 import Link from "./Link"
 import Tooltip from "./Tooltip"
 
-export interface IProps {
-  className?: string
+export interface IProps extends FlexProps {
   isLeftAlign?: boolean
 }
 
 // TODO add prop to left vs. center align
-const EthPriceCard: React.FC<IProps> = ({ className, isLeftAlign = false }) => {
+const EthPriceCard: React.FC<IProps> = ({ isLeftAlign = false, ...rest }) => {
   const [state, setState] = useState({
     currentPriceUSD: "",
     percentChangeUSD: 0,
@@ -75,7 +74,6 @@ const EthPriceCard: React.FC<IProps> = ({ className, isLeftAlign = false }) => {
 
   return (
     <Flex
-      className={className}
       direction="column"
       align={isLeftAlign ? "flex-start" : "center"}
       justify="space-between"
@@ -93,6 +91,7 @@ const EthPriceCard: React.FC<IProps> = ({ className, isLeftAlign = false }) => {
       maxW="420px"
       maxH="192px"
       borderRadius="base"
+      {...rest}
     >
       <Heading
         as="h4"

src/components/HorizontalCard.tsx

@@ -2,10 +2,10 @@ import React, { ReactNode } from "react"
 import Emoji from "./Emoji"
 import { Text, Box, Flex, FlexProps } from "@chakra-ui/react"
 
-export interface IProps extends FlexProps {
+export interface IProps extends Omit<FlexProps, "title"> {
   emoji: string
+  title: ReactNode
   description: ReactNode
-  className?: string
   emojiSize?: number
 }
 
@@ -14,11 +14,10 @@ const HorizontalCard: React.FC<IProps> = ({
   title,
   description,
   children,
-  className,
   emojiSize,
   ...rest
 }) => (
-  <Flex borderRadius="base" className={className} {...rest}>
+  <Flex borderRadius="base" {...rest}>
     <Emoji fontSize={`${emojiSize}rem`} text={emoji} />
     <Box flexGrow="0" flexShrink="1" flexBasis="75%" ml="8">
       <Text fontSize="lg">{title}</Text>