Nft Collections

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         applicationId "co.psychedelic.plug"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 24
-        versionName "0.3.0"
+        versionCode 25
+        versionName "0.4.0"
         resValue "string", "build_config_package", "co.psychedelic.plug"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
         if (isNewArchitectureEnabled()) {

declarations.d.ts

@@ -8,3 +8,4 @@ declare module '*.svg' {
 declare module 'react-native-fetch-api';
 declare module 'react-native-crypto-js';
 declare module 'emoji-datasource';
+declare module 'mime-types';

ios/Plug.xcodeproj/project.pbxproj

@@ -560,7 +560,7 @@
 					"$(inherited)",
 					"$(PROJECT_DIR)/rust/.cargo/mobile_app/target/universal/release",
 				);
-				MARKETING_VERSION = 0.3.0;
+				MARKETING_VERSION = 0.4.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -603,7 +603,7 @@
 					"$(inherited)",
 					"$(PROJECT_DIR)/rust/.cargo/mobile_app/target/universal/release",
 				);
-				MARKETING_VERSION = 0.3.0;
+				MARKETING_VERSION = 0.4.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

ios/Podfile.lock

@@ -439,7 +439,7 @@ PODS:
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNFileViewer (2.1.5):
     - React-Core
-  - RNFlashList (1.2.2):
+  - RNFlashList (1.4.0):
     - React-Core
   - RNGestureHandler (2.7.1):
     - React-Core
@@ -480,7 +480,7 @@ PODS:
   - RNSentry (4.5.0):
     - React-Core
     - Sentry (= 7.25.1)
-  - RNSVG (13.4.0):
+  - RNSVG (13.5.0):
     - React-Core
   - SDWebImage (5.11.1):
     - SDWebImage/Core (= 5.11.1)
@@ -821,14 +821,14 @@ SPEC CHECKSUMS:
   RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7
   RNFastImage: 3207b9eb17c2425d574ca40db35185db6e324f4e
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
-  RNFlashList: 13d14d9502661134ad3ba892f81d76bdcbd79755
+  RNFlashList: 399bf6a0db68f594ad2c86aaff3ea39564f39f8a
   RNGestureHandler: b7a872907ee289ada902127f2554fa1d2c076122
   RNLocalize: a64514b46a01375fdfae9349036b4dc7130333b5
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
   RNReanimated: 2a91e85fcd343f8af3c58d3425b99fdd285590a5
   RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
   RNSentry: a034d0e81e3d3c04b770dd2df953fe634d372d22
-  RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
+  RNSVG: 38ca962c970dbce1ca38991a5aebf26d163f9efb
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815
   Sentry: dd29c18c32b0af9269949f079cf631d581ca76ca

package.json

@@ -33,20 +33,20 @@
     "@dfinity/candid": "0.9.3",
     "@dfinity/principal": "^0.9.3",
     "@hookform/error-message": "^2.0.0",
-    "@psychedelic/dab-js": "1.4.12",
+    "@psychedelic/dab-js": "^1.5.0",
     "@psychedelic/plug-controller": "0.25.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/blur": "^4.2.0",
     "@react-native-masked-view/masked-view": "^0.2.7",
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/elements": "^1.3.6",
-    "@react-navigation/material-top-tabs": "^6.2.4",
-    "@react-navigation/native": "^6.0.8",
-    "@react-navigation/stack": "^6.2.0",
+    "@react-navigation/material-top-tabs": "^6.3.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/stack": "^6.3.4",
     "@reduxjs/toolkit": "^1.8.6",
     "@sentry/react-native": "^4.5.0",
-    "@shopify/flash-list": "^1.2.2",
+    "@shopify/flash-list": "^1.4.0",
     "@walletconnect/client": "^1.7.5",
     "assert-browserify": "^2.0.0",
     "axios": "0.24.0",
@@ -61,6 +61,7 @@
     "i18next": "^21.8.0",
     "js-sha256": "^0.9.0",
     "json-bigint": "^1.0.0",
+    "mime-types": "^2.1.35",
     "patch-package": "^6.4.7",
     "process": "^0.11.10",
     "punycode": "^2.1.1",
@@ -94,7 +95,7 @@
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.14.1",
     "react-native-sensitive-info": "^6.0.0-alpha.9",
-    "react-native-svg": "^13.4.0",
+    "react-native-svg": "^13.5.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-toast-notifications": "^3.3.1",
     "react-native-url-polyfill": "^1.3.0",

patches/mime-types+2.1.35.patch

@@ -0,0 +1,18 @@
+diff --git a/node_modules/mime-types/index.js b/node_modules/mime-types/index.js
+index b9f34d5..68ccbe9 100644
+--- a/node_modules/mime-types/index.js
++++ b/node_modules/mime-types/index.js
+@@ -13,7 +13,12 @@
+  */
+
+ var db = require('mime-db')
+-var extname = require('path').extname
++
++const extname = (path) => {
++  if (!path || path.indexOf('.') === -1) { return '' }
++  path = '.' + path.split('.').pop().toLowerCase()
++  return /.*(\..*)/g.exec(path)[1] || ''
++}
+
+ /**
+  * Module variables.

src/components/common/CommonItem/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { StyleProp, TextStyle, View, ViewStyle } from 'react-native';
 
 import Touchable from '@/commonComponents/Touchable';
@@ -59,8 +59,7 @@ function CommonItem({
   disabled,
   showActions = true,
 }: Props) {
-  const [imageType, setImageType] = useState('');
-  useGetType(imageUri, setImageType);
+  const imageType = useGetType(imageUri);
 
   const formattedId = shortAddress(id, longId ? longIdConfig : undefined);
 

src/components/common/ErrorState/constants.ts

@@ -13,14 +13,14 @@ export const getErrorStateData = (type: ERROR_TYPES) =>
   ({
     [ERROR_TYPES.FETCH_ERROR]: t(`errors.${ERROR_TYPES.FETCH_ERROR}`, {
       returnObjects: true,
-    }),
+    }) as ErrorStateData,
     [ERROR_TYPES.CONNECTION_ERROR]: t(
       `errors.${ERROR_TYPES.CONNECTION_ERROR}`,
       {
         returnObjects: true,
       }
-    ),
+    ) as ErrorStateData,
     [ERROR_TYPES.ERROR_BOUNDARY]: t(`errors.${ERROR_TYPES.ERROR_BOUNDARY}`, {
       returnObjects: true,
-    }),
+    }) as ErrorStateData,
   }[type] || null);

src/components/common/NftDisplayer/components/HTMLDisplayer/index.tsx

@@ -9,40 +9,20 @@ interface Props {
   onLoad?: () => void;
   url: string;
   style: StyleProp<ViewStyle>;
-  isSendView?: boolean;
-  isDetailView?: boolean;
   type: string;
 }
 
-const Spinner = ({
-  isDetailView,
-  isSendView,
-}: {
-  isDetailView?: boolean;
-  isSendView?: boolean;
-}) => (
-  <View
-    style={[
-      sharedStyles.webViewLoader,
-      (isDetailView || isSendView) && sharedStyles.webViewLoaderDetail,
-    ]}>
+const Spinner = ({ style }: { style?: StyleProp<ViewStyle> }) => (
+  <View style={[sharedStyles.webViewLoader, style]}>
     <ActivityIndicator size="small" color="white" />
   </View>
 );
 
-function HTMLDisplayer({
-  loading,
-  onLoad,
-  url,
-  style,
-  isSendView,
-  type,
-  isDetailView,
-}: Props) {
+function HTMLDisplayer({ loading, onLoad, url, style, type }: Props) {
   const webViewRef = useRef(null);
 
   return (
-    <View style={[sharedStyles.image, style]}>
+    <View style={style}>
       <WebView
         onLoad={onLoad}
         ref={webViewRef}
@@ -62,17 +42,10 @@ function HTMLDisplayer({
         }
         scrollEnabled={false}
         startInLoadingState={true}
-        renderLoading={() => (
-          <Spinner isDetailView={isDetailView} isSendView={isSendView} />
-        )}
-        style={isSendView ? sharedStyles.webViewSend : sharedStyles.webView}
+        renderLoading={() => <Spinner style={style} />}
+        style={[sharedStyles.webView, style]}
       />
-      {loading && (
-        <ActivityIndicator
-          style={sharedStyles.activityIndicator}
-          color="white"
-        />
-      )}
+      {loading && <Spinner style={style} />}
     </View>
   );
 }

src/components/common/NftDisplayer/components/ImageDisplayer/index.tsx

@@ -3,48 +3,27 @@ import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import Image from '@/components/common/Image';
-import { Colors } from '@/constants/theme';
 
-import sharedStyles from '../../styles';
+import styles from '../../styles';
 import HTMLDisplayer from '../HTMLDisplayer';
 
 interface Props {
   style: StyleProp<ViewStyle>;
   url: string;
-  isSendView?: boolean;
-  isDetailView?: boolean;
-  type?: string; //TODO: Improve this
+  type?: string;
 }
 
-function ImageDisplayer({ style, type, url, isSendView, isDetailView }: Props) {
-  const innerStyle = isSendView
-    ? { width: 54, height: 54 }
-    : { width: '100%', height: '100%' };
-
+function ImageDisplayer({ style, type, url }: Props) {
   return (
     <MaskedView
-      style={[sharedStyles.image, style]}
+      style={style}
       maskElement={
-        <View
-          style={[
-            StyleSheet.absoluteFill,
-            {
-              borderRadius: isSendView ? 10 : 20,
-              backgroundColor: Colors.Black.Pure,
-            },
-          ]}
-        />
+        <View style={[StyleSheet.absoluteFill, styles.imageMask, style]} />
       }>
       {type?.includes('svg') || type?.includes('html') ? (
-        <HTMLDisplayer
-          url={url}
-          style={innerStyle}
-          isSendView
-          type={type}
-          isDetailView={isDetailView}
-        />
+        <HTMLDisplayer url={url} style={styles.fullsize} type={type} />
       ) : (
-        <Image resizeMode="contain" style={innerStyle} url={url} />
+        <Image resizeMode="contain" style={styles.fullsize} url={url} />
       )}
     </MaskedView>
   );

src/components/common/NftDisplayer/components/VideoDisplayer/index.tsx

@@ -1,61 +1,48 @@
-import React from 'react';
-import { ActivityIndicator, StyleProp, View, ViewStyle } from 'react-native';
+import React, { useState } from 'react';
+import { ActivityIndicator, StyleProp, ViewStyle } from 'react-native';
 import Video from 'react-native-video';
 
 import useFileDownload from '@/hooks/useFileDownload';
+import { getExtension } from '@/utils/fileTypes';
 
 import sharedStyles from '../../styles';
 
 interface Props {
-  onLoad?: () => void;
   style: StyleProp<ViewStyle>;
   url: string;
-  loading?: boolean;
-  isDetailView?: boolean;
-  isSendView?: boolean;
+  type: string;
+  paused?: boolean;
+  filename?: string;
 }
 
-const VideoDisplayer = ({
-  onLoad,
-  style,
-  url,
-  loading,
-  isDetailView,
-  isSendView,
-}: Props) => {
-  const newUrl = useFileDownload({ url, format: 'mp4' });
+const VideoDisplayer = ({ style, url, paused, type, filename }: Props) => {
+  const [loading, setLoading] = useState(true);
+  const format = getExtension(type) || 'mp4';
+  const newUrl = useFileDownload({ url, format, filename });
+
+  const hideSpinner = () => {
+    setLoading(false);
+  };
 
   return (
-    <View
-      style={[
-        sharedStyles.container,
-        isDetailView && sharedStyles.containerDetail,
-        isSendView && sharedStyles.containerSend,
-        style,
-      ]}>
+    <>
       {loading && !newUrl ? (
-        <ActivityIndicator
-          style={sharedStyles.activityIndicator}
-          color="white"
-        />
+        <ActivityIndicator style={[sharedStyles.video, style]} color="white" />
       ) : (
         <Video
           repeat
-          onLoad={onLoad}
+          paused={paused}
+          onLoad={hideSpinner}
           resizeMode="cover"
           source={{ uri: newUrl }}
           selectedVideoTrack={{
             type: 'resolution',
             value: 480,
           }}
-          style={[
-            sharedStyles.video,
-            isDetailView && sharedStyles.videoDetail,
-            isSendView && sharedStyles.videoSend,
-          ]}
+          style={[sharedStyles.video, style]}
         />
       )}
-    </View>
+    </>
   );
 };