From fc6fd95d44f9eb5e8a49263fa7b156a07c685d83 Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Tue, 30 Apr 2024 14:23:04 +0800
Subject: [PATCH] handle sync in contract screen

---
 .../NftSelectorContractToolbar.tsx            | 19 +++++++++++++++----
 ...GalleryEditorNftSelectorContractScreen.tsx |  2 ++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx
index 100f7d5ec..4e3a32807 100644
--- a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx
+++ b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx
@@ -7,26 +7,39 @@ import { AnimatedRefreshIcon } from '~/components/AnimatedRefreshIcon';
 import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
 import { IconContainer } from '~/components/IconContainer';
 import { BaseM } from '~/components/Text';
+import { useSyncTokensActions } from '~/contexts/SyncTokensContext';
 
 type Props = {
+  contractId: string;
   contractName: string;
   isMultiselectMode: boolean;
   setIsMultiselectMode: (value: boolean) => void;
   onSelectedAllPress: () => void;
   hasSelectedItems: boolean;
+  ownershipTypeFilter: 'Collected' | 'Created';
 };
 
 export function NftSelectorContractToolbar({
+  contractId,
   contractName,
   isMultiselectMode,
   setIsMultiselectMode,
   onSelectedAllPress,
   hasSelectedItems,
+  ownershipTypeFilter,
 }: Props) {
+  const { isSyncing, isSyncingCreatedTokens, syncCreatedTokensForExistingContract } =
+    useSyncTokensActions();
+
   const handleMultiselectPress = useCallback(() => {
     setIsMultiselectMode?.(!isMultiselectMode);
   }, [isMultiselectMode, setIsMultiselectMode]);
 
+  const handleSyncTokensForContract = useCallback(async () => {
+    if (!contractId) return;
+    syncCreatedTokensForExistingContract(contractId);
+  }, [syncCreatedTokensForExistingContract, contractId]);
+
   return (
     <View className="flex-row justify-between px-4 pt-4">
       <BaseM weight="Bold">{contractName}</BaseM>
@@ -52,10 +65,8 @@ export function NftSelectorContractToolbar({
           color={isMultiselectMode ? 'active' : 'default'}
         />
         <AnimatedRefreshIcon
-          //   onSync={handleSync}
-          //   isSyncing={ownershipTypeFilter === 'Collected' ? isSyncing : isSyncingCreatedTokens}
-          onSync={() => {}}
-          isSyncing={false}
+          onSync={handleSyncTokensForContract}
+          isSyncing={ownershipTypeFilter === 'Collected' ? isSyncing : isSyncingCreatedTokens}
           eventElementId="NftSelectorSelectorRefreshButton"
           eventName="NftSelectorSelectorRefreshButton pressed"
         />
diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
index 8b29e34c5..a3836dc75 100644
--- a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
+++ b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
@@ -152,11 +152,13 @@ export function GalleryEditorNftSelectorContractScreen() {
         }
       />
       <NftSelectorContractToolbar
+        contractId={contractId}
         contractName={contractName}
         isMultiselectMode={isMultiselectMode}
         setIsMultiselectMode={setIsMultiselectMode}
         onSelectedAllPress={handleSelectedAllPress}
         hasSelectedItems={selectedTokens.length > 0}
+        ownershipTypeFilter={route.params.ownerFilter || 'Collected'}
       />
       <NftSelectorContractPickerGrid
         isCreator={isCreator}