Simulation fixes (#5194)

* Use simulation fetch config

* Update green/red colors

* Add Moti

* Clean up routes, use signTransactionSheetConfig on iOS

* UI cleanup, state fixes, make cards expandable

* Trim trailing zeros from simulation amounts

* Fix GasSpeedButton jank

* Block signing sheet dismiss gestures

* Revert "Update green/red colors"

This reverts commit 50ee10d.

* Fixed: Update green/red colors

* Fix button shadows

* Fix display nonce

* Remove unused code

* Fix type

* Upgrade reanimated to fix crash

* Cleanup

* Fix type errors from reanimated upgrade

* lint

* Fix Android scrolling

* Revert "lint"

This reverts commit 94fbd40.

* Revert "Fix type errors from reanimated upgrade"

This reverts commit 8cf75da.

* Revert "Upgrade reanimated to fix crash"

This reverts commit 22d1b0b.

* Prevent crash without upgrading reanimated

Moving the reanimated upgrade to another PR

* Fix zIndex

* Android fixes

---------

Co-authored-by: Christian Baroni <[email protected]>
Co-authored-by: Ben Goldberg <[email protected]>

Author: christianbaroni

package.json

@@ -189,6 +189,7 @@
     "make-color-more-chill": "0.2.2",
     "match-sorter": "6.3.0",
     "mnemonist": "0.38.1",
+    "moti": "0.27.2",
     "multiformats": "9.6.2",
     "nanoid": "3.2.0",
     "p-queue": "7.2.0",

src/components/asset-list/RecyclerAssetList2/profile-header/ProfileActionButtonsRow.tsx

@@ -273,11 +273,6 @@ export function MoreButton() {
     Clipboard.setString(accountAddress);
   }, [accountAddress, isToastActive, setToastActive]);
 
-  const { navigate } = useNavigation();
-  const navigateToSigningSheet = React.useCallback(() => {
-    navigate(Routes.SIGN_TRANSACTION_SHEET);
-  }, [navigate]);
-
   return (
     <>
       {/* @ts-expect-error JavaScript component */}

src/components/coin-icon/ChainImage.tsx

@@ -14,11 +14,9 @@ import ZoraBadge from '../../assets/badges/zora.png';
 import { ImgixImage } from '../images';
 
 export function ChainImage({
-  borderRadius = 20,
   chain,
   size = 20,
 }: {
-  borderRadius?: number;
   chain: Network | null | undefined;
   size?: number;
 }) {
@@ -48,7 +46,7 @@ export function ChainImage({
     <ImgixImage
       size={size}
       source={source}
-      style={{ borderRadius, height: size, width: size }}
+      style={{ borderRadius: size / 2, height: size, width: size }}
     />
   );
 }

src/components/contacts/ContactAvatar.js

@@ -10,8 +10,7 @@ import ShadowStack from '@/react-native-shadow-stack';
 import { IS_ANDROID } from '@/env';
 
 const buildShadows = (color, size, darkMode, colors) => {
-  // TODO: remove `legacySmall` size once rainbow home screen revamp is released
-  if (size === 'small' || size === 'legacySmall') {
+  if (size === 'small') {
     return [
       [0, 3, 5, colors.shadow, 0.14],
       [
@@ -46,6 +45,17 @@ const buildShadows = (color, size, darkMode, colors) => {
         0.4,
       ],
     ];
+  } else if (size === 'signing') {
+    return [
+      [
+        0,
+        4,
+        12,
+        darkMode ? colors.shadow : colors.avatarBackgrounds[color] || color,
+        darkMode ? 0.16 : 0.2,
+      ],
+      [0, 2, 6, colors.trueBlack, 0.02],
+    ];
   } else {
     return sizeConfigs(colors)[size]['shadow'];
   }
@@ -84,6 +94,10 @@ const sizeConfigs = colors => ({
     ],
     textSize: 'larger',
   },
+  signing: {
+    dimensions: 44,
+    textSize: 25,
+  },
   small: {
     dimensions: 36,
     textSize: 'large',
@@ -93,11 +107,6 @@ const sizeConfigs = colors => ({
     textSize: 'large',
     shadow: [[0, 0, 0, colors.shadow, 0]],
   },
-  // TODO: remove `legacySmall` size once rainbow home screen revamp is released
-  legacySmall: {
-    dimensions: 34,
-    textSize: 'large',
-  },
   smaller: {
     dimensions: 20,
     textSize: 'micro',
@@ -135,7 +144,7 @@ const ContactAvatar = ({ color, size = 'medium', value, ...props }) => {
     typeof color === 'number'
       ? // sometimes the color is gonna be missing so we fallback to white
         // otherwise there will be only shadows without the the placeholder "circle"
-        colors.avatarBackgrounds[color] ?? 'white'
+        colors.avatarBackgrounds[color] ?? colors.white
       : color;
 
   return (

src/components/contacts/ImageAvatar.js

@@ -5,13 +5,14 @@ import styled from '@/styled-thing';
 import { borders } from '@/styles';
 import ShadowStack from '@/react-native-shadow-stack';
 import { IS_ANDROID } from '@/env';
+import { useAccountAccentColor } from '@/hooks';
 
 const buildSmallShadows = (color, colors) => [
   [0, 3, 5, colors.shadow, 0.14],
   [0, 6, 10, colors.avatarBackgrounds[color] || color, 0.2],
 ];
 
-const sizeConfigs = (colors, isDarkMode) => ({
+const sizeConfigs = (accentColor, colors, isDarkMode) => ({
   header: {
     dimensions: 34,
     textSize: 'large',
@@ -32,19 +33,25 @@ const sizeConfigs = (colors, isDarkMode) => ({
     ],
     textSize: 28,
   },
-  sim: {
-    dimensions: 44,
-    shadow: [
-      [0, 4, 6, colors.shadow, 0.04],
-      [0, 1, 3, colors.shadow, 0.08],
-    ],
-    textSize: 'larger',
-  },
   medium: {
     dimensions: 40,
     shadow: [[0, 4, 12, colors.shadow, isDarkMode ? 0.3 : 0.15]],
     textSize: 'larger',
   },
+  signing: {
+    dimensions: 44,
+    shadow: [
+      [
+        0,
+        4,
+        12,
+        !isDarkMode && accentColor ? accentColor : colors.shadow,
+        isDarkMode ? 0.16 : 0.2,
+      ],
+      [0, 2, 6, colors.trueBlack, 0.02],
+    ],
+    textSize: 25,
+  },
   small: {
     dimensions: 30,
     shadow: [[0, 3, 9, colors.shadow, 0.1]],
@@ -87,10 +94,11 @@ const ImageAvatar = ({
   onLoad = undefined,
   ...props
 }) => {
+  const { accentColor } = useAccountAccentColor();
   const { colors, isDarkMode } = useTheme();
   const { dimensions, shadow } = useMemo(
-    () => sizeConfigs(colors, isDarkMode)[size],
-    [colors, isDarkMode, size]
+    () => sizeConfigs(accentColor, colors, isDarkMode)[size],
+    [accentColor, colors, isDarkMode, size]
   );
 
   const shadows = useMemo(

src/components/gas/GasSpeedButton.js

@@ -4,8 +4,10 @@ import AnimateNumber from '@bankify/react-native-animate-number';
 import lang from 'i18n-js';
 import { isEmpty, isNaN, isNil, upperFirst } from 'lodash';
 import makeColorMoreChill from 'make-color-more-chill';
+import { AnimatePresence, MotiView } from 'moti';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { InteractionManager, Keyboard } from 'react-native';
+import { Easing } from 'react-native-reanimated';
 import { darkModeThemeColors } from '../../styles/colors';
 import { ButtonPressAnimation } from '../animations';
 import { ChainBadge, CoinIcon } from '../coin-icon';
@@ -95,7 +97,13 @@ const ChainBadgeContainer = styled.View.attrs({
   ...margin.object(0),
 });
 
-const NativeCoinIconWrapper = styled(Column)(margin.object(1.5, 5, 0, 0));
+const NativeCoinIconWrapper = styled(Column).attrs({})({
+  ...margin.object(1, 5, 0, 0),
+  alignItems: 'center',
+  height: 18,
+  justifyContent: 'center',
+  width: 18,
+});
 
 const Container = styled(Column).attrs({
   alignItems: 'center',
@@ -591,19 +599,33 @@ const GasSpeedButton = ({
         >
           <Row>
             <NativeCoinIconWrapper>
-              {currentNetwork === Network.mainnet ? (
-                <CoinIcon
-                  address={nativeFeeCurrency.address}
-                  size={18}
-                  symbol={nativeFeeCurrency.symbol}
-                />
-              ) : (
-                <ChainBadge
-                  assetType={currentNetwork}
-                  size="gas"
-                  position="relative"
-                />
-              )}
+              <AnimatePresence>
+                {!!currentNetwork && (
+                  <MotiView
+                    animate={{ opacity: 1 }}
+                    from={{ opacity: 0 }}
+                    transition={{
+                      duration: 300,
+                      easing: Easing.bezier(0.2, 0, 0, 1),
+                      type: 'timing',
+                    }}
+                  >
+                    {currentNetwork === Network.mainnet ? (
+                      <CoinIcon
+                        address={nativeFeeCurrency.address}
+                        size={18}
+                        symbol={nativeFeeCurrency.symbol}
+                      />
+                    ) : (
+                      <ChainBadge
+                        assetType={currentNetwork}
+                        size="gas"
+                        position="relative"
+                      />
+                    )}
+                  </MotiView>
+                )}
+              </AnimatePresence>
             </NativeCoinIconWrapper>
             <TextContainer>
               <Text>

src/components/sheet/sheet-action-buttons/SheetActionButton.tsx

@@ -24,6 +24,7 @@ type Props = PropsWithChildren<{
   label?: string;
   lightShadows?: boolean;
   marginBottom?: number;
+  newShadows?: boolean;
   nftShadows?: boolean;
   onPress?: () => void;
   scaleTo?: number;
@@ -89,6 +90,7 @@ const SheetActionButton: React.FC<Props> = ({
   label = null,
   lightShadows,
   onPress,
+  newShadows,
   nftShadows,
   scaleTo = 0.9,
   size = null,
@@ -105,7 +107,12 @@ const SheetActionButton: React.FC<Props> = ({
   const isWhite = color === colors.white;
   const textColor = givenTextColor || colors.whiteLabel;
   const shadowsForButtonColor = useMemo(() => {
-    if (nftShadows) {
+    if (newShadows) {
+      return [
+        [0, 2, 6, colors.trueBlack, 0.02],
+        [0, 10, 30, isDarkMode ? colors.shadow : color, 0.4],
+      ];
+    } else if (nftShadows) {
       return [[0, 10, 30, colors.alpha(colors.shadowBlack, 0.3)]];
     } else if (!forceShadows && (disabled || isTransparent)) {
       return [[0, 0, 0, colors.transparent, 0]];
@@ -128,6 +135,7 @@ const SheetActionButton: React.FC<Props> = ({
     isTransparent,
     isDarkMode,
     lightShadows,
+    newShadows,
     nftShadows,
     isWhite,
   ]);

src/graphql/index.ts

@@ -10,7 +10,7 @@ export const metadataClient = getMetadataSdk(
   getFetchRequester(config.metadata)
 );
 export const simulationClient = getMetadataSdk(
-  getFetchRequester(config.metadata)
+  getFetchRequester(config.simulation)
 );
 export const arcClient = getArcSdk(getFetchRequester(config.arc));
 export const arcDevClient = getArcDevSdk(getFetchRequester(config.arcDev));

src/helpers/utilities.ts

@@ -374,14 +374,20 @@ export const convertRawAmountToNativeDisplay = (
 export const convertRawAmountToBalance = (
   value: BigNumberish,
   asset: { decimals: number; symbol?: string },
-  buffer?: number
+  buffer?: number,
+  trimTrailingZeros?: boolean
 ) => {
   const decimals = asset?.decimals ?? 18;
   const assetBalance = convertRawAmountToDecimalFormat(value, decimals);
 
   return {
     amount: assetBalance,
-    display: convertAmountToBalanceDisplay(assetBalance, asset, buffer),
+    display: convertAmountToBalanceDisplay(
+      assetBalance,
+      asset,
+      buffer,
+      trimTrailingZeros
+    ),
   };
 };
 
@@ -391,11 +397,15 @@ export const convertRawAmountToBalance = (
 export const convertAmountToBalanceDisplay = (
   value: BigNumberish,
   asset: { decimals: number; symbol?: string },
-  buffer?: number
+  buffer?: number,
+  trimTrailingZeros?: boolean
 ) => {
   const decimals = asset?.decimals ?? 18;
   const display = handleSignificantDecimals(value, decimals, buffer);
-  return `${display} ${asset?.symbol || ''}`;
+  const formattedDisplay = trimTrailingZeros
+    ? display.replace(/\.?0+$/, '')
+    : display;
+  return `${formattedDisplay} ${asset?.symbol || ''}`;
 };
 
 /**

src/languages/en_US.json

@@ -2363,7 +2363,8 @@
           "types": {
             "chain": "Network",
             "contract": "Contract",
-            "contract_created": "Contact Created",
+            "contract_created": "Contract Created",
+            "to": "To",
             "function": "Function",
             "source_code": "Source Code",
             "nonce": "Nonce"
@@ -2385,6 +2386,15 @@
           "confirm": "􀎽 Confirm",
           "get_native_token": "Get %{symbol}",
           "buy_native_token": "Buy %{symbol}"
+        },
+        "formatted_dates": {
+          "today": "Today",
+          "day_ago": "day ago",
+          "days_ago": "days ago",
+          "week_ago": "week ago",
+          "weeks_ago": "weeks ago",
+          "month_ago": "month ago",
+          "months_ago": "months ago"
         }
       }
     },

src/navigation/Routes.android.tsx

@@ -387,10 +387,6 @@ function BSNavigator() {
         name={Routes.CONFIRM_REQUEST}
         options={walletconnectBottomSheetPreset}
       />
-      <BSStack.Screen
-        name={Routes.SIGN_TRANSACTION_SHEET}
-        component={SignTransactionSheet}
-      />
     </BSStack.Navigator>
   );
 }

src/navigation/Routes.ios.tsx

@@ -330,15 +330,7 @@ function NativeStackNavigator() {
       <NativeStack.Screen
         component={SignTransactionSheet}
         name={Routes.CONFIRM_REQUEST}
-        options={{
-          allowsDragToDismiss: false,
-          allowsTapToDismiss: false,
-          backgroundOpacity: 1,
-          customStack: true,
-          headerHeight: 0,
-          isShortFormEnabled: false,
-          topOffset: 0,
-        }}
+        {...signTransactionSheetConfig}
       />
       <NativeStack.Screen
         component={ExpandedAssetSheet}
@@ -424,11 +416,6 @@ function NativeStackNavigator() {
         component={SendFlowNavigator}
         name={Routes.SEND_SHEET_NAVIGATOR}
       />
-      <NativeStack.Screen
-        component={SignTransactionSheet}
-        name={Routes.SIGN_TRANSACTION_SHEET}
-        {...signTransactionSheetConfig}
-      />
       <NativeStack.Screen
         component={WalletConnectApprovalSheet}
         name={Routes.WALLET_CONNECT_APPROVAL_SHEET}

src/navigation/config.tsx

@@ -204,6 +204,7 @@ export const signTransactionSheetConfig = {
       backgroundOpacity: 1,
       cornerRadius: 0,
       springDamping: 1,
+      topOffset: 0,
       transitionDuration: 0.3,
     }),
   }),