Merge branch 'main' into dapp-fixes

dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { ArrowUpRight } from "#/assets/icons"
-import { Box, Icon } from "@chakra-ui/react"
+import { Box, BoxProps, Icon } from "@chakra-ui/react"
 import { Variants, motion } from "framer-motion"
 import { chakraUnitToPx } from "#/theme/utils"
 
@@ -34,18 +34,15 @@ const arrowBottomVariants: Variants = {
   }),
 }
 
-type ArrowUpRightAnimatedIconProps = {
+type ArrowUpRightAnimatedIconProps = BoxProps & {
   boxSize?: number
-  color?: string
 }
 
-export function ArrowUpRightAnimatedIcon({
-  boxSize = 4,
-  color = "brand.400",
-}: ArrowUpRightAnimatedIconProps) {
+export function ArrowUpRightAnimatedIcon(props: ArrowUpRightAnimatedIconProps) {
+  const { boxSize = 4, color = "inherit", ...restProps } = props
   const boxSizePx = chakraUnitToPx(boxSize)
   return (
-    <Box pos="relative" boxSize={boxSize} overflow="hidden">
+    <Box pos="relative" boxSize={boxSize} overflow="hidden" {...restProps}>
       {[
         { id: "arrow-up", variants: arrowUpVariants },
         { id: "arrow-bottom", variants: arrowBottomVariants },

dapp/src/components/TransactionHistory/Table/utils/pagination.tsx

@@ -19,6 +19,7 @@ export const PAGINATION_BUTTONS = [
   },
 ]
 
+// TODO: move to top level `utils` directory
 export const getPaginationState = (
   pageIndex: number,
   pageSize: number,

dapp/src/components/shared/Pagination/Pagination.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { PaginationContext } from "#/contexts"
+import { StackProps, VStack } from "@chakra-ui/react"
+
+export type PaginationProps<T> = Omit<StackProps, "as"> & {
+  data: T[]
+  pageSize?: number
+  defaultPage?: number
+}
+
+function Pagination<T>(props: PaginationProps<T>) {
+  const { data, children, pageSize = 10, defaultPage = 0, ...restProps } = props
+
+  const [page, setPage] = React.useState(defaultPage)
+
+  const pageData = React.useMemo(() => {
+    const startIndex = page * pageSize
+    const endIndex = startIndex + pageSize
+
+    return data.slice(startIndex, endIndex)
+  }, [data, page, pageSize])
+
+  const contextValue = React.useMemo(
+    () => ({
+      pageSize,
+      page,
+      setPage,
+      totalSize: data.length,
+      pageData,
+    }),
+    [pageSize, page, data, pageData],
+  )
+
+  return (
+    <PaginationContext.Provider value={contextValue}>
+      <VStack spacing={6} align="stretch" w="full" {...restProps}>
+        {children}
+      </VStack>
+    </PaginationContext.Provider>
+  )
+}
+
+export default Pagination

dapp/src/components/shared/Pagination/PaginationButton.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { Icon, IconButton, IconButtonProps } from "@chakra-ui/react"
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
+import { usePagination } from "#/hooks"
+
+type PaginationButtonProps = Omit<IconButtonProps, "aria-label" | "icon"> & {
+  mode: "previous" | "next"
+}
+
+function PaginationButton(props: PaginationButtonProps) {
+  const { mode, ...restProps } = props
+  const { page, setPage, totalSize, pageSize } = usePagination()
+
+  const handleClick = () => setPage(mode === "next" ? page + 1 : page - 1)
+  const isDisabled = React.useMemo(
+    () =>
+      mode === "next" ? page * pageSize + pageSize >= totalSize : page === 0,
+    [mode, page, pageSize, totalSize],
+  )
+
+  return (
+    <IconButton
+      variant="pagination"
+      rounded="full"
+      p={1.5}
+      boxSize={7}
+      minW="unset"
+      icon={
+        <Icon
+          as={mode === "next" ? IconArrowRight : IconArrowLeft}
+          strokeWidth={2}
+          boxSize={4}
+        />
+      }
+      aria-label={mode === "next" ? "Next" : "Previous"}
+      onClick={handleClick}
+      isDisabled={isDisabled}
+      {...restProps}
+    />
+  )
+}
+
+export default PaginationButton

dapp/src/components/shared/Pagination/PaginationPage.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import { Box, Stack, StackProps, useToken } from "@chakra-ui/react"
+import { useSize } from "@chakra-ui/react-use-size"
+import { AnimatePresence, Transition, Variants, motion } from "framer-motion"
+import { usePagination } from "#/hooks"
+
+const transition: Transition = {
+  type: "spring",
+  stiffness: 120,
+  damping: 16,
+  mass: 0.85,
+}
+
+const variants: Variants = {
+  enter: ({ direction, spacing }) => ({
+    x: `calc((100% + ${spacing}) * ${direction === "right" ? 1 : -1})`,
+    transition,
+  }),
+  center: {
+    x: 0,
+    transition,
+  },
+  exit: ({ direction, spacing }) => ({
+    x: `calc((100% + ${spacing}) * ${direction === "left" ? 1 : -1})`,
+    transition,
+  }),
+}
+
+type PaginationPageProps<T> = Omit<StackProps, "children"> & {
+  children: (pageData: T[]) => React.ReactNode
+  pageSpacing?: number | string
+}
+
+function PaginationPage<T>(props: PaginationPageProps<T>) {
+  const { children, pageSpacing = 0, ...restProps } = props
+  const { page, pageData } = usePagination()
+
+  const ref = React.useRef<HTMLDivElement>(null)
+  const { height } = useSize(ref) ?? { height: 0 }
+
+  const previousPage = React.useRef<number>(0)
+  React.useEffect(() => {
+    previousPage.current = page
+  }, [page])
+
+  const direction = page < previousPage.current ? "left" : "right"
+  const spacing = useToken("space", pageSpacing, "20%")
+
+  return (
+    <Box as={motion.div} layout animate={{ height, transition }}>
+      <Box ref={ref}>
+        <AnimatePresence
+          mode="popLayout"
+          custom={{ direction, spacing }}
+          initial={false}
+        >
+          <Stack
+            as={motion.div}
+            custom={{ direction, spacing }}
+            key={page}
+            variants={variants}
+            animate="center"
+            initial="enter"
+            exit="exit"
+            {...restProps}
+          >
+            {children(pageData as T[])}
+          </Stack>
+        </AnimatePresence>
+      </Box>
+    </Box>
+  )
+}
+
+export default PaginationPage

dapp/src/components/shared/Pagination/PaginationStatus.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { TextProps } from "@chakra-ui/react"
+import { getPaginationState } from "#/components/TransactionHistory/Table/utils"
+import { usePagination } from "#/hooks"
+import { TextSm } from "../Typography"
+
+type PaginationStatusProps = TextProps & {
+  dataLabel?: string
+}
+
+function PaginationStatus(props: PaginationStatusProps) {
+  const { dataLabel = "items", ...restProps } = props
+  const { page, pageSize, totalSize } = usePagination()
+
+  const { rowMin: rangeStart, rowMax: rangeEnd } = getPaginationState(
+    page,
+    pageSize,
+    totalSize,
+  )
+
+  return (
+    <TextSm {...restProps}>
+      Showing {rangeStart}-{rangeEnd} out of {totalSize} {dataLabel}
+    </TextSm>
+  )
+}
+
+export default PaginationStatus

dapp/src/components/shared/Pagination/index.ts

@@ -0,0 +1,4 @@
+export { default as Pagination } from "./Pagination"
+export { default as PaginationStatus } from "./PaginationStatus"
+export { default as PaginationPage } from "./PaginationPage"
+export { default as PaginationButton } from "./PaginationButton"

dapp/src/contexts/PaginationContext.ts

@@ -0,0 +1,12 @@
+import React from "react"
+
+type PaginationContextType<T = unknown> = {
+  pageSize: number
+  page: number
+  totalSize: number
+  setPage: React.Dispatch<React.SetStateAction<number>>
+  pageData: T[]
+} | null
+
+export const PaginationContext =
+  React.createContext<PaginationContextType>(null)

dapp/src/contexts/index.tsx

@@ -4,3 +4,4 @@ export * from "./LedgerWalletAPIProvider"
 export * from "./DocsDrawerContext"
 export * from "./SidebarContext"
 export * from "./StakeFlowContext"
+export * from "./PaginationContext"

dapp/src/hooks/index.ts

@@ -23,5 +23,6 @@ export * from "./useActivities"
 export * from "./useSize"
 export * from "./router"
 export * from "./useTransactionFee"
+export * from "./usePagination"
 export * from "./useModal"
 export * from "./useTransactionModal"

dapp/src/hooks/usePagination.ts

@@ -0,0 +1,10 @@
+import React from "react"
+import { PaginationContext } from "#/contexts"
+
+export const usePagination = () => {
+  const context = React.useContext(PaginationContext)
+  if (!context) {
+    throw new Error("usePagination must be used within a PaginationProvider")
+  }
+  return context
+}

dapp/src/pages/DashboardPage/DashboardCard.tsx

@@ -1,23 +1,23 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react"
+import { BoostArrowIcon } from "#/assets/icons"
+import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
+import IconTag from "#/components/shared/IconTag"
+import { TextMd } from "#/components/shared/Typography"
+import { useTransactionModal } from "#/hooks"
+import { ACTION_FLOW_TYPES, AmountType } from "#/types"
 import {
   Button,
-  CardHeader,
-  CardBody,
+  ButtonProps,
   Card,
+  CardBody,
+  CardHeader,
   CardProps,
-  Tag,
   HStack,
+  Tag,
   VStack,
-  ButtonProps,
 } from "@chakra-ui/react"
-import { TextMd } from "#/components/shared/Typography"
-import IconTag from "#/components/shared/IconTag"
-import { BoostArrowIcon } from "#/assets/icons"
-import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
-import { ACTION_FLOW_TYPES, AmountType } from "#/types"
 import { ActivitiesList } from "#/components/shared/ActivitiesList"
-import { useTransactionModal } from "#/hooks"
+import TransactionHistory from "./TransactionHistory"
 
 const buttonStyles: ButtonProps = {
   size: "lg",
@@ -40,7 +40,7 @@ export default function DashboardCard(props: DashboardCardProps) {
   const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
 
   return (
-    <Card px={5} py={10} gap={10} {...restProps}>
+    <Card px={5} py={10} gap={10} overflow="hidden" {...restProps}>
       <CardHeader p={0} textAlign="center">
         <TextMd fontWeight="bold">
           My position
@@ -96,6 +96,7 @@ export default function DashboardCard(props: DashboardCardProps) {
         </HStack>
 
         <ActivitiesList />
+        <TransactionHistory />
       </CardBody>
     </Card>
   )

dapp/src/pages/DashboardPage/DocsCard.tsx

@@ -23,7 +23,7 @@ export function DocsCard(props: CardProps) {
       {...props}
     >
       <HStack mb={5}>
-        <ArrowUpRightAnimatedIcon />
+        <ArrowUpRightAnimatedIcon color="brand.400" />
         <TextSm fontWeight="semibold">Documentation</TextSm>
       </HStack>
       <TextSm>Everything you need to know about our contracts.</TextSm>