From 9f2ce7559a2f4b6436c7b7ea56b2f2ee80337659 Mon Sep 17 00:00:00 2001
From: Connor Johnston <cgjohn@umich.edu>
Date: Fri, 27 Sep 2024 12:39:30 -0400
Subject: [PATCH] Adds gradient utils and matches assets card to account card
 color (#246)

---
 .../AccountAssets/AccountAssets.tsx           | 10 +++++-
 renderer/components/AccountRow/AccountRow.tsx |  5 +--
 .../UserAccountsList/UserAccountsList.tsx     | 10 ++----
 renderer/ui/ShadowCard/ShadowCard.tsx         | 17 +++-------
 renderer/utils/gradientUtils.ts               | 31 +++++++++++++++++++
 5 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 renderer/utils/gradientUtils.ts

diff --git a/renderer/components/AccountAssets/AccountAssets.tsx b/renderer/components/AccountAssets/AccountAssets.tsx
index 47f4ca5d..6e3c4fd4 100644
--- a/renderer/components/AccountAssets/AccountAssets.tsx
+++ b/renderer/components/AccountAssets/AccountAssets.tsx
@@ -21,6 +21,10 @@ import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
 import { ArrowReceive } from "@/ui/SVGs/ArrowReceive";
 import { ArrowSend } from "@/ui/SVGs/ArrowSend";
 import { CurrencyUtils } from "@/utils/currency";
+import {
+  getAddressGradientColor,
+  getGradientObject,
+} from "@/utils/gradientUtils";
 import { formatOre } from "@/utils/ironUtils";
 
 import { AccountSyncingProgress } from "../AccountSyncingProgress/AccountSyncingProgress";
@@ -71,13 +75,17 @@ export function AccountAssets({ accountName }: { accountName: string }) {
   const isAccountSendEligible =
     !accountData.status.viewOnly || accountData.isLedger;
 
+  const cardBg = getGradientObject(
+    getAddressGradientColor(accountData.address),
+  ).to;
+
   return (
     <Box>
       <LightMode>
         <ShadowCard
           contentContainerProps={{
             p: 0,
-            bg: COLORS.VIOLET,
+            bg: cardBg,
           }}
           mb={10}
         >
diff --git a/renderer/components/AccountRow/AccountRow.tsx b/renderer/components/AccountRow/AccountRow.tsx
index 8f79088f..2bbff8cd 100644
--- a/renderer/components/AccountRow/AccountRow.tsx
+++ b/renderer/components/AccountRow/AccountRow.tsx
@@ -15,10 +15,11 @@ import { trpcReact } from "@/providers/TRPCProvider";
 import { ChakraLink } from "@/ui/ChakraLink/ChakraLink";
 import { COLORS } from "@/ui/colors";
 import { PillButton } from "@/ui/PillButton/PillButton";
-import { ShadowCard, type GradientOptions } from "@/ui/ShadowCard/ShadowCard";
+import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
 import { ArrowReceive } from "@/ui/SVGs/ArrowReceive";
 import { ArrowSend } from "@/ui/SVGs/ArrowSend";
 import { LogoSm } from "@/ui/SVGs/LogoSm";
+import type { GradientColors } from "@/utils/gradientUtils";
 import { formatOre } from "@/utils/ironUtils";
 
 import { AccountSyncingProgress } from "../AccountSyncingProgress/AccountSyncingProgress";
@@ -43,7 +44,7 @@ const messages = defineMessages({
 });
 
 type AccountRowProps = {
-  color: GradientOptions;
+  color: GradientColors;
   name: string;
   balance: string;
   address: string;
diff --git a/renderer/components/UserAccountsList/UserAccountsList.tsx b/renderer/components/UserAccountsList/UserAccountsList.tsx
index 9f5bdfe3..5885c660 100644
--- a/renderer/components/UserAccountsList/UserAccountsList.tsx
+++ b/renderer/components/UserAccountsList/UserAccountsList.tsx
@@ -11,7 +11,7 @@ import { useState } from "react";
 import { defineMessages, useIntl } from "react-intl";
 
 import { TRPCRouterOutputs, trpcReact } from "@/providers/TRPCProvider";
-import { gradientOptions } from "@/ui/ShadowCard/ShadowCard";
+import { getAddressGradientColor } from "@/utils/gradientUtils";
 import { parseOre } from "@/utils/ironUtils";
 
 import { AccountRow } from "../AccountRow/AccountRow";
@@ -80,12 +80,6 @@ const sortOptions: Array<SortOption> = [
   },
 ];
 
-function getGradientColor(address: string) {
-  const bigAddress = BigInt(`0x${address}`);
-  const bigLength = BigInt(gradientOptions.length);
-  return gradientOptions[Number(bigAddress % bigLength)];
-}
-
 export function UserAccountsList() {
   const { formatMessage } = useIntl();
   const [searchInput, setSearchInput] = useState("");
@@ -138,7 +132,7 @@ export function UserAccountsList() {
           return (
             <AccountRow
               key={account.name}
-              color={getGradientColor(account.address)}
+              color={getAddressGradientColor(account.address)}
               name={account.name}
               balance={account.balances.iron.confirmed}
               address={account.address}
diff --git a/renderer/ui/ShadowCard/ShadowCard.tsx b/renderer/ui/ShadowCard/ShadowCard.tsx
index 11a8a4d1..904c2ee1 100644
--- a/renderer/ui/ShadowCard/ShadowCard.tsx
+++ b/renderer/ui/ShadowCard/ShadowCard.tsx
@@ -1,26 +1,17 @@
 import { Box, BoxProps } from "@chakra-ui/react";
 
-import { COLORS, GRADIENTS } from "../colors";
+import { makeGradient, type GradientColors } from "@/utils/gradientUtils";
+
+import { COLORS } from "../colors";
 
 const SHARED_PROPS = {
   border: "1px solid black",
   borderRadius: "4px",
 };
 
-export type GradientOptions = keyof typeof GRADIENTS;
-
-export const gradientOptions = Object.keys(GRADIENTS) as Array<GradientOptions>;
-
-function makeGradient(gradient: GradientOptions, isShadow?: boolean) {
-  const { from, to } = GRADIENTS[gradient];
-  return `linear-gradient(to right, ${
-    isShadow ? "white" : from
-  } 0%, ${to} 100%)`;
-}
-
 type Props = BoxProps & {
   contentContainerProps?: BoxProps;
-  gradient?: GradientOptions;
+  gradient?: GradientColors;
   hoverable?: boolean;
   cardOffset?: string;
 };
diff --git a/renderer/utils/gradientUtils.ts b/renderer/utils/gradientUtils.ts
new file mode 100644
index 00000000..9e2aba45
--- /dev/null
+++ b/renderer/utils/gradientUtils.ts
@@ -0,0 +1,31 @@
+import { GRADIENTS } from "@/ui/colors";
+
+export type GradientColors = keyof typeof GRADIENTS;
+
+const gradientColors = Object.keys(GRADIENTS) as Array<GradientColors>;
+
+/**
+ * Creates a CSS linear gradient string based on the provided gradient color.
+ */
+export function makeGradient(gradient: GradientColors, isShadow?: boolean) {
+  const { from, to } = GRADIENTS[gradient];
+  return `linear-gradient(to right, ${
+    isShadow ? "white" : from
+  } 0%, ${to} 100%)`;
+}
+
+/**
+ * Determines a gradient color based on an address.
+ */
+export function getAddressGradientColor(address: string) {
+  const bigAddress = BigInt(`0x${address}`);
+  const bigLength = BigInt(gradientColors.length);
+  return gradientColors[Number(bigAddress % bigLength)];
+}
+
+/**
+ * Retrieves the gradient object for a given gradient color.
+ */
+export function getGradientObject(gradient: GradientColors) {
+  return GRADIENTS[gradient];
+}