Merge pull request #506 from safe-global/development

Merge development to main

README.md

@@ -6,7 +6,7 @@
 
 Developer tools to integrate third-party applications (Safe Apps) with Safe (https://app.safe.global/).
 
-You can find more resources on Safe Apps in the [Safe Developer Portal](https://docs.safe.global/learn/safe-apps).
+You can find more resources on Safe Apps in the [Safe Developer Portal](https://docs.safe.global/safe-core-aa-sdk/safe-apps).
 
 ![safeapps_pathways_v4](https://user-images.githubusercontent.com/6764315/123075714-c5564100-d418-11eb-8da0-898aa163dee2.png)
 

examples/wagmi/.env.example

@@ -1 +1 @@
-REACT_APP_ALCHEMY_ID=
+REACT_APP_WALLETCONNECT_PROJECT_ID=

examples/wagmi/CHANGELOG.md

@@ -1,5 +1,18 @@
 # example-safe-apps-wagmi-cra
 
+## 0.2.0
+
+### Minor Changes
+
+- b24cde9: chore: bump dependencies
+
+### Patch Changes
+
+- Updated dependencies [077d2cc]
+- Updated dependencies [b24cde9]
+  - @safe-global/safe-apps-provider@0.18.0
+  - @safe-global/safe-apps-sdk@8.1.0
+
 ## 0.1.6
 
 ### Patch Changes

examples/wagmi/package.json

@@ -1,24 +1,22 @@
 {
   "name": "example-safe-apps-wagmi-cra",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@safe-global/safe-apps-provider": "^0.17.1",
-    "@safe-global/safe-apps-sdk": "^8.0.0",
-    "@gnosis.pm/safe-apps-wagmi": "2.1.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@wagmi/core": "^0.8.19",
     "buffer": "^6.0.3",
-    "ethers": "^5.7.2",
     "events": "^3.3.0",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "util": "^0.12.5",
-    "wagmi": "^0.10.15",
-    "web-vitals": "^3.1.0"
+    "viem": "^1.0.0",
+    "wagmi": "^1.3.9",
+    "web-vitals": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10"
   },
   "scripts": {
     "start": "react-scripts start",

examples/wagmi/src/components/Account.tsx

@@ -2,7 +2,7 @@ import { useAccount, useEnsName } from 'wagmi';
 
 export function Account() {
   const { address } = useAccount();
-  const { data: ensNameData } = useEnsName({ address: address });
+  const { data: ensNameData } = useEnsName({ address });
 
   return (
     <div>

examples/wagmi/src/components/Connect.tsx

@@ -7,10 +7,8 @@ export function Connect() {
   const { isConnecting, connector: activeConnector } = useAccount();
   const { disconnect } = useDisconnect();
   const { config } = usePrepareSendTransaction({
-    request: {
-      to: '0x000000000000000000000000000000000000beef',
-      value: '0',
-    },
+    to: '0x000000000000000000000000000000000000beef',
+    value: BigInt('0'),
   });
 
   const { sendTransactionAsync } = useSendTransaction(config);

examples/wagmi/src/index.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 
-import { WagmiConfig, configureChains, createClient } from 'wagmi';
+import { WagmiConfig, createConfig, configureChains, Connector } from 'wagmi';
 import { mainnet, goerli } from 'wagmi/chains';
-import { alchemyProvider } from 'wagmi/providers/alchemy';
-import { SafeConnector } from '@gnosis.pm/safe-apps-wagmi';
+import { publicProvider } from 'wagmi/providers/public';
+import { SafeConnector } from 'wagmi/connectors/safe';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
@@ -19,36 +19,46 @@ if (!window.Buffer) {
   window.Buffer = Buffer;
 }
 
+const WALLETCONNECT_PROJECT_ID = process.env.REACT_APP_WALLETCONNECT_PROJECT_ID
+
 const defaultChains = [mainnet, goerli];
-const alchemyId = process.env.REACT_APP_ALCHEMY_ID || 'UuUIg4H93f-Bz5qs91SuBrro7TW3UShO';
 
-const { chains, provider } = configureChains(defaultChains, [alchemyProvider({ apiKey: alchemyId })]);
+const { chains, publicClient } = configureChains(defaultChains, [publicProvider()]);
+
+let connectors: Connector[] = [
+  new SafeConnector({ chains }),
+  new MetaMaskConnector({ chains }),
+  new InjectedConnector({
+    chains,
+    options: {
+      name: 'Injected',
+      shimDisconnect: true,
+    },
+  }),
+];
 
-const client = createClient({
-  connectors: [
-    new SafeConnector({ chains }),
-    new MetaMaskConnector({ chains }),
+if (WALLETCONNECT_PROJECT_ID) {
+  // A WalletConnect ID is provided so we add the Connector for testing purposes
+  connectors = [
+    ...connectors,
     new WalletConnectConnector({
       chains,
       options: {
-        qrcode: true,
-      },
-    }),
-    new InjectedConnector({
-      chains,
-      options: {
-        name: 'Injected',
-        shimDisconnect: true,
+        projectId: WALLETCONNECT_PROJECT_ID,
       },
     }),
-  ],
-  provider,
+  ];
+}
+
+const config = createConfig({
+  connectors: connectors,
+  publicClient,
 });
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
-    <WagmiConfig client={client}>
+    <WagmiConfig config={config}>
       <App />
     </WagmiConfig>
   </React.StrictMode>,

guides/drain-safe-app/03-transfer-assets.md

@@ -111,7 +111,7 @@ function getTransferTransaction(item: TokenBalance, recipient: string): BaseTran
 export { getTransferTransaction };
 ```
 
-Now you're all set to use in the App component. You only need to change the `handlerTransfer` function:
+Now you're all set to use the App component. You only need to change the `handleTransfer` function:
 
 ```ts
 const handleTransfer = async (): Promise<void> => {