Fix the rest of the value props

econia-labs · Dec 4, 2024 · ac48166 · ac48166
1 parent bbb5c9b
commit ac48166
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 57 deletions.
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx
@@ -113,9 +113,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             <div className={statsTextClasses + " text-light-gray"}>{t("Market Cap:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
-                <FormattedNumber nominalize scramble>
-                  {marketCap}
-                </FormattedNumber>
+                <FormattedNumber value={marketCap} nominalize scramble />
                 &nbsp;
                 <AptosIconBlack className="icon-inline mb-[0.3ch]" />
               </div>
@@ -126,9 +124,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             <div className={statsTextClasses + " text-light-gray"}>{t("24 hour vol:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
-                <FormattedNumber nominalize scramble>
-                  {dailyVolume}
-                </FormattedNumber>
+                <FormattedNumber value={dailyVolume} nominalize scramble />
                 &nbsp;
                 <AptosIconBlack className="icon-inline mb-[0.3ch]" />
               </div>
@@ -139,9 +135,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             <div className={statsTextClasses + " text-light-gray"}>{t("All-time vol:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
-                <FormattedNumber nominalize scramble>
-                  {allTimeVolume}
-                </FormattedNumber>
+                <FormattedNumber value={allTimeVolume} nominalize scramble />
                 &nbsp;
                 <AptosIconBlack className="icon-inline mb-[0.3ch]" />
               </div>

diff --git a/...ript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx b/...ript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx
@@ -261,9 +261,12 @@ export default function SwapComponent({
                 style={{ opacity: isLoading ? 0.6 : 1 }}
               >
                 {/* Scrambled swap result output below. */}
-                <FormattedNumber nominalize scramble decimals={OUTPUT_DISPLAY_DECIMALS}>
-                  {isLoading ? previous : outputAmount}
-                </FormattedNumber>
+                <FormattedNumber
+                  value={isLoading ? previous : outputAmount}
+                  nominalize
+                  scramble
+                  decimals={OUTPUT_DISPLAY_DECIMALS}
+                />
               </div>
             </div>
           </Column>

diff --git a/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx b/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
@@ -146,9 +146,7 @@ const MainCard = (props: MainCardProps) => {
                 </div>
                 <div className="font-forma text-white market-data-text uppercase">
                   <div className="flex flex-row items-center justify-center">
-                    <FormattedNumber scramble nominalize>
-                      {marketCap}
-                    </FormattedNumber>
+                    <FormattedNumber value={marketCap} scramble nominalize />
                     &nbsp;
                     <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
                   </div>
@@ -167,9 +165,7 @@ const MainCard = (props: MainCardProps) => {
                 </div>
                 <div className="font-forma text-white market-data-text uppercase">
                   <div className="flex flex-row items-center justify-center">
-                    <FormattedNumber scramble nominalize>
-                      {dailyVolume}
-                    </FormattedNumber>
+                    <FormattedNumber value={dailyVolume} scramble nominalize />
                     &nbsp;
                     <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
                   </div>
@@ -186,9 +182,7 @@ const MainCard = (props: MainCardProps) => {
                 </div>
                 <div className="font-forma text-white market-data-text uppercase">
                   <div className="flex flex-row items-center justify-center">
-                    <FormattedNumber scramble nominalize>
-                      {allTimeVolume}
-                    </FormattedNumber>
+                    <FormattedNumber value={allTimeVolume} scramble nominalize />
                     &nbsp;
                     <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
                   </div>

diff --git a/src/typescript/frontend/src/components/pages/home/components/table-card/TableCard.tsx b/src/typescript/frontend/src/components/pages/home/components/table-card/TableCard.tsx
@@ -259,9 +259,7 @@ const TableCard = ({
                   className="body-sm uppercase font-forma"
                   style={{ color: "#FFFFFFFF", filter: "brightness(1) contrast(1)" }}
                 >
-                  <FormattedNumber scramble nominalize suffix=" APT">
-                    {marketCap}
-                  </FormattedNumber>
+                  <FormattedNumber value={marketCap} scramble nominalize suffix=" APT" />
                 </motion.div>
               </Column>
               <Column width="50%">
@@ -279,9 +277,7 @@ const TableCard = ({
                   className="body-sm uppercase font-forma"
                   style={{ color: "#FFFFFFFF", filter: "brightness(1) contrast(1)" }}
                 >
-                  <FormattedNumber scramble nominalize suffix=" APT">
-                    {secondaryMetric}
-                  </FormattedNumber>
+                  <FormattedNumber value={secondaryMetric} scramble nominalize suffix=" APT" />
                 </motion.div>
               </Column>
             </Flex>

diff --git a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
@@ -159,12 +159,11 @@ const Liquidity = ({ market }: LiquidityProps) => {
           {direction === "add" ? t("You deposit") : t("You get")}
           {balanceLabel}
           <FormattedNumber
+            value={aptBalance}
             className={enoughApt ? "text-green" : "text-error"}
             nominalize
             decimals={3}
-          >
-            {aptBalance}
-          </FormattedNumber>
+          />
           {")"}
         </div>
         {direction === "add" ? (
@@ -176,12 +175,11 @@ const Liquidity = ({ market }: LiquidityProps) => {
           />
         ) : (
           <FormattedNumber
+            value={BigInt(removeLiquidityResult?.quote_amount ?? 0)}
             decimals={3}
             className={inputAndOutputStyles + " bg-transparent leading-[32px] text-medium-gray"}
             nominalize
-          >
-            {BigInt(removeLiquidityResult?.quote_amount ?? 0)}
-          </FormattedNumber>
+          />
         )}
       </Column>
       <AptosInputLabel />
@@ -195,25 +193,23 @@ const Liquidity = ({ market }: LiquidityProps) => {
           {direction === "add" ? "You deposit" : "You get"}
           {balanceLabel}
           <FormattedNumber
+            value={emojicoinBalance}
             className={enoughEmoji ? "text-green" : "text-error"}
             nominalize
             decimals={3}
-          >
-            {emojicoinBalance}
-          </FormattedNumber>
+          />
           {")"}
         </div>
         <FormattedNumber
-          decimals={3}
-          className={inputAndOutputStyles + ` bg-transparent leading-[32px] !text-light-gray/[.6]`}
-          nominalize
-        >
-          {BigInt(
+          value={BigInt(
             (direction === "add"
               ? provideLiquidityResult?.base_amount
               : removeLiquidityResult?.base_amount) ?? 0
           )}
-        </FormattedNumber>
+          decimals={3}
+          className={inputAndOutputStyles + ` bg-transparent leading-[32px] !text-light-gray/[.6]`}
+          nominalize
+        />
       </Column>
       <div>
         <EmojiInputLabel emoji={market ? market.market.symbolData.symbol : "-"} />
@@ -229,22 +225,20 @@ const Liquidity = ({ market }: LiquidityProps) => {
           {direction === "remove" ? "You deposit" : "You get"}
           {balanceLabel}
           <FormattedNumber
+            value={emojicoinLPBalance}
             className={enoughEmojiLP ? "text-green" : "text-error"}
             nominalize
             decimals={3}
-          >
-            {emojicoinLPBalance}
-          </FormattedNumber>
+          />
           {")"}
         </div>
         {direction === "add" ? (
           <FormattedNumber
+            value={BigInt(provideLiquidityResult?.lp_coin_amount ?? 0)}
             decimals={3}
             className={inputAndOutputStyles + " bg-transparent leading-[32px] text-medium-gray"}
             nominalize
-          >
-            {BigInt(provideLiquidityResult?.lp_coin_amount ?? 0)}
-          </FormattedNumber>
+          />
         ) : (
           <InputNumeric
             className={inputAndOutputStyles + " bg-transparent leading-[32px] text-white"}
@@ -405,9 +399,11 @@ const Liquidity = ({ market }: LiquidityProps) => {
 
             <Text textScale={{ _: "bodySmall", tablet: "bodyLarge" }} textTransform="uppercase">
               {market ? (
-                <FormattedNumber nominalize decimals={3}>
-                  {market.state.cpammRealReserves.quote}
-                </FormattedNumber>
+                <FormattedNumber
+                  value={market.state.cpammRealReserves.quote}
+                  nominalize
+                  decimals={3}
+                />
               ) : (
                 "-"
               )}
@@ -423,9 +419,11 @@ const Liquidity = ({ market }: LiquidityProps) => {
 
             <Text textScale={{ _: "bodySmall", tablet: "bodyLarge" }} textTransform="uppercase">
               {market ? (
-                <FormattedNumber nominalize decimals={3}>
-                  {market.state.cpammRealReserves.base}
-                </FormattedNumber>
+                <FormattedNumber
+                  value={market.state.cpammRealReserves.base}
+                  nominalize
+                  decimals={3}
+                />
               ) : (
                 "-"
               )}

diff --git a/src/typescript/frontend/src/components/price-feed/inner.tsx b/src/typescript/frontend/src/components/price-feed/inner.tsx
@@ -21,9 +21,7 @@ export const PriceDelta = ({ delta, className = "" }: { delta: number; className
 
   return (
     <span className={cn(`${delta >= 0 ? "text-green" : "text-pink"}`, className)}>
-      <FormattedNumber suffix={suffix} prefix={prefix} scramble>
-        {Math.abs(delta)}
-      </FormattedNumber>
+      <FormattedNumber value={Math.abs(delta)} suffix={suffix} prefix={prefix} scramble />
     </span>
   );
 };