i18n: enable + analytics

src/analytics/userProperties.ts

@@ -1,10 +1,12 @@
 import { NativeCurrencyKey } from '@/entities';
+import { Language } from '@/languages';
 
 // these are all reported seperately so they must be optional
 export interface UserProperties {
   // settings
   currentAddressHash?: string; // NEW
   currency?: NativeCurrencyKey;
+  language?: Language;
   enabledTestnets?: boolean;
   enabledFlashbots?: boolean;
   pinnedCoins?: string[];

src/components/L2Disclaimer.js

@@ -12,6 +12,7 @@ import { padding, position } from '@/styles';
 import { darkModeThemeColors } from '@/styles/colors';
 import { ethereumUtils } from '@/utils';
 import { getNetworkObj } from '@/networks';
+import * as lang from '@/languages';
 
 const L2Disclaimer = ({
   assetType,
@@ -22,9 +23,8 @@ const L2Disclaimer = ({
   marginHorizontal = 19,
   onPress,
   prominent,
-  sending,
+  customText,
   symbol,
-  verb,
   forceDarkMode,
 }) => {
   const localColors = isNft ? darkModeThemeColors : colors;
@@ -80,9 +80,14 @@ const L2Disclaimer = ({
               size="smedium"
               weight={prominent ? 'heavy' : 'bold'}
             >
-              {verb ? verb : sending ? `Sending` : `This ${symbol} is`} on the{' '}
-              {getNetworkObj(ethereumUtils.getNetworkFromType(assetType)).name}{' '}
-              network
+              {customText
+                ? customText
+                : lang.t(lang.l.expanded_state.asset.l2_disclaimer, {
+                    symbol,
+                    network: getNetworkObj(
+                      ethereumUtils.getNetworkFromType(assetType)
+                    ).name,
+                  })}
             </Text>
           </Column>
           <Column align="end" justify="center">

src/components/buttons/rainbow-button/RainbowButton.js

@@ -48,6 +48,7 @@ const ButtonLabel = styled(Text).attrs(
       type === RainbowButtonTypes.addCash ? 'roundedTight' : 'rounded',
     size: type === RainbowButtonTypes.small ? 'large' : 'larger',
     weight: type === RainbowButtonTypes.small ? 'bold' : 'heavy',
+    numberOfLines: 1,
   })
 )({});
 

src/components/cards/LearnCard.tsx

@@ -62,13 +62,16 @@ export const LearnCard = ({ cardDetails, rotate, type }: LearnCardProps) => {
       {type === 'square' ? (
         <Box height="full" justifyContent="space-between">
           <Inline alignHorizontal="justify">
-            <Text
-              size="13pt"
-              weight="heavy"
-              color={{ custom: primaryTextColor }}
-            >
-              {`􀫸 ${i18n.t(translations.learn).toUpperCase()}`}
-            </Text>
+            <Box style={{ maxWidth: 80 }}>
+              <Text
+                size="13pt"
+                weight="heavy"
+                color={{ custom: primaryTextColor }}
+                numberOfLines={1}
+              >
+                {`􀫸 ${i18n.t(translations.learn).toUpperCase()}`}
+              </Text>
+            </Box>
             <IconOrb color={orbColorLight} icon={emoji} />
           </Inline>
           <Stack space="10px">
@@ -83,6 +86,7 @@ export const LearnCard = ({ cardDetails, rotate, type }: LearnCardProps) => {
               color={{ custom: primaryTextColor }}
               size="17pt"
               weight="heavy"
+              numberOfLines={2}
             >
               {i18n.t(translations.cards[key].title)}
             </Text>

src/components/cards/ReceiveAssetsCard.tsx

@@ -72,9 +72,16 @@ export const ReceiveAssetsCard = () => {
               </Box>
             )}
             {accentColorLoaded ? (
-              <Text size="15pt" weight="semibold" color="labelSecondary">
-                {i18n.t(TRANSLATIONS.description)}
-              </Text>
+              <Box style={{ maxWidth: 210 }}>
+                <Text
+                  size="15pt"
+                  weight="semibold"
+                  color="labelSecondary"
+                  numberOfLines={2}
+                >
+                  {i18n.t(TRANSLATIONS.description)}
+                </Text>
+              </Box>
             ) : (
               <Box height={{ custom: 30 }} justifyContent="space-between">
                 <Skeleton>

src/components/coin-divider/CoinDivider.js

@@ -157,9 +157,7 @@ export default function CoinDivider({
             }
           >
             <CoinDividerOpenButton
-              coinDividerHeight={CoinDividerHeight}
               isSmallBalancesOpen={isSmallBalancesOpen}
-              isVisible={defaultToEditButton || isCoinListEdited}
               onPress={toggleOpenSmallBalances}
             />
           </View>

src/components/coin-divider/CoinDividerButtonLabel.js

@@ -11,9 +11,12 @@ const LabelText = styled(Text).attrs(({ shareButton, theme: { colors } }) => ({
   size: 'lmedium',
   weight: shareButton ? 'heavy' : 'bold',
 }))(({ shareButton }) => ({
-  position: 'absolute',
-  ...(shareButton ? { width: '100%' } : {}),
-  top: android ? -15 : -15.5,
+  ...(!shareButton
+    ? { position: 'absolute' }
+    : { width: '100%', lineHeight: 22 }),
+  ...(!shareButton
+    ? { top: android ? -15 : -15.5 }
+    : { top: android ? -2 : -2 }),
 }));
 
 const CoinDividerButtonLabel = ({ align, isVisible, label, shareButton }) => (

src/components/coin-divider/CoinDividerOpenButton.js

@@ -1,23 +1,21 @@
 import React from 'react';
-import { View } from 'react-native';
+import { useTheme } from '../../theme/ThemeContext';
+import { magicMemo } from '../../utils';
+import { ButtonPressAnimation } from '../animations';
+import { Row } from '../layout';
+import { Text } from '../text';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import Caret from '../../assets/family-dropdown-arrow.png';
-import { ButtonPressAnimation, RoundButtonCapSize } from '../animations';
-import { Text } from '../text';
-import { ImgixImage } from '@/components/images';
 import styled from '@/styled-thing';
-import { magicMemo } from '@/utils';
+import { padding } from '@/styles';
 import * as i18n from '@/languages';
-
-const AnimatedText = Animated.createAnimatedComponent(Text);
-
-const closedWidth = 52.5;
-const openWidth = 78;
+import Caret from '../../assets/family-dropdown-arrow.png';
+import { ImgixImage } from '@/components/images';
+import { IS_ANDROID } from '@/env';
 
 const CaretIcon = styled(ImgixImage).attrs(({ theme: { colors } }) => ({
   source: Caret,
@@ -28,27 +26,20 @@ const CaretIcon = styled(ImgixImage).attrs(({ theme: { colors } }) => ({
   width: 8,
 });
 
-const Content = styled(Animated.View)({
-  backgroundColor: ({ theme: { colors } }) => colors.blueGreyDarkLight,
-  borderRadius: RoundButtonCapSize / 2,
-  height: 30,
-  width: 78,
-});
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const AnimatedRow = Animated.createAnimatedComponent(Row);
 
-const LabelText = styled(AnimatedText).attrs(({ theme: { colors } }) => ({
-  align: 'center',
-  color: colors.alpha(colors.blueGreyDark, 0.6),
-  letterSpacing: 'roundedTight',
-  lineHeight: 30,
-  size: 'lmedium',
-  weight: 'bold',
-}))({
-  bottom: android ? 0 : 0.5,
-  left: 10,
-  position: 'absolute',
-});
+const ButtonContent = styled(AnimatedRow).attrs({
+  justify: 'center',
+})(({ isActive, theme: { colors, isDarkMode } }) => ({
+  ...padding.object(ios ? 5 : 0, 10, 6),
+  backgroundColor: colors.alpha(colors.blueGreyDark, 0.06),
+  borderRadius: 15,
+  height: 30,
+}));
 
-const CoinDividerOpenButton = ({ isSmallBalancesOpen, onPress }) => {
+const CoinDividerEditButton = ({ isSmallBalancesOpen, onPress }) => {
+  const { colors } = useTheme();
   const isSmallBalancesOpenValue = useSharedValue(0);
 
   isSmallBalancesOpenValue.value = isSmallBalancesOpen;
@@ -63,52 +54,46 @@ const CoinDividerOpenButton = ({ isSmallBalancesOpen, onPress }) => {
 
   const style = useAnimatedStyle(() => {
     return {
-      height: 20,
-      marginTop: 6,
+      paddingLeft: 6,
       opacity: 0.6,
-      position: 'absolute',
       transform: [
-        { translateX: 35 + animation.value * 22 },
-        { translateY: animation.value * -1.25 },
+        { translateX: 0 + animation.value * 5 },
+        { translateY: (IS_ANDROID ? 4 : 0) + animation.value * 1.25 },
         { rotate: animation.value * -90 + 'deg' },
       ],
     };
   });
 
-  const allLabelStyle = useAnimatedStyle(() => ({
-    opacity: 1 - animation.value * 1,
-  }));
-
-  const lessLabelStyle = useAnimatedStyle(() => ({
-    opacity: animation.value * 1,
-  }));
-
-  const wrapperStyle = useAnimatedStyle(() => ({
-    width: closedWidth + animation.value * (openWidth - closedWidth),
+  const containerStyle = useAnimatedStyle(() => ({
+    paddingRight: 10 + animation.value * 5,
   }));
 
   return (
-    <View width={isSmallBalancesOpen ? 116 : 90.5}>
-      <ButtonPressAnimation onPress={onPress} scaleTo={0.8}>
-        <View paddingHorizontal={19} paddingVertical={5}>
-          <Content style={wrapperStyle}>
-            <LabelText style={allLabelStyle}>
-              {i18n.t(i18n.l.button.all)}
-            </LabelText>
-            <LabelText style={lessLabelStyle}>
-              {i18n.t(i18n.l.button.less)}
-            </LabelText>
-            <Animated.View style={style}>
-              <CaretIcon />
-            </Animated.View>
-          </Content>
-        </View>
+    <Row paddingHorizontal={17}>
+      <ButtonPressAnimation onPress={onPress} radiusAndroid={15} scaleTo={0.9}>
+        <ButtonContent style={containerStyle} align="center">
+          <AnimatedText
+            align={'left'}
+            color={colors.alpha(colors.blueGreyDark, 0.6)}
+            letterSpacing="roundedTight"
+            opacity={1}
+            size="lmedium"
+            weight="bold"
+          >
+            {isSmallBalancesOpen
+              ? i18n.t(i18n.l.button.less)
+              : i18n.t(i18n.l.button.all)}
+          </AnimatedText>
+          <Animated.View style={style}>
+            <CaretIcon />
+          </Animated.View>
+        </ButtonContent>
       </ButtonPressAnimation>
-    </View>
+    </Row>
   );
 };
 
-export default magicMemo(CoinDividerOpenButton, [
+export default magicMemo(CoinDividerEditButton, [
   'isSmallBalancesOpen',
   'isVisible',
 ]);

src/components/contacts/SwipeableContactRow.js

@@ -19,8 +19,8 @@ const styles = [
   position.sizeAsObject(35),
 ];
 
-const RightAction = ({ onPress, progress, text, x }) => {
-  const isEdit = text === 'Edit';
+const RightAction = ({ onPress, progress, text, type, x }) => {
+  const isEdit = type === 'edit';
   const translateX = progress.interpolate({
     inputRange: [0, 1],
     outputRange: [x, 0],
@@ -46,6 +46,7 @@ const RightAction = ({ onPress, progress, text, x }) => {
           letterSpacing="roundedTight"
           size="smaller"
           weight="semibold"
+          numberOfLines={1}
         >
           {text}
         </Text>
@@ -106,12 +107,14 @@ const SwipeableContactRow = (
         <RightAction
           onPress={handleEditContact}
           progress={progress}
+          type="edit"
           text={lang.t('button.edit')}
           x={120}
         />
         <RightAction
           onPress={handleDeleteContact}
           progress={progress}
+          type="text"
           text={lang.t('button.delete')}
           x={90}
         />

src/components/ens-registration/ConfirmContent/CommitContent.tsx

@@ -41,6 +41,7 @@ const CommitContent = ({
             color="secondary50 (Deprecated)"
             size="14px / 19px (Deprecated)"
             weight="bold"
+            numberOfLines={1}
           >
             {lang.t('profiles.confirm.suggestion')}
           </Text>

src/components/ens-registration/RegistrationReviewRows/RegistrationReviewRows.tsx

@@ -165,6 +165,7 @@ export default function RegistrationReviewRows({
                 color="secondary80 (Deprecated)"
                 size="16px / 22px (Deprecated)"
                 weight="bold"
+                numberOfLines={2}
               >
                 {lang.t('profiles.confirm.new_expiration_date')}
               </Text>
@@ -188,6 +189,7 @@ export default function RegistrationReviewRows({
               color="secondary80 (Deprecated)"
               size="16px / 22px (Deprecated)"
               weight="bold"
+              numberOfLines={2}
             >
               {lang.t('profiles.confirm.registration_cost')}
             </Text>
@@ -216,6 +218,7 @@ export default function RegistrationReviewRows({
               color="secondary80 (Deprecated)"
               size="16px / 22px (Deprecated)"
               weight="bold"
+              numberOfLines={2}
             >
               {lang.t('profiles.confirm.estimated_fees')}
             </Text>
@@ -245,6 +248,7 @@ export default function RegistrationReviewRows({
                 color="secondary80 (Deprecated)"
                 size="16px / 22px (Deprecated)"
                 weight="bold"
+                numberOfLines={2}
               >
                 {lang.t('profiles.confirm.estimated_total_eth')}
               </Text>
@@ -274,6 +278,7 @@ export default function RegistrationReviewRows({
               color="primary (Deprecated)"
               size="16px / 22px (Deprecated)"
               weight="heavy"
+              numberOfLines={2}
             >
               {lang.t('profiles.confirm.estimated_total')}
             </Text>

src/components/expanded-state/CustomGasState.js

@@ -10,7 +10,6 @@ import { SlackSheet } from '../sheet';
 import { FeesPanel, FeesPanelTabs } from './custom-gas';
 import { getTrendKey } from '@/helpers/gas';
 import {
-  useAccountSettings,
   useColorForAsset,
   useDimensions,
   useGas,
@@ -24,7 +23,7 @@ import { IS_ANDROID } from '@/env';
 import { useSelector } from 'react-redux';
 import { getCrosschainSwapServiceTime } from '@/handlers/swap';
 
-const FOOTER_HEIGHT = 76;
+const FOOTER_HEIGHT = 120;
 const CONTENT_HEIGHT = 310;
 
 function useAndroidDisableGesturesOnFocus() {