refactor: changes to theme values and files

Author: enesozturk

dapps/Web3InboxLab/babel.config.js

@@ -9,6 +9,18 @@ module.exports = {
           crypto: 'react-native-quick-crypto',
           stream: 'stream-browserify',
           buffer: '@craftzdog/react-native-buffer',
+          '@/components': './src/components',
+          '@/constants': './src/constants',
+          '@/context': './src/context',
+          '@/data': './src/data',
+          '@/hooks': './src/hooks',
+          '@/navigators': './src/navigators',
+          '@/icons': './src/icons',
+          '@/screens': './src/screens',
+          '@/modals': './src/modals',
+          '@/utils': './src/utils',
+          '@/provider': './src/provider',
+          '@/store': './src/store',
         },
       },
     ],

dapps/Web3InboxLab/ios/Podfile.lock

@@ -1490,4 +1490,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: e8f78ebf5f1060186f4f0fa5d30ef145aeab106b
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

dapps/Web3InboxLab/ios/Web3InboxLab.xcodeproj/project.pbxproj

@@ -623,7 +623,10 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -702,7 +705,10 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

dapps/Web3InboxLab/src/components/AccountButton.tsx

@@ -3,59 +3,16 @@ import React from 'react';
 import {useWeb3Modal} from '@web3modal/wagmi-react-native';
 import {useAccount, useEnsAvatar, useEnsName} from 'wagmi';
 import {Image, Pressable, View} from 'react-native';
-import useColors from '../utils/theme';
 
-import {
-  Canvas,
-  Rect,
-  RadialGradient,
-  Skia,
-  Shader,
-  vec,
-} from '@shopify/react-native-skia';
+import {Canvas, Rect, RadialGradient, vec} from '@shopify/react-native-skia';
+import {generateAvatarColor} from '@/utils/ColorGenerator';
+import useColors from '@/hooks/useColors';
 
 interface AvatarProps {
   width: number;
   height: number;
 }
 
-const hexToRgb = (hex: string): [number, number, number] => {
-  const bigint = parseInt(hex, 16);
-
-  const r = (bigint >> 16) & 255;
-  const g = (bigint >> 8) & 255;
-  const b = bigint & 255;
-
-  return [r, g, b];
-};
-
-const tintColor = (
-  rgb: [number, number, number],
-  tint: number,
-): [number, number, number] => {
-  const [r, g, b] = rgb;
-  const tintedR = Math.round(r + (255 - r) * tint);
-  const tintedG = Math.round(g + (255 - g) * tint);
-  const tintedB = Math.round(b + (255 - b) * tint);
-
-  return [tintedR, tintedG, tintedB];
-};
-
-export const generateAvatarColor = (address: string) => {
-  const hash = address.toLowerCase().replace(/^0x/iu, '');
-  const baseColor = hash.substring(0, 6);
-  const rgbColor = hexToRgb(baseColor);
-
-  const colors: string[] = [];
-
-  for (let i = 0; i < 5; i += 1) {
-    const tintedColor = tintColor(rgbColor, 0.15 * i);
-    colors.push(`rgb(${tintedColor[0]}, ${tintedColor[1]}, ${tintedColor[2]})`);
-  }
-
-  return colors;
-};
-
 export default function AccountButton({width, height}: AvatarProps) {
   const {address} = useAccount();
   const modal = useWeb3Modal();
@@ -65,6 +22,10 @@ export default function AccountButton({width, height}: AvatarProps) {
   const {data: ensName} = useEnsName({address: addressOrEnsDomain});
   const {data: ensAvatar} = useEnsAvatar({name: ensName});
 
+  if (!address) {
+    return null;
+  }
+
   return (
     <Pressable
       style={{

dapps/Web3InboxLab/src/components/DiscoverListItem.tsx

@@ -10,10 +10,8 @@ import {
 } from 'react-native';
 import useNotifyClientContext from '../hooks/useNotifyClientContext';
 
-import projectsData from '../constants/projects-resposne.json';
-import useColors from '../utils/theme';
-
-type ProjectItem = (typeof projectsData)[0];
+import useColors from '@/hooks/useColors';
+import {ProjectItem} from '@/constants/Explorer';
 
 type DiscoverListItemProps = {
   item: ProjectItem;

dapps/Web3InboxLab/src/components/NotificationItem.tsx

@@ -1,5 +1,5 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
-import useColors from '../utils/theme';
+import useColors from '@/hooks/useColors';
 import {DateUtil} from '../utils/date';
 
 type NotificationItemProps = {

dapps/Web3InboxLab/src/components/NotificationItemWithSubscription.tsx

@@ -1,5 +1,5 @@
 import {Image, Pressable, StyleSheet, Text, View} from 'react-native';
-import useColors from '../utils/theme';
+import useColors from '@/hooks/useColors';
 import {DateUtil} from '../utils/date';
 import {NotifyClientTypes} from '@walletconnect/notify-client';
 

dapps/Web3InboxLab/src/components/SubscriptionItem.tsx

@@ -1,5 +1,5 @@
+import useColors from '@/hooks/useColors';
 import {Image, Pressable, StyleSheet, Text, View} from 'react-native';
-import useColors from '../utils/theme';
 
 interface ISubscriptionItem {
   title: string;
@@ -20,14 +20,13 @@ export default function SubscriptionItem({
     <Pressable
       onPress={onPress}
       style={({pressed}) => [
+        styles.container,
         {
           backgroundColor: pressed
             ? colors.backgroundActive
             : colors.background,
           borderColor: colors.border,
-          borderRadius: 16,
         },
-        styles.container,
       ]}>
       <View style={styles.imageContainer}>
         <View style={styles.imageBorder} />
@@ -51,13 +50,12 @@ const styles = StyleSheet.create({
     gap: 8,
     width: '100%',
     padding: 12,
-    borderWidth: 0.5,
   },
   contentContainer: {
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    gap: 8,
+    gap: 4,
   },
   title: {
     fontSize: 15,

dapps/Web3InboxLab/src/components/SubscriptionItemSkeleton.tsx

@@ -1,5 +1,5 @@
 import {View} from 'react-native';
-import useColors from '../utils/theme';
+import useColors from '@/hooks/useColors';
 
 export default function SubscriptionItemSkeleton({style}) {
   const colors = useColors();