🚧

exactly · Nov 28, 2024 · 87fc991 · 87fc991
1 parent 5ab4bd6
commit 87fc991
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 90 deletions.
diff --git a/src/components/payments/NextPayment.tsx b/src/components/payments/NextPayment.tsx
@@ -2,7 +2,7 @@ import { marketUSDCAddress } from "@exactly/common/generated/chain";
 import { WAD } from "@exactly/lib";
 import { Coins } from "@tamagui/lucide-icons";
 import { useQuery } from "@tanstack/react-query";
-import { formatDistance, intlFormat, isAfter } from "date-fns";
+import { format, formatDistance, isAfter } from "date-fns";
 import { router } from "expo-router";
 import React from "react";
 import { ms } from "react-native-size-matters";
@@ -15,7 +15,6 @@ import View from "../shared/View";
 export default function NextPayment() {
   const { data: hidden } = useQuery<boolean>({ queryKey: ["settings", "sensitive"] });
   const { market: USDCMarket } = useMarketAccount(marketUSDCAddress);
-
   const usdDue = new Map<bigint, { previewValue: bigint; position: bigint }>();
   if (USDCMarket) {
     const { fixedBorrowPositions, usdPrice, decimals } = USDCMarket;
@@ -30,60 +29,30 @@ export default function NextPayment() {
   const duePayment = usdDue.get(maturity ?? 0n);
   const discount = duePayment ? Number(WAD - (duePayment.previewValue * WAD) / duePayment.position) / 1e18 : 0;
   return (
-    <View backgroundColor="$backgroundSoft" borderRadius="$r3" padding="$s4" gap="$s5">
+    <View backgroundColor="$backgroundSoft" paddingTop="$s8">
       {maturity ? (
         <>
-          <View>
-            <View flexDirection="row" alignItems="center" justifyContent="space-between">
-              <Text
-                emphasized
-                headline
-                color={
-                  isAfter(new Date(Number(maturity) * 1000), new Date()) ? "$uiNeutralPrimary" : "$uiErrorSecondary"
-                }
-              >
-                {isAfter(new Date(Number(maturity) * 1000), new Date())
-                  ? `Due in ${formatDistance(new Date(), new Date(Number(maturity) * 1000))}`
-                  : `${formatDistance(new Date(Number(maturity) * 1000), new Date())} past due`}
-              </Text>
-            </View>
-            <Text footnote color="$uiNeutralSecondary">
-              {intlFormat(new Date(Number(maturity) * 1000), { dateStyle: "medium" }).toUpperCase()}
-            </Text>
-          </View>
           {duePayment && (
             <View gap="$s5">
-              <View flexDirection="column" justifyContent="center" alignItems="center" gap="$s4">
-                {!hidden && (
-                  <>
-                    <Text
-                      pill
-                      caption2
-                      padding="$s2"
-                      backgroundColor={
-                        discount > 0 ? "$interactiveBaseSuccessSoftDefault" : "$interactiveBaseErrorSoftDefault"
-                      }
-                      color={discount > 0 ? "$uiSuccessSecondary" : "$uiErrorSecondary"}
-                    >
-                      {discount > 0 ? "PAY NOW AND SAVE " : "DAILY PENALTIES "}
-                      {(discount > 0 ? discount : discount * -1).toLocaleString(undefined, {
-                        style: "percent",
-                        minimumFractionDigits: 2,
-                        maximumFractionDigits: 2,
-                      })}
-                    </Text>
-                  </>
-                )}
-
-                {discount > 0 && (
-                  <Text sensitive body strikeThrough color="$uiNeutralSecondary">
-                    {(Number(duePayment.position) / 1e18).toLocaleString(undefined, {
-                      style: "currency",
-                      currency: "USD",
-                      currencyDisplay: "narrowSymbol",
-                    })}
+              <View flexDirection="row" alignItems="center" justifyContent="center">
+                <Text
+                  secondary
+                  textAlign="center"
+                  emphasized
+                  subHeadline
+                  color={
+                    isAfter(new Date(Number(maturity) * 1000), new Date()) ? "$uiNeutralSecondary" : "$uiErrorSecondary"
+                  }
+                >
+                  {isAfter(new Date(Number(maturity) * 1000), new Date())
+                    ? `Due in ${formatDistance(new Date(), new Date(Number(maturity) * 1000))}`
+                    : `${formatDistance(new Date(Number(maturity) * 1000), new Date())} past due`}
+                  <Text secondary textAlign="center" emphasized subHeadline color="$uiNeutralSecondary">
+                    &nbsp;-&nbsp;{format(new Date(Number(maturity) * 1000), "MMM dd, yyyy")}
                   </Text>
-                )}
+                </Text>
+              </View>
+              <View flexDirection="column" justifyContent="center" alignItems="center" gap="$s4">
                 <Text
                   sensitive
                   textAlign="center"
@@ -101,6 +70,33 @@ export default function NextPayment() {
                     currencyDisplay: "narrowSymbol",
                   })}
                 </Text>
+                {discount > 0 && (
+                  <Text sensitive body strikeThrough color="$uiNeutralSecondary">
+                    {(Number(duePayment.position) / 1e18).toLocaleString(undefined, {
+                      style: "currency",
+                      currency: "USD",
+                      currencyDisplay: "narrowSymbol",
+                    })}
+                  </Text>
+                )}
+                {!hidden && (
+                  <Text
+                    pill
+                    caption2
+                    padding="$s2"
+                    backgroundColor={
+                      discount > 0 ? "$interactiveBaseSuccessSoftDefault" : "$interactiveBaseErrorSoftDefault"
+                    }
+                    color={discount > 0 ? "$uiSuccessSecondary" : "$uiErrorSecondary"}
+                  >
+                    {discount > 0 ? "PAY NOW AND SAVE " : "DAILY PENALTIES "}
+                    {(discount > 0 ? discount : discount * -1).toLocaleString(undefined, {
+                      style: "percent",
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2,
+                    })}
+                  </Text>
+                )}
               </View>
               <View
                 flexDirection="row"
@@ -118,7 +114,7 @@ export default function NextPayment() {
                   main
                   spaced
                   halfWidth
-                  iconAfter={<Coins color="$interactiveOnBaseBrandDefault" />}
+                  iconAfter={<Coins color="$interactiveOnBaseBrandDefault" strokeWidth={2.5} />}
                 >
                   Pay
                 </Button>

diff --git a/src/components/payments/Payments.tsx b/src/components/payments/Payments.tsx
@@ -1,8 +1,10 @@
 import { marketUSDCAddress, previewerAddress } from "@exactly/common/generated/chain";
+import { Eye, EyeOff, Info } from "@tamagui/lucide-icons";
+import { useQuery } from "@tanstack/react-query";
 import React from "react";
-import { RefreshControl } from "react-native";
+import { Pressable, RefreshControl } from "react-native";
 import { ms } from "react-native-size-matters";
-import { ScrollView, useTheme } from "tamagui";
+import { ScrollView, useTheme, XStack } from "tamagui";
 import { zeroAddress } from "viem";
 
 import Empty from "./Empty";
@@ -19,6 +21,10 @@ import View from "../shared/View";
 export default function Payments() {
   const theme = useTheme();
   const { market, account } = useMarketAccount(marketUSDCAddress);
+  const { data: hidden } = useQuery<boolean>({ queryKey: ["settings", "sensitive"] });
+  function toggle() {
+    queryClient.setQueryData(["settings", "sensitive"], !hidden);
+  }
   const { refetch, isPending } = useReadPreviewerExactly({
     address: previewerAddress,
     args: [account ?? zeroAddress],
@@ -51,40 +57,29 @@ export default function Payments() {
             <Empty />
           ) : (
             <>
-              <View padded gap="$s5" backgroundColor="$backgroundSoft">
-                <View flexDirection="row" gap={ms(10)} justifyContent="space-between" alignItems="center">
+              <View padded backgroundColor="$backgroundSoft">
+                <XStack gap={ms(10)} justifyContent="space-between" alignItems="center">
                   <Text fontSize={ms(20)} fontWeight="bold">
-                    Payments
+                    Next Payment Due
                   </Text>
-                </View>
-                <View gap="$s8">
-                  <View gap="$s6">
-                    <View flexDirection="column" justifyContent="center" alignItems="center">
-                      <Text
-                        sensitive
-                        textAlign="center"
-                        fontFamily="$mono"
-                        fontSize={ms(40)}
-                        fontWeight="bold"
-                        overflow="hidden"
-                      >
-                        {(Number(usdDue) / 1e18).toLocaleString(undefined, {
-                          style: "currency",
-                          currency: "USD",
-                          currencyDisplay: "narrowSymbol",
-                        })}
-                      </Text>
-                    </View>
-                    <View gap="$s3" alignItems="center">
-                      <Text emphasized title3 color="$uiNeutralSecondary">
-                        Total debt
-                      </Text>
-                    </View>
-                  </View>
-                </View>
+                  <XStack alignItems="center" gap={16}>
+                    <Pressable onPress={toggle} hitSlop={ms(15)}>
+                      {hidden ? <EyeOff color="$uiNeutralPrimary" /> : <Eye color="$uiNeutralPrimary" />}
+                    </Pressable>
+                    <Pressable
+                      // TODO implement
+                      // onPress={() => {
+                      //   presentContent("9994746").catch(handleError);
+                      // }}
+                      hitSlop={ms(15)}
+                    >
+                      <Info color="$uiNeutralPrimary" />
+                    </Pressable>
+                  </XStack>
+                </XStack>
+                <NextPayment />
               </View>
               <View padded gap="$s6">
-                <NextPayment />
                 <UpcomingPayments />
               </View>
             </>

diff --git a/src/components/payments/UpcomingPayments.tsx b/src/components/payments/UpcomingPayments.tsx
@@ -1,6 +1,8 @@
 import { previewerAddress } from "@exactly/common/generated/chain";
-import { intlFormat } from "date-fns";
+import { ChevronRight } from "@tamagui/lucide-icons";
+import { format } from "date-fns";
 import React from "react";
+import { XStack } from "tamagui";
 import { zeroAddress } from "viem";
 import { useAccount } from "wagmi";
 
@@ -32,7 +34,7 @@ export default function UpcomingPayments() {
     <View backgroundColor="$backgroundSoft" borderRadius="$r3" padding="$s4" gap="$s6">
       <View flexDirection="row" gap="$s3" alignItems="center" justifyContent="space-between">
         <Text emphasized headline flex={1}>
-          Next payments
+          Upcoming payments
         </Text>
       </View>
       {payments.length > 0 ? (
@@ -52,18 +54,19 @@ function ListItem({ maturity, amount }: { maturity: bigint; amount: bigint }) {
   return (
     <View flexDirection="row" justifyContent="space-between" alignItems="center">
       <View>
-        <Text>{intlFormat(new Date(Number(maturity) * 1000), { dateStyle: "medium" })}</Text>
+        <Text subHeadline>{format(new Date(Number(maturity) * 1000), "MMM dd, yyyy")}</Text>
       </View>
       <View flexDirection="row" alignItems="center" gap="$s2">
-        <View>
-          <Text sensitive>
+        <XStack alignItems="center" gap="$s2">
+          <Text sensitive emphasized body>
             {(Number(amount) / 1e18).toLocaleString(undefined, {
               style: "currency",
               currency: "USD",
               currencyDisplay: "narrowSymbol",
             })}
           </Text>
-        </View>
+          <ChevronRight size={24} color="$iconBrandDefault" />
+        </XStack>
       </View>
     </View>
   );