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]>
rainbow-me · Nov 21, 2023 · 3ba032e · 3ba032e
1 parent 8a1a0ad
commit 3ba032e
Show file tree

Hide file tree

Showing 18 changed files with 1,588 additions and 851 deletions.
diff --git a/package.json b/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",

diff --git a/src/components/asset-list/RecyclerAssetList2/profile-header/ProfileActionButtonsRow.tsx b/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 */}

diff --git a/src/components/coin-icon/ChainImage.tsx b/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 }}
  />
  );
 }
diff --git a/src/components/contacts/ContactAvatar.js b/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 (

diff --git a/src/components/contacts/ImageAvatar.js b/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(

diff --git a/src/components/gas/GasSpeedButton.js b/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>

diff --git a/src/components/sheet/sheet-action-buttons/SheetActionButton.tsx b/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,
  ]);

diff --git a/src/graphql/index.ts b/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));
diff --git a/src/helpers/utilities.ts b/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 || ''}`;
 };
 
 /**

diff --git a/src/languages/en_US.json b/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"
  }
  }
  },

diff --git a/src/navigation/Routes.android.tsx b/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>
  );
 }

diff --git a/src/navigation/Routes.ios.tsx b/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}

diff --git a/src/navigation/config.tsx b/src/navigation/config.tsx
@@ -204,6 +204,7 @@ export const signTransactionSheetConfig = {
  backgroundOpacity: 1,
  cornerRadius: 0,
  springDamping: 1,
+ topOffset: 0,
  transitionDuration: 0.3,
  }),
  }),