some ui

rainbow-me · Aug 29, 2024 · 4c12695 · 4c12695
1 parent e7d9b7c
commit 4c12695
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 2 deletions.
diff --git a/src/components/asset-list/RecyclerAssetList2/WrappedClaimable.tsx b/src/components/asset-list/RecyclerAssetList2/WrappedClaimable.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, BoxProps, Inline, Text } from '@/design-system';
+import { useAccountSettings } from '@/hooks';
+import { usePositions } from '@/resources/defi/PositionsQuery';
+import { PositionCard } from '@/components/positions/PositionsCard';
+
+export default function WrappedClaimable({ uniqueId, placement }: { uniqueId: string; placement: 'left' | 'right' }) {
+  // const { accountAddress, nativeCurrency } = useAccountSettings();
+  // const { data } = usePositions({
+  //   address: accountAddress,
+  //   currency: nativeCurrency,
+  // });
+
+  // const position = data?.positions.find(position => position.type === uniqueId);
+
+  // const placementProps: BoxProps =
+  //   placement === 'left'
+  //     ? {
+  //         alignItems: 'flex-start',
+  //         paddingLeft: '19px (Deprecated)',
+  //         paddingRight: '8px',
+  //       }
+  //     : {
+  //         alignItems: 'flex-end',
+  //         paddingRight: '19px (Deprecated)',
+  //         paddingLeft: '8px',
+  //       };
+
+  // if (!position) return null;
+  const color = 'rgba(7, 17, 32, 0.02)';
+  return (
+    <Box padding="20px" justifyContent="center">
+      <Inline alignVertical="center">
+        <Box style={{ height: 40, width: 40, backgroundColor: 'blue', borderRadius: 11 }}></Box>
+        <Box
+          alignItems="center"
+          justifyContent="center"
+          height={{ custom: 28 }}
+          paddingHorizontal="8px"
+          borderRadius={12}
+          borderWidth={1.333}
+          borderColor={{ custom: color }}
+          style={{ backgroundColor: color }}
+        >
+          <Text weight="semibold" color="label" align="center" size="17pt">
+            $662.72
+          </Text>
+        </Box>
+      </Inline>
+    </Box>
+  );
+}
diff --git a/src/components/asset-list/RecyclerAssetList2/WrappedClaimablesListHeader.tsx b/src/components/asset-list/RecyclerAssetList2/WrappedClaimablesListHeader.tsx
@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import useOpenPositionCards from '@/hooks/useOpenPositionCards';
+import { StyleSheet } from 'react-native';
+import CaretImageSource from '../../../assets/family-dropdown-arrow.png';
+import { useTheme } from '../../../theme/ThemeContext';
+import { ButtonPressAnimation } from '../../animations';
+import { Inline, Text } from '@/design-system';
+import * as i18n from '@/languages';
+import Animated, { useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import useOpenClaimables from '@/hooks/useOpenClaimables';
+
+export default function WrappedClaimablesListHeader({ total, ...props }: { total: string }) {
+  const { colors } = useTheme();
+  const { isClaimablesOpen, toggleOpenClaimables } = useOpenClaimables();
+
+  const animationValue = useSharedValue(Number(isClaimablesOpen));
+
+  useEffect(() => {
+    animationValue.value = withTiming(isClaimablesOpen ? 1 : 0, {
+      duration: 200,
+    });
+  }, [animationValue, isClaimablesOpen]);
+
+  const caretAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        rotate: `${animationValue.value * 90}deg`,
+      },
+    ],
+  }));
+
+  const totalOpacityAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: 1 - animationValue.value,
+  }));
+
+  return (
+    <ButtonPressAnimation
+      key={`claimables_${isClaimablesOpen}`}
+      onPress={toggleOpenClaimables}
+      scaleTo={1.05}
+      style={sx.container}
+      testID="claimables-list-header"
+    >
+      <Inline alignHorizontal="justify" alignVertical="center">
+        <Text size="22pt" color="label" weight="heavy">
+          {i18n.t(i18n.l.account.tab_claimables)}
+        </Text>
+        <Inline horizontalSpace="8px" alignVertical="center">
+          {!isClaimablesOpen && (
+            <Animated.View style={[sx.total, totalOpacityAnimatedStyle]}>
+              <Text size="20pt" color="label" weight="regular">
+                {total}
+              </Text>
+            </Animated.View>
+          )}
+          <Animated.Image source={CaretImageSource} style={[sx.caret, caretAnimatedStyle]} tintColor={colors.dark} />
+        </Inline>
+      </Inline>
+    </ButtonPressAnimation>
+  );
+}
+
+const sx = StyleSheet.create({
+  container: {
+    height: 48,
+    justifyContent: 'center',
+    paddingHorizontal: 19,
+  },
+  caret: {
+    height: 18,
+    width: 8,
+    marginBottom: 1,
+    right: 5,
+  },
+  total: {
+    paddingRight: 4,
+  },
+});
diff --git a/src/components/asset-list/RecyclerAssetList2/core/RowRenderer.tsx b/src/components/asset-list/RecyclerAssetList2/core/RowRenderer.tsx
@@ -8,6 +8,7 @@ import { ExtendedState } from './RawRecyclerList';
 import {
   AssetsHeaderExtraData,
   CellType,
+  ClaimablesHeaderExtraData,
   CoinDividerExtraData,
   CoinExtraData,
   NFTExtraData,
@@ -33,6 +34,8 @@ import { RemoteCardCarousel } from '@/components/cards/remote-cards';
 import WrappedCollectiblesHeader from '../WrappedCollectiblesHeader';
 import NFTLoadingSkeleton from '../NFTLoadingSkeleton';
 import { NFTEmptyState } from '../NFTEmptyState';
+import WrappedClaimablesListHeader from '../WrappedClaimablesListHeader';
+import WrappedClaimable from '../WrappedClaimable';
 
 function rowRenderer(type: CellType, { uid }: { uid: string }, _: unknown, extendedState: ExtendedState) {
   const data = extendedState.additionalData[uid];
@@ -51,6 +54,8 @@ function rowRenderer(type: CellType, { uid }: { uid: string }, _: unknown, exten
     case CellType.EMPTY_ROW:
     case CellType.POSITIONS_SPACE_AFTER:
     case CellType.POSITIONS_SPACE_BEFORE:
+    case CellType.CLAIMABLES_SPACE_AFTER:
+    case CellType.CLAIMABLES_SPACE_BEFORE:
       return null;
     case CellType.COIN_DIVIDER:
       return (
@@ -160,8 +165,19 @@ function rowRenderer(type: CellType, { uid }: { uid: string }, _: unknown, exten
     case CellType.POSITION: {
       const { uniqueId, index } = data as PositionExtraData;
 
-      return <WrappedPosition placement={index % 2 === 0 ? 'left' : 'right'} uniqueId={uniqueId} />;
+      // return <WrappedPosition placement={index % 2 === 0 ? 'left' : 'right'} uniqueId={uniqueId} />;
+      return <WrappedClaimable></WrappedClaimable>;
     }
+    case CellType.CLAIMABLES_HEADER: {
+      const { total } = data as ClaimablesHeaderExtraData;
+      return <WrappedClaimablesListHeader total={total} />;
+    }
+    case CellType.CLAIMABLE:
+      return null;
+    //   const { uniqueId, index } = data as ClaimableExtraData;
+
+    //   return <WrappedClaimable placement={index % 2 === 0 ? 'left' : 'right'} uniqueId={uniqueId} />;
+    // }
 
     case CellType.LOADING_ASSETS:
       return <AssetListItemSkeleton />;

diff --git a/src/components/asset-list/RecyclerAssetList2/core/ViewDimensions.tsx b/src/components/asset-list/RecyclerAssetList2/core/ViewDimensions.tsx
@@ -70,6 +70,13 @@ const ViewDimensions: Record<CellType, Dim> = {
     height: 130,
     width: deviceUtils.dimensions.width / 2 - 0.1,
   },
+  [CellType.CLAIMABLES_HEADER]: { height: AssetListHeaderHeight },
+  [CellType.CLAIMABLES_SPACE_BEFORE]: { height: 10 },
+  [CellType.CLAIMABLES_SPACE_AFTER]: { height: 24 },
+  [CellType.CLAIMABLE]: {
+    height: 60,
+    width: deviceUtils.dimensions.width,
+  },
   [CellType.REMOTE_CARD_CAROUSEL]: { height: 112 },
 };
 

diff --git a/src/components/asset-list/RecyclerAssetList2/core/ViewTypes.ts b/src/components/asset-list/RecyclerAssetList2/core/ViewTypes.ts
@@ -30,6 +30,11 @@ export enum CellType {
   POSITION = 'POSITION',
   POSITIONS_SPACE_AFTER = 'POSITIONS_SPACE_AFTER',
 
+  CLAIMABLES_SPACE_BEFORE = 'CLAIMABLES_SPACE_BEFORE',
+  CLAIMABLES_HEADER = 'CLAIMABLES_HEADER',
+  CLAIMABLE = 'CLAIMABLE',
+  CLAIMABLES_SPACE_AFTER = 'CLAIMABLEs_SPACE_AFTER',
+
   LOADING_ASSETS = 'LOADING_ASSETS',
   RECEIVE_CARD = 'RECEIVE_CARD',
   ETH_CARD = 'ETH_CARD',
@@ -74,6 +79,13 @@ export type PositionExtraData = {
 export type PositionHeaderExtraData = {
   total: string;
 };
+export type ClaimableExtraData = {
+  uniqueId: string;
+  index: number;
+};
+export type ClaimablesHeaderExtraData = {
+  total: string;
+};
 export type NFTFamilyExtraData = {
   type: CellType.FAMILY_HEADER;
   name: string;
@@ -90,6 +102,8 @@ export type CellExtraData =
   | AssetListHeaderExtraData
   | AssetsHeaderExtraData
   | PositionExtraData
-  | PositionHeaderExtraData;
+  | PositionHeaderExtraData
+  | ClaimableExtraData
+  | ClaimablesHeaderExtraData;
 
 export type CellTypes = BaseCellType & CellExtraData;
diff --git a/src/hooks/useOpenClaimables.ts b/src/hooks/useOpenClaimables.ts
@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { useMMKVBoolean } from 'react-native-mmkv';
+import useAccountSettings from './useAccountSettings';
+
+export default function useOpenClaimables() {
+  const { accountAddress } = useAccountSettings();
+  const [isClaimablesOpen, setIsClaimablesOpen] = useMMKVBoolean('claimables-open-' + accountAddress);
+
+  const toggleOpenClaimables = useCallback(() => setIsClaimablesOpen(prev => !prev), [setIsClaimablesOpen]);
+
+  return {
+    isClaimablesOpen,
+    toggleOpenClaimables,
+  };
+}
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -16,6 +16,7 @@
       "tab_balances": "Balances",
       "tab_balances_empty_state": "Balance",
       "tab_balances_tooltip": "Ethereum and Token Balances",
+      "tab_claimables": "Claimables",
       "tab_collectibles": "Collectibles",
       "tab_interactions": "Interactions",
       "tab_interactions_tooltip": "Smart Contract Interactions",