chore: show metadata (#191)

ignaciosantise · web-flow · commit f34b9a59b4ee · 2025-02-17T12:21:43.000-03:00
* chore: show wallet info in wagmi dapp

* chore: show deeplinks in wallet session details

* chore: changed build number

* chore: changed build number
diff --git a/dapps/W3MWagmi/android/app/build.gradle b/dapps/W3MWagmi/android/app/build.gradle
@@ -102,7 +102,7 @@ android {
         applicationId "com.walletconnect.web3modal.rnsample"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 99
+        versionCode 101
         versionName "1.1"
         resValue "string", "build_config_package", "com.w3mwagmi"
     }
diff --git a/dapps/W3MWagmi/ios/Podfile.lock b/dapps/W3MWagmi/ios/Podfile.lock
@@ -48,9 +48,9 @@ PODS:
   - hermes-engine (0.74.3):
     - hermes-engine/Pre-built (= 0.74.3)
   - hermes-engine/Pre-built (0.74.3)
-  - MMKV (2.0.0):
-    - MMKVCore (~> 2.0.0)
-  - MMKVCore (2.0.0)
+  - MMKV (2.0.2):
+    - MMKVCore (~> 2.0.2)
+  - MMKVCore (2.0.2)
   - RCT-Folly (2024.01.01.00):
     - boost
     - DoubleConversion
@@ -1692,8 +1692,8 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
   hermes-engine: 1f547997900dd0752dc0cc0ae6dd16173c49e09b
-  MMKV: f7d1d5945c8765f97f39c3d121f353d46735d801
-  MMKVCore: c04b296010fcb1d1638f2c69405096aac12f6390
+  MMKV: 3eacda84cd1c4fc95cf848d3ecb69d85ed56006c
+  MMKVCore: 508b4d3a8ce031f1b5c8bd235f0517fb3f4c73a9
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: 4c7eeb42be0b2e95195563c49be08d0b839d22b4
   RCTRequired: d530a0f489699c8500e944fde963102c42dcd0c2
diff --git a/dapps/W3MWagmi/src/App.tsx b/dapps/W3MWagmi/src/App.tsx
@@ -77,6 +77,11 @@ createAppKit({
   siweConfig,
   clipboardClient,
   customWallets,
+  connectorImages: {
+    coinbaseWallet:
+      'https://play-lh.googleusercontent.com/wrgUujbq5kbn4Wd4tzyhQnxOXkjiGqq39N4zBvCHmxpIiKcZw_Pb065KTWWlnoejsg',
+    appKitAuth: 'https://avatars.githubusercontent.com/u/179229932',
+  },
   features: {
     email: true,
     socials: ['x', 'discord', 'apple'],
diff --git a/dapps/W3MWagmi/src/components/Card.tsx b/dapps/W3MWagmi/src/components/Card.tsx
@@ -1,13 +1,6 @@
 import React from 'react';
-import {
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  StyleProp,
-  ViewStyle,
-  View,
-} from 'react-native';
-import {Icon, IconProps} from '@reown/appkit-ui-react-native';
+import {StyleSheet, StyleProp, ViewStyle, View} from 'react-native';
+import {Icon, IconProps, Pressable, Text} from '@reown/appkit-ui-react-native';
 
 import {useTheme} from '@/hooks/useTheme';
 
@@ -21,21 +14,26 @@ export interface CardProps {
 
 export function Card({title, value, onPress, icon, style}: CardProps) {
   const Theme = useTheme();
-  const backgroundColor = Theme['bg-175'];
+  const backgroundColor = Theme['gray-glass-005'];
 
   return (
-    <TouchableOpacity
+    <Pressable
       disabled={!onPress}
       style={[styles.container, {backgroundColor}, style]}
+      bounceScale={0.98}
       onPress={onPress}>
       <View>
-        <Text style={[styles.title, {color: Theme['fg-100']}]}>{title}</Text>
+        <Text variant="small-600" style={{color: Theme['fg-100']}}>
+          {title}
+        </Text>
         {value && (
-          <Text style={[styles.value, {color: Theme['fg-150']}]}>{value}</Text>
+          <Text variant="small-500" style={{color: Theme['fg-150']}}>
+            {value}
+          </Text>
         )}
       </View>
       {icon && <Icon name={icon} size="sm" color={'fg-100'} />}
-    </TouchableOpacity>
+    </Pressable>
   );
 }
 
@@ -49,12 +47,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  title: {
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  value: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
 });
diff --git a/dapps/W3MWagmi/src/screens/Settings/components/WalletInfo.tsx b/dapps/W3MWagmi/src/screens/Settings/components/WalletInfo.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import {useWalletInfo} from '@reown/appkit-wagmi-react-native';
+import {
+  BorderRadius,
+  FlexView,
+  IconBox,
+  Image,
+  Spacing,
+  Text,
+} from '@reown/appkit-ui-react-native';
+import {useTheme} from '@reown/appkit-ui-react-native';
+import {StyleSheet} from 'react-native';
+export function WalletInfo() {
+  const {walletInfo = {}} = useWalletInfo();
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      style={[
+        styles.container,
+        {
+          backgroundColor: Theme['gray-glass-005'],
+        },
+      ]}>
+      <FlexView
+        flexDirection="row"
+        alignItems="center"
+        margin={['xs', '0', 's', '0']}>
+        {walletInfo.icon ? (
+          <Image style={styles.image} source={walletInfo?.icon} />
+        ) : (
+          <IconBox
+            background
+            icon="walletPlaceholder"
+            size="sm"
+            style={styles.image}
+          />
+        )}
+        <Text variant="paragraph-600">{walletInfo?.name}</Text>
+      </FlexView>
+      <FlexView>
+        {/* @ts-ignore */}
+        {walletInfo?.redirect?.native && (
+          <>
+            <Text variant="small-600">Deep link:</Text>
+            {/* @ts-ignore */}
+            <Text variant="small-400">{walletInfo?.redirect?.native}</Text>
+          </>
+        )}
+        {/* @ts-ignore */}
+        {walletInfo?.redirect?.universal && (
+          <>
+            <Text style={styles.text} variant="small-600">
+              Universal link:
+            </Text>
+            {/* @ts-ignore */}
+            <Text variant="small-400">{walletInfo?.redirect?.universal}</Text>
+          </>
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: Spacing.m,
+    borderRadius: BorderRadius.s,
+  },
+  image: {
+    height: 25,
+    width: 25,
+    marginRight: 4,
+    borderRadius: BorderRadius.full,
+  },
+  text: {
+    marginTop: Spacing.xs,
+  },
+});
diff --git a/dapps/W3MWagmi/src/screens/Settings/index.tsx b/dapps/W3MWagmi/src/screens/Settings/index.tsx
@@ -11,6 +11,7 @@ import {Card} from '@/components/Card';
 import {useTheme} from '@/hooks/useTheme';
 import {HomeTabScreenProps} from '@/utils/TypesUtil';
 import styles from './styles';
+import {WalletInfo} from './components/WalletInfo';
 
 type Props = HomeTabScreenProps<'SettingsScreen'>;
 
@@ -70,6 +71,7 @@ function SettingsScreen({navigation}: Props) {
           onPress={() => navigation.navigate('Logs')}
           icon="chevronRight"
         />
+        <WalletInfo />
       </View>
     </ScrollView>
   );
diff --git a/wallets/rn_cli_wallet/android/app/build.gradle b/wallets/rn_cli_wallet/android/app/build.gradle
@@ -89,7 +89,7 @@ android {
         applicationId "com.walletconnect.web3wallet.rnsample"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 47
+        versionCode 54
         versionName "1.0"
         resValue "string", "build_config_package", "com.walletconnect.web3wallet.rnsample"
     }
diff --git a/wallets/rn_cli_wallet/src/components/Modal/ModalHeader.tsx b/wallets/rn_cli_wallet/src/components/Modal/ModalHeader.tsx
@@ -41,11 +41,12 @@ export function ModalHeader({
           </Text>
         </View>
       )}
-      <Image
-        source={{uri: metadata?.icons[0] ?? ''}}
-        style={[styles.logo, {borderColor: Theme['gray-glass-010']}]}
-      />
-
+      {metadata?.icons[0] && (
+        <Image
+          source={{uri: metadata?.icons[0] ?? ''}}
+          style={[styles.logo, {borderColor: Theme['gray-glass-010']}]}
+        />
+      )}
       <Text style={[styles.title, {color}]}>{metadata?.name || 'Unknown'}</Text>
       {intention && <Text style={[styles.desc, {color}]}>{intention}</Text>}
       <View style={styles.domainContainer}>
diff --git a/wallets/rn_cli_wallet/src/screens/SessionDetail/components/DappInfo.tsx b/wallets/rn_cli_wallet/src/screens/SessionDetail/components/DappInfo.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+
+interface Props {
+  session?: any;
+}
+
+export function DappInfo({session}: Props) {
+  const metadata = session?.peer?.metadata;
+
+  return (
+    <>
+      {metadata.redirect?.native && (
+        <>
+          <Text style={[styles.boldText]}>Deep link:</Text>
+          <Text>{metadata.redirect?.native}</Text>
+        </>
+      )}
+      {metadata.redirect?.universal && (
+        <>
+          <Text style={[styles.boldText, styles.subtitle]}>
+            Universal link:
+          </Text>
+          <Text>{metadata.redirect?.universal}</Text>
+        </>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    height: 25,
+    width: 25,
+    marginRight: 4,
+    borderRadius: 100,
+  },
+  dappContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  boldText: {
+    fontWeight: '500',
+  },
+  subtitle: {
+    marginTop: 8,
+  },
+});
diff --git a/wallets/rn_cli_wallet/src/screens/SessionDetail/index.tsx b/wallets/rn_cli_wallet/src/screens/SessionDetail/index.tsx
@@ -11,6 +11,7 @@ import {Methods} from '@/components/Modal/Methods';
 import {Events} from '@/components/Modal/Events';
 import SettingsStore from '@/store/SettingsStore';
 import {RootStackScreenProps} from '@/utils/TypesUtil';
+import {DappInfo} from './components/DappInfo';
 import styles from './styles';
 
 type Props = RootStackScreenProps<'SessionDetail'>;
@@ -139,6 +140,8 @@ export default function SessionDetail({route}: Props) {
             </View>
           );
         })}
+      <DappInfo session={session} />
+      <View style={[styles.divider, {backgroundColor: Theme['bg-300']}]} />
       <View style={styles.datesContainer}>
         <Text style={[styles.dateText, {color: Theme['fg-100']}]}>Expiry</Text>
         <Text style={{color: Theme['fg-175']}}>

Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@ android {`
`102`	`102`	`applicationId "com.walletconnect.web3modal.rnsample"`
`103`	`103`	`minSdkVersion rootProject.ext.minSdkVersion`
`104`	`104`	`targetSdkVersion rootProject.ext.targetSdkVersion`
`105`		`- versionCode 99`
	`105`	`+ versionCode 101`
`106`	`106`	`versionName "1.1"`
`107`	`107`	`resValue "string", "build_config_package", "com.w3mwagmi"`
`108`	`108`	`}`
Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ android {`
`89`	`89`	`applicationId "com.walletconnect.web3wallet.rnsample"`
`90`	`90`	`minSdkVersion rootProject.ext.minSdkVersion`
`91`	`91`	`targetSdkVersion rootProject.ext.targetSdkVersion`
`92`		`- versionCode 47`
	`92`	`+ versionCode 54`
`93`	`93`	`versionName "1.0"`
`94`	`94`	`resValue "string", "build_config_package", "com.walletconnect.web3wallet.rnsample"`
`95`	`95`	`}`