TW-1340: Disable buy, list, mint NFT for IOS

src/screens/collection/components/collectible-item.styles.ts

@@ -86,44 +86,15 @@ export const useCollectibleItemStyles = createUseStylesMemoized(({ colors, typog
     justifyContent: 'flex-end'
   },
   actionButton: {
-    marginTop: formatSize(8),
-    borderWidth: formatSize(2),
-    borderRadius: formatSize(10),
-    alignItems: 'center'
-  },
-  actionButtonText: {
-    paddingVertical: formatSize(13),
-    ...typography.body17Semibold
-  },
-
-  firstButtonActive: {
-    borderColor: colors.peach,
-    color: colors.peach
+    marginTop: formatSize(8)
   },
-  firstButtonDisabled: {
-    borderColor: colors.disabled,
-    color: colors.disabled
-  },
-
-  secondButtonActive: {
-    borderColor: colors.peach,
-    color: colors.white,
-    backgroundColor: colors.peach
-  },
-  secondButtonDisabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.disabled
-  },
-  secondButtonTextDisabled: {
+  primaryButton: {
     color: colors.white
   },
 
   topContainer: {
     flex: 1
   },
-  secondButtonTextActive: {
-    color: colors.white
-  },
   nameBlock: {
     flexDirection: 'row',
     justifyContent: 'space-between',

src/screens/collection/components/collectible-item.tsx

@@ -5,12 +5,16 @@ import useSWR from 'swr';
 
 import { fetchCollectibleExtraDetails } from 'src/apis/objkt';
 import { objktCurrencies } from 'src/apis/objkt/constants';
+import { ButtonLargePrimary } from 'src/components/button/button-large/button-large-primary/button-large-primary';
+import { ButtonLargeSecondary } from 'src/components/button/button-large/button-large-secondary/button-large-secondary';
 import { CollectibleImage } from 'src/components/collectible-image';
 import { Divider } from 'src/components/divider/divider';
 import { Icon } from 'src/components/icon/icon';
 import { IconNameEnum } from 'src/components/icon/icon-name.enum';
 import { ImageBlurOverlay } from 'src/components/image-blur-overlay';
 import { BLOCK_DURATION } from 'src/config/fixed-times';
+import { emptyFn } from 'src/config/general';
+import { isIOS } from 'src/config/system';
 import { useShareNFT } from 'src/hooks/use-share-nft.hook';
 import { ConfirmationTypeEnum } from 'src/interfaces/confirm-payload/confirmation-type.enum';
 import { ModalsEnum } from 'src/navigator/enums/modals.enum';
@@ -76,6 +80,10 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
   );
 
   const firstButton = useMemo(() => {
+    if (isIOS) {
+      return { title: '', onPress: emptyFn };
+    }
+
     if (!isAccountHolder) {
       return {
         title: 'Make offer',
@@ -89,7 +97,8 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
     if (!highestOffer) {
       return {
         title: 'No offers yet',
-        disabled: true
+        disabled: true,
+        onPress: emptyFn
       };
     }
 
@@ -98,7 +107,8 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
     if (!currency) {
       return {
         title: 'Sell',
-        disabled: true
+        disabled: true,
+        onPress: emptyFn
       };
     }
 
@@ -124,6 +134,10 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
   }, [accountPkh, selectedRpc, isAccountHolder, collectionContract, item.id, extraDetails?.offers_active, navigate]);
 
   const secondButton = useMemo(() => {
+    if (isIOS) {
+      return { title: '', onPress: emptyFn };
+    }
+
     if (isAccountHolder) {
       const holdingAmount = item.holders.reduce(
         (acc, curr) => (curr.holder_address === accountPkh ? acc + curr.quantity : acc),
@@ -143,7 +157,8 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
 
       return {
         title: 'Listed',
-        disabled: true
+        disabled: true,
+        onPress: emptyFn
       };
     }
 
@@ -152,7 +167,8 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
     if (!listing) {
       return {
         title: 'Not listed',
-        disabled: true
+        disabled: true,
+        onPress: emptyFn
       };
     }
 
@@ -162,7 +178,8 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
     if (!isSupportedContract || !purchaseCurrency) {
       return {
         title: 'Buy',
-        disabled: true
+        disabled: true,
+        onPress: emptyFn
       };
     }
 
@@ -256,40 +273,32 @@ export const CollectibleItem = memo<Props>(({ item, collectionContract, accountP
           </View>
         </View>
 
-        <View style={styles.buttonContainer}>
-          <TouchableOpacity
-            onPress={firstButton.onPress}
-            disabled={firstButton.disabled}
-            style={[styles.actionButton, firstButton.disabled ? styles.firstButtonDisabled : styles.firstButtonActive]}
-          >
-            <Text
-              style={[
-                styles.actionButtonText,
-                firstButton.disabled ? styles.firstButtonDisabled : styles.firstButtonActive
-              ]}
-            >
-              {firstButton.title}
-            </Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            onPress={secondButton.onPress}
-            style={[
-              styles.actionButton,
-              secondButton.disabled ? styles.secondButtonDisabled : styles.secondButtonActive
-            ]}
-            disabled={secondButton.disabled}
-          >
-            <Text
-              style={[
-                styles.actionButtonText,
-                secondButton.disabled ? styles.secondButtonTextDisabled : styles.secondButtonTextActive
-              ]}
-            >
-              {secondButton.title}
-            </Text>
-          </TouchableOpacity>
-        </View>
+        {isIOS ? (
+          <>
+            <Divider size={formatSize(16)} />
+            <ButtonLargeSecondary
+              title="View in NFT Market"
+              onPress={() => navigateToObjktForBuy(collectionContract, item.id)}
+            />
+          </>
+        ) : (
+          <View style={styles.buttonContainer}>
+            <ButtonLargeSecondary
+              title={firstButton.title}
+              disabled={firstButton.disabled}
+              style={styles.actionButton}
+              onPress={firstButton.onPress}
+            />
+
+            <ButtonLargePrimary
+              title={secondButton.title}
+              disabled={secondButton.disabled}
+              style={styles.actionButton}
+              textStyle={styles.primaryButton}
+              onPress={secondButton.onPress}
+            />
+          </View>
+        )}
       </View>
     </View>
   );

src/screens/collection/styles.ts

@@ -1,3 +1,4 @@
+import { isIOS } from 'src/config/system';
 import { createUseStylesMemoized } from 'src/styles/create-use-styles';
 import { formatSize } from 'src/styles/format-size';
 
@@ -12,7 +13,7 @@ export const useCollectionStyles = createUseStylesMemoized(() => ({
     justifyContent: 'center'
   },
   contentContainerStyle: {
-    paddingVertical: formatSize(12),
+    paddingVertical: formatSize(isIOS ? 30 : 12),
     paddingLeft: formatSize(24) - formatSize(GAP_SIZE),
     paddingRight: formatSize(24)
   }