Style see more button

cartridge-gg · Nov 22, 2024 · f29bb7c · f29bb7c
1 parent a838b47
commit f29bb7c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 41 deletions.
diff --git a/packages/profile/src/components/activity.tsx b/packages/profile/src/components/activity.tsx
@@ -5,6 +5,7 @@ import {
   CheckIcon,
   CopyAddress,
   ExternalIcon,
+  ScrollArea,
 } from "@cartridge/ui-next";
 import { useInfiniteTokenTransfersQuery } from "@cartridge/utils/api/indexer";
 import {
@@ -55,52 +56,61 @@ export function Activity() {
           case "success": {
             return (
               <LayoutContent>
-                <Card>
-                  {data.pages.map((p) =>
-                    p.tokenTransfers?.edges.length ? (
-                      p.tokenTransfers.edges.map(({ node: t }) => {
-                        switch (t.tokenMetadata.__typename) {
-                          case "ERC20__Token": {
-                            return (
-                              <Link
-                                to={StarkscanUrl(
-                                  chainId as constants.StarknetChainId,
-                                ).transaction(t.transactionHash)}
-                                target="_blank"
-                                key={t.transactionHash}
-                              >
-                                <CardContent className="flex items-center justify-between text-accent-foreground">
-                                  <div className="flex items-center gap-1">
-                                    <CheckIcon size="sm" />
-                                    <div>
-                                      Send{" "}
-                                      {Number(t.tokenMetadata.amount) /
-                                        10 **
-                                        Number(
-                                          t.tokenMetadata?.decimals,
-                                        )}{" "}
-                                      {t.tokenMetadata?.symbol}
+                <ScrollArea>
+                  <Card>
+                    {data.pages.map((p) =>
+                      p.tokenTransfers?.edges.length ? (
+                        p.tokenTransfers.edges.map(({ node: t }) => {
+                          switch (t.tokenMetadata.__typename) {
+                            case "ERC20__Token": {
+                              return (
+                                <Link
+                                  to={StarkscanUrl(
+                                    chainId as constants.StarknetChainId,
+                                  ).transaction(t.transactionHash)}
+                                  target="_blank"
+                                  key={t.transactionHash}
+                                >
+                                  <CardContent className="flex items-center justify-between text-accent-foreground">
+                                    <div className="flex items-center gap-1">
+                                      <CheckIcon size="sm" />
+                                      <div>
+                                        Send{" "}
+                                        {Number(t.tokenMetadata.amount) /
+                                          10 **
+                                            Number(
+                                              t.tokenMetadata?.decimals,
+                                            )}{" "}
+                                        {t.tokenMetadata?.symbol}
+                                      </div>
                                     </div>
-                                  </div>
 
-                                  <ExternalIcon />
-                                </CardContent>
-                              </Link>
-                            );
+                                    <ExternalIcon />
+                                  </CardContent>
+                                </Link>
+                              );
+                            }
+                            case "ERC721__Token":
+                              return null;
                           }
-                          case "ERC721__Token":
-                            return null;
-                        }
-                      })
-                    ) : (
-                      <CardContent>No data</CardContent>
-                    ),
-                  )}
+                        })
+                      ) : (
+                        <CardContent>No data</CardContent>
+                      ),
+                    )}
+                  </Card>
 
                   {hasNextPage && (
-                    <Button onClick={() => fetchNextPage()}>More</Button>
+                    <Button
+                      className="w-full my-2"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => fetchNextPage()}
+                    >
+                      See More
+                    </Button>
                   )}
-                </Card>
+                </ScrollArea>
               </LayoutContent>
             );
           }

diff --git a/packages/ui-next/src/components/primitives/button.tsx b/packages/ui-next/src/components/primitives/button.tsx
@@ -23,7 +23,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 tracking-wide text-base",
-        // sm: "h-9 px-3 text-sm",
+        sm: "h-9 px-3 text-sm",
         // lg: "h-11 px-8 tracking-widest text-lg",
         icon: "h-10 w-10",
       },