fix: Graph label display currency prices instead of coin

fetchai · Dec 19, 2024 · f440f60 · f440f60
1 parent 7d21147
commit f440f60
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 16 deletions.
diff --git a/packages/fetch-extension/src/components-v2/line-graph/line-graph.tsx b/packages/fetch-extension/src/components-v2/line-graph/line-graph.tsx
@@ -90,7 +90,12 @@ export const LineGraph: React.FC<LineGraphProps> = ({
 
           const type = diff >= 0 ? "positive" : "negative";
 
-          setTokenState({ diff: Math.abs(percentageDiff), time, type });
+          setTokenState({
+            percentageDiff: Math.abs(percentageDiff),
+            diff: diff * 100,
+            time,
+            type,
+          });
         }
         setPrices(newPrices);
         setLoading(false);

diff --git a/packages/fetch-extension/src/pages-new/main/balances/index.tsx b/packages/fetch-extension/src/pages-new/main/balances/index.tsx
@@ -101,8 +101,8 @@ export const Balances: React.FC<Props> = observer(({ tokenState }) => {
 
   const changeInDollarsValue =
     tokenState.type === "positive"
-      ? (parseFloat(totalNumber) * tokenState.diff) / 100
-      : -(parseFloat(totalNumber) * tokenState.diff) / 100;
+      ? tokenState.diff / 100
+      : -tokenState.diff / 100;
 
   const changeInDollarsClass =
     tokenState.type === "positive"
@@ -136,7 +136,7 @@ export const Balances: React.FC<Props> = observer(({ tokenState }) => {
               </div>
               <div className={style["changeInPer"]}>
                 ( {tokenState.type === "positive" ? "+" : "-"}
-                {parseFloat(tokenState.diff).toFixed(2)} %)
+                {parseFloat(tokenState.percentageDiff).toFixed(1)} %)
               </div>
               <div className={style["day"]}>{tokenState.time}</div>
             </div>
@@ -161,7 +161,7 @@ export const Balances: React.FC<Props> = observer(({ tokenState }) => {
             rewards.isFetching ? (
               <Skeleton height="21px" />
             ) : totalPrice ? (
-              ` ${totalPrice.toString()} `
+              ` ${totalPrice.toString()} ${fiatCurrency.toUpperCase()}`
             ) : (
               ` ${total
                 .shrink(true)
@@ -184,11 +184,11 @@ export const Balances: React.FC<Props> = observer(({ tokenState }) => {
                   style["changeInDollars"] + " " + changeInDollarsClass
                 }
               >
-                {changeInDollarsValue.toFixed(4)} {totalDenom}
+                {changeInDollarsValue.toFixed(4)} {fiatCurrency.toUpperCase()}
               </div>
               <div className={style["changeInPer"]}>
                 ({tokenState.type === "positive" ? "+" : "-"}
-                {parseFloat(tokenState.diff).toFixed(2)} %)
+                {parseFloat(tokenState.percentageDiff).toFixed(1)} %)
               </div>
               <div className={style["day"]}>{tokenState.time}</div>
             </div>

diff --git a/packages/mobile/ios/mobile.xcodeproj/project.pbxproj b/packages/mobile/ios/mobile.xcodeproj/project.pbxproj
@@ -1111,7 +1111,10 @@
 				ONLY_ACTIVE_ARCH = YES;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -1186,7 +1189,10 @@
 				MTL_ENABLE_DEBUG_INFO = NO;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_COMPILATION_MODE = wholemodule;

diff --git a/packages/mobile/src/components/new/line-graph/line-graph.tsx b/packages/mobile/src/components/new/line-graph/line-graph.tsx
@@ -112,7 +112,8 @@ export const LineGraph: FunctionComponent<{
           const timestamp = new Date().getTime();
 
           tokenState = {
-            diff: Math.abs(percentageDiff),
+            percentageDiff: Math.abs(percentageDiff),
+            diff: diff * 100,
             time: getTimeLabel(),
             timestamp,
             type,

diff --git a/packages/mobile/src/screens/home/account-section.tsx b/packages/mobile/src/screens/home/account-section.tsx
@@ -117,8 +117,8 @@ export const AccountSection: FunctionComponent<{
     );
   const changeInDollarsValue =
     tokenState.type === "positive"
-      ? (parseFloat(totalNumber) * tokenState.diff) / 100
-      : -(parseFloat(totalNumber) * tokenState.diff) / 100;
+      ? tokenState.diff / 100
+      : -tokenState.diff / 100;
 
   const accountOrChainChanged =
     activityStore.getAddress !== account.bech32Address ||
@@ -418,10 +418,17 @@ export const AccountSection: FunctionComponent<{
                 ) as ViewStyle
               }
             >
-              {tokenState.type === "positive" && "+"}
-              {changeInDollarsValue.toFixed(4)} {totalDenom}(
-              {tokenState.type === "positive" ? "+" : "-"}
-              {parseFloat(tokenState.diff).toFixed(2)} %)
+              {`${
+                tokenState.type === "positive" ? "+" : ""
+              }${changeInDollarsValue.toFixed(
+                4
+              )} ${priceStore.defaultVsCurrency.toUpperCase()} (${
+                tokenState.type === "positive" ? "+" : "-"
+              }${
+                Number.isNaN(parseFloat(tokenState.percentageDiff))
+                  ? "0"
+                  : parseFloat(tokenState.percentageDiff).toFixed(1)
+              } %)`}
             </Text>
             <Text
               style={

diff --git a/packages/mobile/src/screens/home/index.tsx b/packages/mobile/src/screens/home/index.tsx
@@ -52,6 +52,7 @@ export const HomeScreen: FunctionComponent = observer(() => {
     useStore();
 
   const [tokenState, setTokenState] = useState({
+    percentageDiff: 0,
     diff: 0,
     time: "TODAY",
     type: "positive",