Waj/lending UI

app/lending/components/cTokenRow.tsx

@@ -0,0 +1,64 @@
+import Button from "@/components/button/button";
+import Container from "@/components/container/container";
+import Icon from "@/components/icon/icon";
+import Spacer from "@/components/layout/spacer";
+import Text from "@/components/text";
+import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens";
+import { formatBalance } from "@/utils/tokenBalances.utils";
+
+export const CTokenRow = ({
+  cToken,
+  onClick,
+}: {
+  cToken: CTokenWithUserData;
+  onClick: () => void;
+}) => [
+  <>
+    <Icon icon={{ url: cToken.underlying.logoURI, size: 30 }} />
+    <Spacer width="10px" />
+    <Text theme="primary-dark" key={cToken.name + cToken.name}>
+      {cToken.underlying.name}
+    </Text>
+  </>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.supplyApy"}>
+    {cToken.supplyApy + "%"}
+  </Text>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.balance"}>
+    {formatBalance(
+      cToken.userDetails?.balanceOfUnderlying ?? "0",
+      cToken.underlying.decimals,
+      {
+        commify: true,
+      }
+    )}
+  </Text>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.ubalance"}>
+    {formatBalance(
+      cToken.userDetails?.supplyBalanceInUnderlying ?? "0",
+      cToken.underlying.decimals,
+      {
+        commify: true,
+      }
+    )}
+  </Text>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.CF"}>
+    {formatBalance(cToken.collateralFactor, 16) + "%"}
+  </Text>,
+  <Container key={cToken.name + "Test"} direction="row">
+    <Button
+      key={cToken.name + "cToken.supply"}
+      color="primary"
+      onClick={onClick}
+    >
+      Supply
+    </Button>
+    <Spacer width="10px" />
+    <Button
+      key={cToken.name + "cToken.withdraw"}
+      color="secondary"
+      onClick={onClick}
+    >
+      Withdraw
+    </Button>
+  </Container>,
+];

app/lending/components/highlightCard.module.scss

@@ -0,0 +1,39 @@
+.container {
+  background: var(--card-sub-surface-color, #dfdfdf);
+  box-shadow: 6px 6px 0px 0px rgba(17, 17, 17, 0.15);
+
+  margin: 0 auto;
+  //   width: 920px;
+  //   height: 320px;
+  width: 100%;
+  padding-bottom: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.header {
+  background: var(--card-primary-color);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.amounts {
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.actions {
+  padding: 1rem 2rem;
+  display: flex;
+  width: 70%;
+  gap: 2rem;
+}
+
+.logo {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translate(16%, 16%);
+}

app/lending/components/highlightCard.tsx

@@ -0,0 +1,100 @@
+import styles from "./highlightCard.module.scss";
+import Button from "@/components/button/button";
+import Image from "next/image";
+import Item from "./item";
+import Icon from "@/components/icon/icon";
+interface Props {
+  token: {
+    name: string;
+    imgUrl: string;
+    supplyAPR: string;
+    borrowAPR: string;
+    walletBalance?: string;
+    amountStaked?: string;
+    outStandingDebt?: string;
+    supply: () => void;
+    borrow: () => void;
+  };
+}
+const HighlightCard = (props: Props) => {
+  return (
+    <div className={styles.container}>
+      <Image
+        className={styles.logo}
+        src={props.token.imgUrl}
+        alt={"logo"}
+        height={200}
+        width={200}
+      />
+      <div className={styles.header}>
+        <Item name="Asset" value={props.token.name} theme="primary-light" />
+        <Item
+          name="Supply APR"
+          value={props.token.supplyAPR}
+          theme="primary-light"
+        />
+        <Item
+          name="Borrow APR"
+          value={props.token.borrowAPR}
+          theme="primary-light"
+        />
+      </div>
+      <div className={styles.amounts}>
+        <Item
+          name="Wallet Balance"
+          value={props.token.walletBalance ?? "0"}
+          postChild={
+            <Icon
+              themed
+              icon={{
+                url: "/tokens/note.svg",
+                size: 24,
+              }}
+            />
+          }
+        />
+        <Item
+          name="Amount Staked"
+          value={props.token.amountStaked ?? "0"}
+          postChild={
+            <Icon
+              themed
+              icon={{
+                url: "/tokens/note.svg",
+                size: 24,
+              }}
+            />
+          }
+        />
+        <Item
+          name="Outstanding Debt"
+          value={props.token.outStandingDebt ?? "0"}
+        />
+      </div>
+
+      <div className={styles.actions}>
+        <Button
+          fontFamily="proto_mono"
+          width={"fill"}
+          height={"large"}
+          fontSize={"lg"}
+          onClick={props.token.supply}
+        >
+          Stake note
+        </Button>
+
+        <Button
+          fontFamily="proto_mono"
+          width={"fill"}
+          height={"large"}
+          fontSize={"lg"}
+          onClick={props.token.borrow}
+        >
+          borrow note
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default HighlightCard;

app/lending/components/item.module.scss

@@ -0,0 +1,18 @@
+.item {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 16px;
+}
+
+.value {
+  font-size: 32px !important;
+}
+
+.postChild {
+  margin-left: -1rem;
+}

app/lending/components/item.tsx

@@ -0,0 +1,28 @@
+import styles from "./item.module.scss";
+import Text from "@/components/text";
+
+type ItemProps = {
+  name: string;
+  value: string;
+  postChild?: React.ReactNode;
+  theme?:
+    | "primary-light"
+    | "primary-dark"
+    | "secondary-light"
+    | "secondary-dark"
+    | undefined;
+};
+
+const Item = ({ name, value, theme, postChild }: ItemProps) => (
+  <div className={styles.item}>
+    <Text className={styles.title} theme={theme} font="proto_mono">
+      {name}
+    </Text>
+    <Text className={styles.value} theme={theme} font="proto_mono">
+      {value}{" "}
+      {postChild && <span className={styles.postChild}>{postChild}</span>}
+    </Text>
+  </div>
+);
+
+export default Item;

app/lending/components/modal/modal.module.scss

@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  //   min-height: 42rem;
+  margin: 0 -15px;
+  margin-bottom: -15px;
+}
+
+.card {
+  border-radius: var(--border-radius, 0px);
+  background: var(--card-surface-color, #f1f1f1);
+  padding: 1rem;
+  gap: 10px;
+  /* old */
+  box-shadow: -3px -3px 0px 0px rgba(17, 17, 17, 0.2) inset,
+    2px 2px 0px 0px rgba(255, 255, 255, 0.4) inset;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}