chore: bump appkit sdk + improvements

reown-com · Oct 16, 2024 · a3eee7b · a3eee7b
1 parent 7deba12
commit a3eee7b
Show file tree

Hide file tree

Showing 19 changed files with 199 additions and 174 deletions.
diff --git a/dapps/W3MEthers/package.json b/dapps/W3MEthers/package.json
@@ -16,9 +16,9 @@
     "@react-native-clipboard/clipboard": "1.13.2",
     "@react-native-community/netinfo": "11.2.1",
     "@walletconnect/react-native-compat": "2.16.1",
-    "@reown/appkit-coinbase-ethers-react-native": "1.0.0",
-    "@reown/appkit-auth-ethers-react-native": "1.0.0",
-    "@reown/appkit-ethers-react-native": "1.0.0",
+    "@reown/appkit-coinbase-ethers-react-native": "0.0.0-feat-smart-account-20241016183051",
+    "@reown/appkit-auth-ethers-react-native": "0.0.0-feat-smart-account-20241016183051",
+    "@reown/appkit-ethers-react-native": "0.0.0-feat-smart-account-20241016183051",
     "ethers": "6.10.0",
     "expo": "^50.0.0",
     "react": "18.2.0",

diff --git a/dapps/W3MEthers/src/components/RequestModal.tsx b/dapps/W3MEthers/src/components/RequestModal.tsx
@@ -26,7 +26,7 @@ export function RequestModal({
   return (
     <Modal isVisible={isVisible} onBackdropPress={onClose}>
       <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-        <Text>X</Text>
+        <Text style={styles.close}>X</Text>
       </TouchableOpacity>
       <View style={styles.innerContainer}>
         {isLoading && (
@@ -43,7 +43,9 @@ export function RequestModal({
             <Text style={[styles.title, styles.successText]}>
               Request Response
             </Text>
-            <Text style={styles.responseText}>{rpcResponse}</Text>
+            <Text style={styles.responseText} numberOfLines={5}>
+              {rpcResponse}
+            </Text>
           </>
         )}
         {rpcError && (
@@ -52,7 +54,10 @@ export function RequestModal({
               Request Failure
             </Text>
             <Text style={styles.subtitle}>
-              Error: <Text style={styles.responseText}>{rpcError}</Text>
+              Error:{' '}
+              <Text style={styles.responseText} numberOfLines={5}>
+                {rpcError}
+              </Text>
             </Text>
           </>
         )}
@@ -72,6 +77,9 @@ const styles = StyleSheet.create({
     borderRadius: 100,
     margin: 8,
   },
+  close: {
+    color: 'black',
+  },
   innerContainer: {
     padding: 16,
     backgroundColor: 'white',
@@ -105,5 +113,6 @@ const styles = StyleSheet.create({
   },
   responseText: {
     fontWeight: '300',
+    color: 'black',
   },
 });
diff --git a/dapps/W3MEthers/src/utils/misc.ts b/dapps/W3MEthers/src/utils/misc.ts
@@ -0,0 +1 @@
+export const vitalikEthAddress = '0xd8da6bf26964af9d7eed9e03e53415d37aa96045';
diff --git a/dapps/W3MEthers/src/views/ReadContract.tsx b/dapps/W3MEthers/src/views/ReadContract.tsx
@@ -7,7 +7,7 @@ import {
   useAppKitAccount,
   useAppKitProvider,
 } from '@reown/appkit-ethers-react-native';
-import {BrowserProvider, Contract} from 'ethers';
+import {BrowserProvider, Contract, JsonRpcSigner} from 'ethers';
 import wagmigotchiABI from '../utils/wagmigotchiABI';
 
 export function ReadContract() {
@@ -16,7 +16,7 @@ export function ReadContract() {
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
   const {walletProvider} = useAppKitProvider();
-  const {isConnected} = useAppKitAccount();
+  const {isConnected, address} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {
@@ -30,13 +30,14 @@ export function ReadContract() {
 
     try {
       const ethersProvider = new BrowserProvider(walletProvider);
-      const signer = await ethersProvider.getSigner();
+      const signer = new JsonRpcSigner(ethersProvider, address!);
       const contractAddress = '0xecb504d39723b0be0e3a9aa33d646642d1051ee1';
       const contractABI = wagmigotchiABI;
       const contract = new Contract(contractAddress, contractABI, signer);
       const balance = await contract.getHunger();
       setData(balance.toString());
-    } catch {
+    } catch (e) {
+      console.log(e);
       setError(true);
     }
     setIsLoading(false);

diff --git a/dapps/W3MEthers/src/views/SendTransaction.tsx b/dapps/W3MEthers/src/views/SendTransaction.tsx
@@ -1,22 +1,22 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {Button} from '@reown/appkit-ui-react-native';
-
-import {RequestModal} from '../components/RequestModal';
-
+import {BrowserProvider, JsonRpcSigner, parseEther} from 'ethers';
 import {
   useAppKitAccount,
   useAppKitProvider,
 } from '@reown/appkit-ethers-react-native';
-import {BrowserProvider, parseEther} from 'ethers';
+
+import {RequestModal} from '../components/RequestModal';
+import {vitalikEthAddress} from '../utils/misc';
 
 export function SendTransaction() {
   const [requestModalVisible, setRequetsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
   const {walletProvider} = useAppKitProvider();
-  const {isConnected} = useAppKitAccount();
+  const {isConnected, address} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {
@@ -29,16 +29,16 @@ export function SendTransaction() {
 
     try {
       const ethersProvider = new BrowserProvider(walletProvider);
-      const signer = await ethersProvider.getSigner();
-      const address = await signer.getAddress();
+      const signer = new JsonRpcSigner(ethersProvider, address!);
       const tx = {
-        to: address,
+        to: vitalikEthAddress,
         value: parseEther('0.0001'),
         data: '0x',
       };
       const txResponse = await signer.sendTransaction(tx);
       setData(txResponse.hash);
-    } catch {
+    } catch (e) {
+      console.log(e);
       setError(true);
     } finally {
       setIsLoading(false);

diff --git a/dapps/W3MEthers/src/views/SignMessage.tsx b/dapps/W3MEthers/src/views/SignMessage.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
-import {BrowserProvider} from 'ethers';
+import {BrowserProvider, JsonRpcSigner} from 'ethers';
 import {
   useAppKitAccount,
   useAppKitProvider,
@@ -15,7 +15,7 @@ export function SignMessage() {
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
   const {walletProvider} = useAppKitProvider();
-  const {isConnected} = useAppKitAccount();
+  const {isConnected, address} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {
@@ -28,10 +28,8 @@ export function SignMessage() {
 
     try {
       const ethersProvider = new BrowserProvider(walletProvider);
-
-      const signer = await ethersProvider.getSigner();
-      const message = 'hello appkit + ethers';
-      const signature = await signer.signMessage(message);
+      const signer = new JsonRpcSigner(ethersProvider, address!);
+      const signature = await signer.signMessage('hello appkit + ethers');
       setData(signature.toString());
     } catch (e) {
       console.log(e);

diff --git a/dapps/W3MEthers/src/views/SignTypedDataV4.tsx b/dapps/W3MEthers/src/views/SignTypedDataV4.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
-import {BrowserProvider} from 'ethers';
+import {BrowserProvider, JsonRpcSigner} from 'ethers';
 import {
   useAppKitAccount,
   useAppKitProvider,
@@ -16,7 +16,7 @@ export function SignTypedDataV4() {
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
   const {walletProvider} = useAppKitProvider();
-  const {isConnected} = useAppKitAccount();
+  const {isConnected, address} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {
@@ -29,7 +29,7 @@ export function SignTypedDataV4() {
 
     try {
       const ethersProvider = new BrowserProvider(walletProvider);
-      const signer = await ethersProvider.getSigner();
+      const signer = new JsonRpcSigner(ethersProvider, address!);
       const message = JSON.stringify(eip712.example);
 
       const signature = await walletProvider.request({

diff --git a/dapps/W3MEthers/src/views/WriteContract.tsx b/dapps/W3MEthers/src/views/WriteContract.tsx
@@ -8,15 +8,15 @@ import {
   useAppKitAccount,
   useAppKitProvider,
 } from '@reown/appkit-ethers-react-native';
-import {BrowserProvider, Contract} from 'ethers';
+import {BrowserProvider, Contract, JsonRpcSigner} from 'ethers';
 
 export function WriteContract() {
   const [requestModalVisible, setRequetsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
   const {walletProvider} = useAppKitProvider();
-  const {isConnected} = useAppKitAccount();
+  const {isConnected, address} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {
@@ -29,14 +29,14 @@ export function WriteContract() {
 
     try {
       const ethersProvider = new BrowserProvider(walletProvider);
-      const signer = await ethersProvider.getSigner();
-      const address = signer.address;
+      const signer = new JsonRpcSigner(ethersProvider, address!);
       const contractAddress = '0xdAC17F958D2ee523a2206206994597C13D831ec7';
       const contractABI = usdtAbi;
       const contract = new Contract(contractAddress, contractABI, signer);
       const response = await contract.approve(address, 100000);
       setData(response.toString());
-    } catch {
+    } catch (e) {
+      console.log(e);
       setError(true);
     } finally {
       setIsLoading(false);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const vitalikEthAddress = '0xd8da6bf26964af9d7eed9e03e53415d37aa96045';