Update Claim Button to use send account operation

0xsend · Oct 21, 2024 · 3c0a6ef · 3c0a6ef
1 parent 4636260
commit 3c0a6ef
Show file tree

Hide file tree

Showing 6 changed files with 525 additions and 166 deletions.
diff --git a/packages/app/__mocks__/wagmi.ts b/packages/app/__mocks__/wagmi.ts
@@ -100,6 +100,11 @@ const mockWagmi = {
     switchAccount: jest.fn(),
     connectos: [],
   }),
+  useEstimateFeesPerGas: jest.fn().mockReturnValue({
+    data: { baseFee: 100000, gasFees: 100000 },
+    isSuccess: true,
+    error: null,
+  }),
 }
 
 export const useChainId = mockWagmi.useChainId
@@ -115,4 +120,5 @@ export const useWaitForTransactionReceipt = mockWagmi.useWaitForTransactionRecei
 export const usePrepareTransactionRequest = mockWagmi.usePrepareTransactionRequest
 export const useSendTransaction = mockWagmi.useSendTransaction
 export const useSwitchAccount = mockWagmi.useSwitchAccount
+export const useEstimateFeesPerGas = mockWagmi.useEstimateFeesPerGas
 export default mockWagmi
diff --git a/packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap b/packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap
@@ -906,6 +906,23 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
             >
               1 SEND
             </Text>
+            <Text
+              style={
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "System",
+                  "fontSize": 13.2,
+                  "fontWeight": "300",
+                  "lineHeight": 16,
+                  "marginLeft": "auto",
+                  "marginRight": "auto",
+                  "userSelect": "auto",
+                }
+              }
+              suppressHighlighting={true}
+            >
+              Claimed
+            </Text>
           </View>
         </View>
       </View>

diff --git a/packages/app/features/account/rewards/activity/screen.test.tsx b/packages/app/features/account/rewards/activity/screen.test.tsx
@@ -34,8 +34,17 @@ jest.mock('app/utils/distributions', () => ({
     isSuccess: true,
     error: null,
   }),
-  usePrepareSendMerkleDropClaimTrancheWrite: jest.fn().mockReturnValue({
-    data: {},
+  useGenerateClaimUserOp: jest.fn().mockReturnValue({
+    data: null,
+  }),
+  useUserOpClaimMutation: jest.fn().mockReturnValue({
+    mutateAsync: jest.fn().mockReturnValue(Promise.resolve()),
+  }),
+}))
+
+jest.mock('app/utils/useUSDCFees', () => ({
+  useUSDCFees: jest.fn().mockReturnValue({
+    data: { baseFee: 100000, gasFees: 100000 },
     isSuccess: true,
     error: null,
   }),
@@ -90,7 +99,18 @@ jest.mock('app/utils/send-accounts', () => ({
       is_public: true,
       sendid: 1,
       all_tags: ['test'],
+      send_account_credentials: [],
+    },
+  }),
+}))
+
+jest.mock('app/utils/useSendAccountBalances', () => ({
+  useSendAccountBalances: jest.fn().mockReturnValue({
+    balances: {
+      USDC: 250000n,
+      SEND: 250000n,
     },
+    totalBalance: () => 5000000n,
   }),
 }))
 

diff --git a/packages/app/features/account/rewards/activity/screen.tsx b/packages/app/features/account/rewards/activity/screen.tsx
@@ -46,14 +46,6 @@ export function ActivityRewardsScreen() {
 
   const selectTriggerRef = useRef<HTMLSelectElement>(null)
 
-  const initialDistributionIndex = distributions?.findIndex(
-    (d) => d.number === queryParams.distribution
-  )
-
-  const [selectedDistributionIndex, setSelectedDistributionIndex] = useState(
-    !initialDistributionIndex || initialDistributionIndex === -1 ? 0 : initialDistributionIndex
-  )
-
   if (isLoading)
     return (
       <YStack f={1} pt={'$6'} $gtLg={{ pt: '$0' }} gap={'$7'}>
@@ -63,7 +55,7 @@ export function ActivityRewardsScreen() {
         </Stack>
       </YStack>
     )
-  if (!distributions || !distributions[selectedDistributionIndex])
+  if (!distributions)
     return (
       <YStack f={1} pt={'$6'} $gtLg={{ pt: '$0' }} gap={'$7'}>
         <Header />
@@ -75,6 +67,11 @@ export function ActivityRewardsScreen() {
       </YStack>
     )
 
+  const selectedDistributionIndex =
+    queryParams.distribution === undefined || distributions.length > queryParams.distribution
+      ? 0
+      : distributions.length - (queryParams.distribution - 6) //-6 because we skip the first 6 distributions
+
   const distributionDates = distributions.map(
     (d) =>
       `${d.timezone_adjusted_qualification_end.toLocaleString('default', {
@@ -83,7 +80,6 @@ export function ActivityRewardsScreen() {
   )
 
   const onValueChange = (value: string) => {
-    setSelectedDistributionIndex(Number(value))
     setRewardsScreenParams(
       { distribution: distributions[Number(value)]?.number },
       { webBehavior: 'replace' }
@@ -100,7 +96,7 @@ export function ActivityRewardsScreen() {
         <Select
           native={false}
           id={id}
-          value={queryParams.distribution?.toString() ?? '0'}
+          value={selectedDistributionIndex.toString() ?? '0'}
           onValueChange={onValueChange}
           onOpenChange={setIsOpen}
           defaultValue="0"
@@ -195,7 +191,7 @@ export function ActivityRewardsScreen() {
               pt={'$5'}
             >
               <Select.Group>
-                {distributions.toReversed().map((distribution, i) => (
+                {distributions.map((distribution, i) => (
                   <DistributionItem
                     isActive={
                       distribution.number === distributions[selectedDistributionIndex]?.number
@@ -212,19 +208,60 @@ export function ActivityRewardsScreen() {
           </Select.Content>
         </Select>
       </XStack>
-      <YStack f={1} w={'100%'} gap={'$7'}>
-        <DistributionRequirementsCard distribution={distributions[selectedDistributionIndex]} />
-        <SendPerksCards distribution={distributions[selectedDistributionIndex]} />
-        <MultiplierCards
-          distribution={distributions[selectedDistributionIndex]}
-          distributionDate={distributionDates[selectedDistributionIndex]}
-        />
-        <ClaimableRewardsCard distribution={distributions[selectedDistributionIndex]} />
-      </YStack>
+      {!distributions[selectedDistributionIndex] ? (
+        <YStack f={1} w={'100%'} gap={'$7'}>
+          <Paragraph color={'$color10'} size={'$5'}>
+            No rewards available
+          </Paragraph>
+        </YStack>
+      ) : (
+        <YStack f={1} w={'100%'} gap={'$7'}>
+          <DistributionRequirementsCard distribution={distributions[selectedDistributionIndex]} />
+          <SendPerksCards distribution={distributions[selectedDistributionIndex]} />
+          <MultiplierCards
+            distribution={distributions[selectedDistributionIndex]}
+            distributionDate={distributionDates[selectedDistributionIndex]}
+          />
+          <ClaimableRewardsCard distribution={distributions[selectedDistributionIndex]} />
+        </YStack>
+      )}
     </YStack>
   )
 }
 
+const DistributionItem = ({
+  isActive,
+  value,
+  index,
+  children,
+  ...props
+}: {
+  isActive: boolean
+} & SelectItemProps) => {
+  return (
+    <Select.Item index={index} value={value} bc="transparent" f={1} w="100%" {...props}>
+      <XStack gap={'$1'} $gtLg={{ gap: '$3.5' }} f={1} ai={'center'} jc={'center'}>
+        <Select.ItemText
+          display="flex"
+          fontSize={'$5'}
+          fontWeight={'500'}
+          textTransform={'uppercase'}
+          color={'$color12'}
+          jc={'center'}
+          ai={'center'}
+        >
+          {children}
+        </Select.ItemText>
+        {isActive && (
+          <Theme name="green_active">
+            <Dot size={'$3'} />
+          </Theme>
+        )}
+      </XStack>
+    </Select.Item>
+  )
+}
+
 const Header = () => (
   <Stack w={'100%'} h={224} position="relative" jc={'center'} br={'$6'} overflow="hidden">
     <Image
@@ -539,36 +576,3 @@ const ClaimableRewardsCard = ({
     </YStack>
   )
 }
-
-const DistributionItem = ({
-  isActive,
-  value,
-  index,
-  children,
-  ...props
-}: {
-  isActive: boolean
-} & SelectItemProps) => {
-  return (
-    <Select.Item index={index} value={value} bc="transparent" f={1} w="100%" {...props}>
-      <XStack gap={'$1'} $gtLg={{ gap: '$3.5' }} f={1} ai={'center'} jc={'center'}>
-        <Select.ItemText
-          display="flex"
-          fontSize={'$5'}
-          fontWeight={'500'}
-          textTransform={'uppercase'}
-          color={'$color12'}
-          jc={'center'}
-          ai={'center'}
-        >
-          {children}
-        </Select.ItemText>
-        {isActive && (
-          <Theme name="green_active">
-            <Dot size={'$3'} />
-          </Theme>
-        )}
-      </XStack>
-    </Select.Item>
-  )
-}