Merge branch 'dev' into stage

src/api/api.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { AMBTokenDTO } from '@models/dtos';
+import { AMBTokenDTO, StakingPoolDTO } from '@models/dtos';
 import { CMCChartData, CMCInterval } from '@appTypes';
 import { AMBToken } from '@models';
 import { watcherService } from './watcher-service';
@@ -44,9 +44,21 @@ const getAMBPriceHistoricalPricing = async (
   }
 };
 
+const getAmbrosusStakingPools = async (): Promise<StakingPoolDTO[]> => {
+  try {
+    const res = await axios.get(`${Config.STAKING_API_URL}`);
+    const poolsMap: { [key: string]: StakingPoolDTO } = res.data.data;
+    const poolsArray = Object.keys(poolsMap).map((key) => poolsMap[key]);
+    return poolsArray;
+  } catch (error) {
+    throw error;
+  }
+};
+
 export const API = {
   getAMBTokenData,
   getAMBPriceHistoricalPricing,
+  getAmbrosusStakingPools,
   explorerService,
   watcherService,
   cryptoService

src/appTypes/navigation/wallets.ts

@@ -3,7 +3,7 @@ import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { TabsParamsList } from './tabs';
 import { CommonStackParamsList } from './common';
-import { Token } from '@models';
+import { StakingPool, Token } from '@models';
 
 export type HomeParamsList = {
   HomeScreen: undefined;
@@ -21,6 +21,8 @@ export type HomeParamsList = {
   CreateWalletSuccess: undefined;
   SetupPasscode: undefined;
   ConfirmPasscode: { passcode: string[] };
+  StakingPool: { pool: StakingPool };
+  StakingPools: undefined;
   SuccessSetupSecurity: undefined;
   ImportWallet: undefined;
   ImportWalletSuccess: undefined;

src/components/base/Input/Input.number.tsx

@@ -2,19 +2,26 @@ import React from 'react';
 import { InputProps, InputRef } from './Input.types';
 import { TextInput } from './Input.text';
 import { COLORS } from '@constants/colors';
+import { StringUtils } from '@utils/string';
 
 export const NumberInput = React.forwardRef<InputRef, InputProps>(
   (props, ref) => {
     const { value, style = {}, onChangeValue, ...restProps } = props;
     const styles = [{ color: COLORS.black, padding: 0 }, style];
 
+    const onChangeText = (text: string) => {
+      if (typeof onChangeValue === 'function') {
+        onChangeValue(StringUtils.formatNumberInput(text));
+      }
+    };
+
     return (
       <TextInput
         ref={ref}
         value={value}
-        onChangeText={onChangeValue}
+        onChangeText={onChangeText}
         style={styles}
-        keyboardType="number-pad"
+        keyboardType="numeric"
         {...restProps}
       />
     );

src/components/base/Input/Input.text.tsx

@@ -1,7 +1,6 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
 import { TextInput as RNTextInput, StyleSheet } from 'react-native';
 import { InputProps, InputRef } from './Input.types';
-import { shadow } from '@constants/shadow';
 import { moderateScale, scale, verticalScale } from '@utils/scaling';
 import { COLORS } from '@constants/colors';
 
@@ -53,13 +52,14 @@ export const TextInput = React.forwardRef<InputRef, InputProps>(
 
 const defaultStyles = StyleSheet.create({
   container: {
-    ...shadow,
     backgroundColor: COLORS.neutral0,
     borderRadius: moderateScale(82),
     color: COLORS.black,
     padding: 0,
     paddingVertical: verticalScale(12),
-    paddingHorizontal: scale(16)
+    paddingHorizontal: scale(16),
+    borderWidth: 1,
+    borderColor: COLORS.alphaBlack10
   },
   focusedStyle: {
     borderColor: COLORS.brand300

src/components/base/Input/Input.types.ts

@@ -8,7 +8,7 @@ export type TextInputProps = {
   onChangeValue?: (newValue: string) => unknown;
 };
 
-export type InputProps = TextInputProps &
+export type InputProps = Omit<TextInputProps, 'onChangeText'> &
   RNTextInputProps & {
     type?: ButtonType;
   };

src/components/composite/Header/Header.styles.ts

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import { shadow } from '@constants/shadow';
 import { scale, verticalScale } from '@utils/scaling';
 import { COLORS } from '@constants/colors';
 
@@ -13,8 +12,7 @@ export const styles = StyleSheet.create({
     height: verticalScale(48),
     minHeight: 56,
     paddingLeft: leftPadding,
-    paddingRight: rightPadding,
-    ...shadow
+    paddingRight: rightPadding
   },
   left: {
     position: 'absolute',

src/components/composite/Header/index.tsx

@@ -39,7 +39,7 @@ export function Header(props: HeaderProps): JSX.Element {
           fontFamily="Inter_700Bold"
           fontSize={20}
           fontWeight="700"
-          color={COLORS.neutral800}
+          color={COLORS.neutral900}
         >
           {title}
         </Text>
@@ -53,7 +53,7 @@ export function Header(props: HeaderProps): JSX.Element {
       <>
         {backIconVisible && (
           <Button onPress={_onBackPress}>
-            <BackIcon color={COLORS.neutral900} />
+            <BackIcon color={COLORS.neutral900} scale={1.15} />
           </Button>
         )}
         {titlePosition === 'left' && (

src/components/composite/InputWithIcon/styles.ts

@@ -15,6 +15,7 @@ export const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
+    borderWidth: 0,
     backgroundColor: 'transparent',
     borderRadius: moderateScale(82),
     shadowColor: 'transparent',

src/components/modular/AnimatedTabs/index.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  ScrollView,
+  Dimensions,
+  ViewStyle,
+  RefreshControl
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from 'react-native-reanimated';
+import { Button, Row, Spacer, Text } from '@components/base';
+import { verticalScale } from '@utils/scaling';
+import { COLORS } from '@constants/colors';
+import { styles } from './styles';
+
+type AnimatedTab = {
+  view: JSX.Element;
+  title: string;
+};
+
+interface AnimatedTabsProps {
+  tabs: AnimatedTab[];
+  containerStyle?: ViewStyle;
+  onRefresh?: () => unknown;
+  isRefreshing?: boolean;
+}
+
+export const AnimatedTabs = (props: AnimatedTabsProps) => {
+  const { tabs, containerStyle, onRefresh, isRefreshing } = props;
+  const tabCount = tabs.length;
+  const scrollView = useRef<ScrollView>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const tabWidth = Dimensions.get('window').width;
+  const tabBarWidth = tabWidth / tabCount;
+
+  const indicatorPosition = useSharedValue(0);
+
+  // @ts-ignore
+  const indicatorStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: withTiming(indicatorPosition.value) }]
+    };
+  });
+
+  useEffect(() => {
+    indicatorPosition.value = withTiming(currentIndex * (tabWidth / 2), {
+      duration: 0
+    });
+  }, [currentIndex, indicatorPosition, tabWidth]);
+
+  const scrollToTab = (idx: number) => {
+    scrollView.current?.scrollTo({ x: tabWidth * idx, animated: true });
+    setCurrentIndex(idx);
+    indicatorPosition.value = withTiming(idx * tabBarWidth);
+  };
+
+  const renderTabView = (tab: AnimatedTab, idx: number): JSX.Element => {
+    return (
+      <View
+        key={`${tab.title}-view-${idx}`}
+        style={{ width: tabWidth, flex: 1 }}
+      >
+        {tab.view}
+      </View>
+    );
+  };
+
+  const renderTabBar = (tab: AnimatedTab, idx: number): JSX.Element => {
+    return (
+      <Button
+        onPress={() => scrollToTab(idx)}
+        key={`${tab.title}-${idx}-bar`}
+        style={styles.tabBarTitle}
+      >
+        <Text
+          fontFamily="Inter_500Medium"
+          color={currentIndex === idx ? COLORS.brand500 : COLORS.midnight}
+          fontSize={16}
+        >
+          {tab.title}
+        </Text>
+      </Button>
+    );
+  };
+
+  return (
+    <View style={containerStyle}>
+      <Row alignItems="center" justifyContent="space-between">
+        {tabs.map(renderTabBar)}
+      </Row>
+      <View style={styles.tabsIndicator}>
+        <Animated.View
+          style={[
+            {
+              position: 'relative',
+              bottom: 1,
+              left: 0,
+              width: tabWidth / 2,
+              height: 2,
+              backgroundColor: COLORS.brand500
+            },
+            indicatorStyle
+          ]}
+        />
+      </View>
+      <Spacer value={verticalScale(10)} />
+      <ScrollView
+        ref={scrollView}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onMomentumScrollEnd={(event) => {
+          const scrollOffsetX = event.nativeEvent.contentOffset.x;
+          setCurrentIndex(scrollOffsetX > 0 ? 1 : 0);
+        }}
+        contentContainerStyle={{ flexGrow: 1 }}
+        refreshControl={
+          <RefreshControl
+            onRefresh={onRefresh}
+            refreshing={Boolean(isRefreshing)}
+          />
+        }
+      >
+        {tabs.map(renderTabView)}
+      </ScrollView>
+    </View>
+  );
+};

src/components/modular/AnimatedTabs/styles.ts

@@ -0,0 +1,17 @@
+import { COLORS } from '@constants/colors';
+import { scale, verticalScale } from '@utils/scaling';
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  tabBarTitle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: scale(24)
+  },
+  tabsIndicator: {
+    backgroundColor: COLORS.alphaBlack10,
+    height: 0.5
+  }
+});

src/components/modular/StakingPool/index.tsx

@@ -0,0 +1,57 @@
+import { Row, Spacer, Text } from '@components/base';
+import { StakingPool } from '@models';
+import React from 'react';
+import { View } from 'react-native';
+import { TokenLogo } from '../TokenLogo';
+import { scale, verticalScale } from '@utils/scaling';
+import { useTranslation } from 'react-i18next';
+import { COLORS } from '@constants/colors';
+
+interface StakingPoolItemProps {
+  stakingPool: StakingPool;
+}
+
+export const StakingPoolItem = (props: StakingPoolItemProps) => {
+  const { stakingPool } = props;
+  const { t } = useTranslation();
+
+  return (
+    <Row
+      alignItems="center"
+      justifyContent="space-between"
+      style={{ opacity: stakingPool.isActive ? 1 : 0.5 }}
+    >
+      <Row alignItems="center">
+        <TokenLogo token={stakingPool.token.name} />
+        <Spacer value={scale(12)} horizontal />
+        <View>
+          <Text
+            color={COLORS.neutral900}
+            fontFamily="Inter_500Medium"
+            fontWeight="500"
+          >
+            {stakingPool.token.name}
+          </Text>
+          <Spacer value={verticalScale(4)} />
+          <Text
+            color={COLORS.neutral400}
+            fontFamily="Inter_500Medium"
+            fontWeight="500"
+          >
+            {t('staking.current.stake', {
+              amount: stakingPool.userStake,
+              symbol: stakingPool.token.symbol
+            })}
+          </Text>
+        </View>
+      </Row>
+      <Text
+        color={COLORS.success500}
+        fontSize={14}
+        fontFamily="Inter_500Medium"
+      >
+        {stakingPool.apy}%
+      </Text>
+    </Row>
+  );
+};

src/components/modular/TokenLogo/index.tsx

@@ -8,8 +8,10 @@ import {
   FirepotIcon,
   GanymedeIcon,
   HeraPoolIcon,
+  LangFundIcon,
   PlutusIcon,
   TetherIcon,
+  UnknownTokenIcon,
   UsdcIcon
 } from '@components/svg/icons';
 import { AirDAODictTypes } from '@crypto/common/AirDAODictTypes';
@@ -25,7 +27,7 @@ export interface TokenLogoProps {
 export const TokenLogo = (props: TokenLogoProps) => {
   const { scale, token, overrideIconVariants = { amb: 'blue' } } = props;
   switch (token.toLowerCase()) {
-    case 'airDAO':
+    case 'airdao':
       if (overrideIconVariants.amb === 'white') {
         return <AirdaoWhiteIcon scale={scale} />;
       }
@@ -57,7 +59,10 @@ export const TokenLogo = (props: TokenLogoProps) => {
     case AirDAODictTypes.Code.Bond.toLowerCase():
     case 'airbond':
       return <AirBondIcon scale={scale} />;
+    case AirDAODictTypes.Code.LangOperation.toLowerCase():
+    case 'operation funds lang inu':
+      return <LangFundIcon scale={scale} />;
     default:
-      return <AirdaoBlueIcon scale={scale} />;
+      return <UnknownTokenIcon scale={scale} />;
   }
 };