feat(rakki): Replace placeholders with contract values

TERITORI · Dec 20, 2024 · 70ff903 · 70ff903
1 parent 2f5bf64
commit 70ff903
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 55 deletions.
diff --git a/packages/screens/Rakki/RakkiScreen.tsx b/packages/screens/Rakki/RakkiScreen.tsx
@@ -18,8 +18,6 @@ import { sectionLabelCStyle } from "@/screens/Rakki/styles";
 import { ScreenFC } from "@/utils/navigation";
 import { layout } from "@/utils/style/layout";
 
-// TODO: replace all placeholders text with real values
-
 export const RakkiScreen: ScreenFC<"Rakki"> = () => {
   const networkId = useSelectedNetworkId();
   const { height } = useMaxResolution();
@@ -65,7 +63,11 @@ export const RakkiScreen: ScreenFC<"Rakki"> = () => {
           networkId={networkId}
           style={{ marginTop: layout.spacing_x4 }}
         />
-        <Help style={{ marginTop: 60 }} />
+        <Help
+          networkId={networkId}
+          info={rakkiInfo}
+          style={{ marginTop: 60 }}
+        />
         <RakkiHistory
           info={rakkiInfo}
           networkId={networkId}

diff --git a/packages/screens/Rakki/components/BuyTickets/BuyTicketsModal.tsx b/packages/screens/Rakki/components/BuyTickets/BuyTicketsModal.tsx
@@ -65,6 +65,22 @@ export const BuyTicketsModal: FC<{
   const canBuy = ticketAmountNumber.gt(0) && canPay;
   const { wrapWithFeedback } = useFeedbacks();
 
+  const prettyTicketPrice = prettyPrice(
+    networkId,
+    info.config.ticket_price.amount,
+    info.config.ticket_price.denom,
+  );
+  const prettyTotalPrice = prettyPrice(
+    networkId,
+    totalPrice.toString(),
+    info.config.ticket_price.denom,
+  );
+  const prettyAvailableBalance = prettyPrice(
+    networkId,
+    ticketDenomBalance,
+    info.config.ticket_price.denom,
+  );
+
   const onPressBuyTickets = wrapWithFeedback(async () => {
     if (!selectedWallet?.address) {
       throw new Error("No wallet with valid address selected");
@@ -166,11 +182,7 @@ export const BuyTicketsModal: FC<{
                 ]}
                 gradientType="yellow"
               >
-                {prettyPrice(
-                  networkId,
-                  info.config.ticket_price.amount,
-                  info.config.ticket_price.denom,
-                )}
+                {prettyTicketPrice}
               </GradientText>
             </BrandText>
           </Box>
@@ -236,11 +248,7 @@ export const BuyTicketsModal: FC<{
                   Total price
                 </BrandText>
                 <GradientText gradientType="yellow" style={fontSemibold14}>
-                  {prettyPrice(
-                    networkId,
-                    totalPrice.toString(),
-                    info.config.ticket_price.denom,
-                  )}
+                  {prettyTotalPrice}
                 </GradientText>
               </View>
             </View>
@@ -286,11 +294,7 @@ export const BuyTicketsModal: FC<{
                     },
                   ]}
                 >
-                  {prettyPrice(
-                    networkId,
-                    ticketDenomBalance,
-                    info.config.ticket_price.denom,
-                  )}
+                  {prettyAvailableBalance}
                 </BrandText>
               </BrandText>
             )}

diff --git a/packages/screens/Rakki/components/GameBox.tsx b/packages/screens/Rakki/components/GameBox.tsx
@@ -2,6 +2,8 @@ import Long from "long";
 import { FC } from "react";
 import { StyleProp, View } from "react-native";
 
+import { netCurrentPrizeAmount } from "./../utils";
+
 import { BrandText } from "@/components/BrandText";
 import { Box, BoxStyle } from "@/components/boxes/Box";
 import { Info } from "@/contracts-clients/rakki/Rakki.types";
@@ -23,16 +25,21 @@ export const GameBox: FC<{
   const { ticketsCount: userTicketsCount } = useRakkiTicketsCountByUser(
     selectedWallet?.userId,
   );
-  const totalPrizeAmount = Long.fromString(info.config.ticket_price.amount).mul(
-    info.current_tickets_count,
-  );
   const userAmount = userTicketsCount
     ? Long.fromString(info.config.ticket_price.amount).mul(userTicketsCount)
     : 0;
-  const feePrizeAmount = totalPrizeAmount
-    .mul(info.config.fee_per10k)
-    .div(10000);
-  const winnerPrizeAmount = totalPrizeAmount.sub(feePrizeAmount);
+
+  const prettyCurrentPrizeAmount = prettyPrice(
+    networkId,
+    netCurrentPrizeAmount(info),
+    info.config.ticket_price.denom,
+  );
+  const prettyUserTicketsPriceAmount = prettyPrice(
+    networkId,
+    userAmount.toString(),
+    info.config.ticket_price.denom,
+  );
+
   return (
     <Box notched style={[{ backgroundColor: neutral22 }, style]}>
       <Box
@@ -70,11 +77,7 @@ export const GameBox: FC<{
       >
         <BrandText style={gameBoxLabelCStyle}>Prize Pot</BrandText>
         <TicketsAndPrice
-          price={prettyPrice(
-            networkId,
-            winnerPrizeAmount.toString(),
-            info.config.ticket_price.denom,
-          )}
+          price={prettyCurrentPrizeAmount}
           ticketsCount={info.current_tickets_count}
         />
       </View>
@@ -90,11 +93,7 @@ export const GameBox: FC<{
         <BrandText style={gameBoxLabelCStyle}>Your tickets</BrandText>
         {userTicketsCount !== null ? (
           <TicketsAndPrice
-            price={prettyPrice(
-              networkId,
-              userAmount.toString(),
-              info.config.ticket_price.denom,
-            )}
+            price={prettyUserTicketsPriceAmount}
             ticketsCount={userTicketsCount}
           />
         ) : (

diff --git a/packages/screens/Rakki/components/Help.tsx b/packages/screens/Rakki/components/Help.tsx
@@ -1,10 +1,14 @@
 import { FC } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
+import { grossMaxPrizeAmount, netMaxPrizeAmount } from "../utils";
+
 import { BrandText } from "@/components/BrandText";
 import { TertiaryBox } from "@/components/boxes/TertiaryBox";
 import { GridList } from "@/components/layout/GridList";
+import { Info } from "@/contracts-clients/rakki/Rakki.types";
 import { gameBoxLabelCStyle } from "@/screens/Rakki/styles";
+import { prettyPrice } from "@/utils/coins";
 import { neutral33, neutral77 } from "@/utils/style/colors";
 import {
   fontMedium10,
@@ -18,12 +22,31 @@ interface HelpBoxDefinition {
   description: string;
 }
 
-export const Help: FC<{ style?: StyleProp<ViewStyle> }> = ({ style }) => {
+export const Help: FC<{
+  info: Info;
+  networkId: string;
+  style?: StyleProp<ViewStyle>;
+}> = ({ info, style, networkId }) => {
+  const prettyTicketPrice = prettyPrice(
+    networkId,
+    info.config.ticket_price.amount,
+    info.config.ticket_price.denom,
+  );
+  const prettyNetMaxPrize = prettyPrice(
+    networkId,
+    netMaxPrizeAmount(info),
+    info.config.ticket_price.denom,
+  );
+  const prettyMaxPrize = prettyPrice(
+    networkId,
+    grossMaxPrizeAmount(info),
+    info.config.ticket_price.denom,
+  );
+
   const helpBoxes: HelpBoxDefinition[] = [
     {
       title: "Buy Tickets",
-      description:
-        "Prices are $10 USDC per ticket.\nGamblers can buy multiple tickets.",
+      description: `Prices are ${prettyTicketPrice} per ticket.\nGamblers can buy multiple tickets.`,
     },
     {
       title: "Wait for the Draw",
@@ -32,15 +55,15 @@ export const Help: FC<{ style?: StyleProp<ViewStyle> }> = ({ style }) => {
     },
     {
       title: "Check for Prizes",
-      description:
-        "Once the cashprize pool is reached, the winner receive the $10,000 transaction directly!",
+      description: `Once the cashprize pool is reached, the winner receive the ${prettyNetMaxPrize} transaction directly!`,
     },
   ];
+
   return (
     <View style={[{ alignItems: "center", gap: layout.spacing_x3 }, style]}>
       <BrandText style={fontSemibold28}>How to Play RAKKi</BrandText>
       <BrandText style={[{ maxWidth: 302 }, gameBoxLabelCStyle]}>
-        {`When the community lottery pool reaches the 10k USDC amount, only one will be the winner!\nSimple!`}
+        {`When the community lottery pool reaches the ${prettyMaxPrize} amount, only one will be the winner!\nSimple!`}
       </BrandText>
       <View style={{ width: "100%" }}>
         <GridList<HelpBoxDefinition>
@@ -51,7 +74,7 @@ export const Help: FC<{ style?: StyleProp<ViewStyle> }> = ({ style }) => {
           data={helpBoxes}
           renderItem={({ item, index }, width) => {
             return (
-              <TertiaryBox style={{ width, minHeight: 116 }}>
+              <TertiaryBox style={{ width }}>
                 <View
                   style={{
                     flexDirection: "row",
@@ -73,7 +96,6 @@ export const Help: FC<{ style?: StyleProp<ViewStyle> }> = ({ style }) => {
                       letterSpacing: -(12 * 0.01),
                       textAlign: "left",
                       padding: layout.spacing_x1_5,
-                      height: 56,
                     },
                   ]}
                 >

diff --git a/packages/screens/Rakki/components/PrizeInfo.tsx b/packages/screens/Rakki/components/PrizeInfo.tsx
@@ -1,7 +1,8 @@
-import Long from "long";
 import { FC } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
+import { netMaxPrizeAmount } from "../utils";
+
 import { BrandText } from "@/components/BrandText";
 import { GradientText } from "@/components/gradientText";
 import { Info } from "@/contracts-clients/rakki/Rakki.types";
@@ -19,13 +20,12 @@ export const PrizeInfo: FC<{
   networkId: string;
   style?: StyleProp<ViewStyle>;
 }> = ({ info, networkId, style }) => {
-  const totalPrizeAmount = Long.fromString(info.config.ticket_price.amount).mul(
-    info.config.max_tickets,
+  const prettyMaxPrizeAmount = prettyPrice(
+    networkId,
+    netMaxPrizeAmount(info),
+    info.config.ticket_price.denom,
   );
-  const feePrizeAmount = totalPrizeAmount
-    .mul(info.config.fee_per10k)
-    .div(10000);
-  const winnerPrizeAmount = totalPrizeAmount.sub(feePrizeAmount);
+
   return (
     <View style={[{ alignItems: "center" }, style]}>
       <BrandText
@@ -40,11 +40,7 @@ export const PrizeInfo: FC<{
         Automated Lottery
       </BrandText>
       <GradientText style={fontSemibold28} gradientType="yellow">
-        {prettyPrice(
-          networkId,
-          winnerPrizeAmount.toString(),
-          info.config.ticket_price.denom,
-        )}
+        {prettyMaxPrizeAmount}
       </GradientText>
       <BrandText
         style={[

diff --git a/packages/screens/Rakki/utils.ts b/packages/screens/Rakki/utils.ts
@@ -0,0 +1,23 @@
+import Long from "long";
+
+import { Info } from "../../contracts-clients/rakki/Rakki.types";
+
+const grossTicketsPrizeAmount = (info: Info, ticketsCount: number) =>
+  Long.fromString(info.config.ticket_price.amount).mul(ticketsCount);
+
+const netPrizeAmount = (info: Info, ticketsCount: number) => {
+  const feePrizeAmount = grossTicketsPrizeAmount(info, ticketsCount)
+    .mul(info.config.fee_per10k)
+    .div(10000);
+  // Net prize amount
+  return grossTicketsPrizeAmount(info, ticketsCount).sub(feePrizeAmount);
+};
+
+export const netCurrentPrizeAmount = (info: Info) =>
+  netPrizeAmount(info, info.current_tickets_count).toString();
+
+export const netMaxPrizeAmount = (info: Info) =>
+  netPrizeAmount(info, info.config.max_tickets).toString();
+
+export const grossMaxPrizeAmount = (info: Info) =>
+  grossTicketsPrizeAmount(info, info.config.max_tickets).toString();