chore: Graph performance improvement and other fixes

README.md

@@ -13,6 +13,10 @@ You can find the latest versions of the official managed releases on these links
 
 - [Browser Extension](https://chrome.google.com/webstore/detail/fetch-wallet/ellkdbaphhldpeajbepobaecooaoafpg)
     - Fetch officially supports Chrome, Firefox.
+    - [iOS App](https://apps.apple.com/in/app/asi-alliance-wallet/id1641087356)
+    - [Android App](https://play.google.com/store/apps/details?id=com.fetchai.wallet)
+
+For help using ASI Alliance Wallet, Visit our [Doc](https://fetch.ai/docs/guides/fetch-network/fetch-wallet/web-wallet/get-started).
 
 ## Building browser extension locally
 

packages/mobile/android/app/build.gradle

@@ -107,8 +107,8 @@ android {
         applicationId "com.fetchai.wallet"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 22
-        versionName "1.0.3"
+        versionCode 24
+        versionName "1.0.4"
 
         missingDimensionStrategy 'react-native-camera', 'general'
     }

packages/mobile/android/sentry.properties

@@ -1,6 +1,6 @@
 
-auth.token=$Add_TOKEN_HERE
-defaults.org=fetchai-ft
-defaults.project=fetch-mobile
+auth.token=SENTRY_AUTH_TOKEN
+defaults.org=SENTRY_ORG
+defaults.project=SENTRY_PROJECT
 
-defaults.url=https://sentry.io/
+defaults.url=SENTRY_URL

packages/mobile/babel.config.js

@@ -5,5 +5,21 @@ module.exports = {
     ["@babel/plugin-proposal-decorators", { legacy: true }],
     ["@babel/plugin-proposal-class-properties", { loose: true }],
     "react-native-reanimated/plugin",
+    [
+      "transform-inline-environment-variables",
+      {
+        include: [
+          "SENTRY_AUTH_TOKEN",
+          "SENTRY_URL",
+          "SENTRY_ORG",
+          "SENTRY_PROJECT",
+          "SENTRY_DSN",
+          "PROD_AMPLITUDE_API_KEY",
+          "DEV_AMPLITUDE_API_KEY",
+          "PROD_AUTH_CLIENT_ID",
+          "DEV_AUTH_CLIENT_ID",
+        ],
+      },
+    ],
   ],
 };

packages/mobile/ios/mobile.xcodeproj/project.pbxproj

@@ -844,7 +844,7 @@
 				CODE_SIGN_ENTITLEMENTS = mobile/mobile.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 22;
+				CURRENT_PROJECT_VERSION = 24;
 				DEVELOPMENT_TEAM = T62N9GYJ92;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = mobile/Info.plist;
@@ -855,7 +855,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0.3;
+				MARKETING_VERSION = 1.0.4;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -880,7 +880,7 @@
 				CODE_SIGN_ENTITLEMENTS = mobile/mobile.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 22;
+				CURRENT_PROJECT_VERSION = 24;
 				DEVELOPMENT_TEAM = T62N9GYJ92;
 				INFOPLIST_FILE = mobile/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "ASI Alliance Wallet";
@@ -890,7 +890,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0.3;
+				MARKETING_VERSION = 1.0.4;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

packages/mobile/ios/sentry.properties

@@ -1,6 +1,6 @@
 
-auth.token=$Add_TOKEN_HERE
-defaults.org=fetchai-ft
-defaults.project=fetch-mobile
+auth.token=SENTRY_AUTH_TOKEN
+defaults.org=SENTRY_ORG
+defaults.project=SENTRY_PROJECT
 
-defaults.url=https://sentry.io/
+defaults.url=SENTRY_URL

packages/mobile/package.json

@@ -76,6 +76,7 @@
     "appcenter": "^4.4.5",
     "appcenter-analytics": "^4.4.5",
     "axios": "^0.27.2",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "bip39": "^3.0.2",
     "buffer": "^6.0.3",
     "color-alpha": "^1.1.3",

packages/mobile/src/components/new/animations/animated-number/add-comma.tsx

@@ -24,7 +24,7 @@ export function AddComma(
   }
 
   const dotAndElementAfterDot: any[] = GetDotAndElementAfterDot(array);
-  // console.log('dotAndElementAfterDot',dotAndElementAfterDot);
+
   function AddCommaForInteger(numberInteger: number) {
     const integer = Math.floor(numberInteger);
     const integerPartString = integer.toString();

packages/mobile/src/components/new/animations/animated-number/index.tsx

@@ -1,18 +1,17 @@
 import React from "react";
-import { Text, View, StyleSheet, ViewStyle } from "react-native";
+import { Text, View, ViewStyle } from "react-native";
 import { RenderNumber } from "components/new/animations/animated-number/render-number";
 import { AddComma } from "components/new/animations/animated-number/add-comma";
+import { useStyle } from "styles/index";
 
 interface Props {
   numberForAnimated: number;
   decimalAmount?: number;
   includeComma?: boolean;
-  gap?: number;
-  colorValue?: string;
-  fontWeight?: string;
   fontSizeValue?: number;
   hookName: "withTiming" | "withSpring";
   containerStyle?: ViewStyle;
+  comaStyle?: ViewStyle;
   withTimingProps?: {
     durationValue?: number;
     easingValue: string;
@@ -31,14 +30,12 @@ export function AnimatedNumber({
   numberForAnimated,
   decimalAmount = 1,
   includeComma = true,
-  gap = 5,
   hookName = "withSpring",
   withTimingProps,
   withSpringProps,
-  colorValue,
-  fontSizeValue,
-  fontWeight,
+  fontSizeValue = 50,
   containerStyle,
+  comaStyle,
 }: Props) {
   if (withTimingProps && withSpringProps) {
     throw new Error(
@@ -51,7 +48,7 @@ export function AnimatedNumber({
 
   if (numberForAnimated < 1 && numberForAnimated > 0) {
     if (decimalAmount + 2 > numberArray.length) {
-      // why + 2, because the zero and the comma.
+      // Add zeros if decimal precision is not met
       const numberLacks = decimalAmount + 2 - numberArray.length;
       for (let i = 0; i < numberLacks; i++) {
         numberArray.push("0");
@@ -62,59 +59,65 @@ export function AnimatedNumber({
       const newArray = AddComma(numberForAnimated, numberArray, decimalAmount);
       numberArray = [...newArray];
     }
-    // console.log(numberArray)
   }
-  const heightContainer = fontSizeValue! || 70;
+
+  const style = useStyle();
+  const lineHeight = fontSizeValue * 1.0;
 
   return (
     <View
-      style={[styles.container, { height: heightContainer }, containerStyle]}
+      style={
+        [
+          style.flatten(["flex-row", "justify-center", "overflow-hidden"]),
+          containerStyle,
+        ] as ViewStyle
+      }
     >
       {numberArray.map((numberSymbol, i) => {
-        const validNumber = isNaN(+numberSymbol);
+        const isNonNumeric = isNaN(+numberSymbol);
         return (
           <React.Fragment key={i}>
-            {!validNumber ? (
-              <View key={i}>
-                <RenderNumber
-                  gap={gap}
-                  colorValue={colorValue || "red"}
-                  fontSizeValue={fontSizeValue || 50}
-                  numberSymbol={Number(numberSymbol)}
-                  hookName={hookName}
-                  fontWeight={fontWeight}
-                  listProperties={
-                    hookName === "withTiming"
-                      ? {
-                          durationValue: withTimingProps?.durationValue || 500,
-                          easingValue: withTimingProps?.easingValue || "linear",
-                        }
-                      : {
-                          mass: withSpringProps?.mass || 3,
-                          damping: withSpringProps?.damping || 20,
-                          stiffness: withSpringProps?.stiffness || 500,
-                          restDisplacementThreshold:
-                            withSpringProps?.restDisplacementThreshold || 0.01,
-                          overshootClamping:
-                            withSpringProps?.overshootClamping || false,
-                          restSpeedThreshold:
-                            withSpringProps?.restSpeedThreshold || 2,
-                        }
-                  }
-                />
-              </View>
+            {!isNonNumeric ? (
+              <RenderNumber
+                fontSizeValue={fontSizeValue}
+                numberSymbol={Number(numberSymbol)}
+                hookName={hookName}
+                containerStyle={containerStyle}
+                listProperties={
+                  hookName === "withTiming"
+                    ? {
+                        durationValue: withTimingProps?.durationValue || 500,
+                        easingValue: withTimingProps?.easingValue || "linear",
+                      }
+                    : {
+                        mass: withSpringProps?.mass || 3,
+                        damping: withSpringProps?.damping || 20,
+                        stiffness: withSpringProps?.stiffness || 500,
+                        restDisplacementThreshold:
+                          withSpringProps?.restDisplacementThreshold || 0.01,
+                        overshootClamping:
+                          withSpringProps?.overshootClamping || false,
+                        restSpeedThreshold:
+                          withSpringProps?.restSpeedThreshold || 2,
+                      }
+                }
+              />
             ) : (
               <Text
-                style={[
-                  styles.dot,
-                  {
-                    marginHorizontal: gap,
-                    color: colorValue || "red",
-                    fontSize: fontSizeValue || 50,
-                    // includeFontPadding: false,
-                    lineHeight: fontSizeValue! * 1.1,
-                  },
-                ]}
+                style={
+                  [
+                    style.flatten([
+                      "color-white",
+                      "font-normal",
+                      "overflow-hidden",
+                    ]),
+                    {
+                      fontSize: fontSizeValue,
+                      lineHeight: lineHeight,
+                    },
+                    comaStyle,
+                  ] as ViewStyle
+                }
               >
                 {numberSymbol}
               </Text>
@@ -125,17 +128,3 @@ export function AnimatedNumber({
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    overflow: "hidden",
-    justifyContent: "center",
-  },
-  animatedStyle: {},
-  dot: {
-    right: 0,
-    margin: 0,
-    padding: 0,
-  },
-});