From 92dad724c61c5da2c6e6f7a438448aa930c088cf Mon Sep 17 00:00:00 2001 From: Vanshika Srivastava Date: Tue, 6 Aug 2024 19:34:35 +0530 Subject: [PATCH] Core Devs Call and Removing unnecessary Signers (#705) * Add files via upload * Update 07-24-core-devs-call.md * fix broken RPC url * fix all the broken anchors and hyperlinks * shutterized -> to change to shutter enabled * fix core dev call layout * Core Devs Call Notes July 31, 2024 * remove custom signer from interact page * fix: 07-31-core-devs-call format --------- Signed-off-by: zhoufanjin Co-authored-by: Armagan Ercan Co-authored-by: Armagan Ercan Co-authored-by: zengzengzenghuy <85567868+zengzengzenghuy@users.noreply.github.com> --- .../developers/Interact on Gnosis/dynamic.mdx | 80 ---- .../{metamask.mdx => metamask.md} | 0 .../Interact on Gnosis/rainbowkit-wagmi.mdx | 397 ------------------ updates/2024/07-31-core-devs-call.md | 73 ++++ 4 files changed, 73 insertions(+), 477 deletions(-) delete mode 100644 docs/developers/Interact on Gnosis/dynamic.mdx rename docs/developers/Interact on Gnosis/{metamask.mdx => metamask.md} (100%) delete mode 100644 docs/developers/Interact on Gnosis/rainbowkit-wagmi.mdx create mode 100644 updates/2024/07-31-core-devs-call.md diff --git a/docs/developers/Interact on Gnosis/dynamic.mdx b/docs/developers/Interact on Gnosis/dynamic.mdx deleted file mode 100644 index a15c0c71..00000000 --- a/docs/developers/Interact on Gnosis/dynamic.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -description: Dynamic is a powerful web3 auth developer platform with built-in support for Gnosis Chain. It lets you integrate multiple wallets such as Coinbase Wallet, Metamask, and more into your app or website, handles network switching, multi-wallet linking and more. This guide will show you how to use Gnosis Chain with Dynamic. -keywords: [dynamic, wagmi, tools, front end, development, dapps] ---- - -# Using Dynamic - -[Dynamic](https://www.dynamic.xyz/) is a powerful web3 auth developer platform with built-in support for Gnosis Chain. It lets you integrate multiple wallets such as Coinbase Wallet, Metamask, and more into your app or website, handles network switching, multi-wallet linking and more. - -Dynamic comes with Gnosis Chain built-in. You can play around with a live demo of Dynamic [here](https://demo.dynamic.xyz/) and see a full video walkthrough [here](https://www.dynamic.xyz/product-walkthrough). In this tutorial, we'll go through how to set up Dynamic with Gnosis Chain. - -You can see a CodeSandbox of the example below [here](https://codesandbox.io/s/dynamic-gnosis-chain-demo-vzps4b) (configured to Gnosis Chain). - -## Prerequisites - -Dynamic works with React today. You can go through the standard getting started guide [here](https://docs.dynamic.xyz/docs/getting-started-with-dynamic). - -## Step 1: Create a Dynamic account - -1. [Sign up](https://app.dynamic.xyz) to get an environment ID - -2. Create an organization and a set up your first project - -3. Copy your `environmentID` from the Dynamic overview page - -4. (optional) Configure your site's CORS origins - -## Step 2: Install the Dynamic npm package - -You can install Dynamic's SDK with either `yarn` or `npm`. We currently support React and NextJS. - -```shell -npm install @dynamic-labs/sdk-react -# or yarn add @dynamic-labs/sdk-react -``` - - - -## Step 3: Configure the SDK - -Copy the following snippet into your project and paste in your environmentId: - -```javascript -import { DynamicContextProvider, DynamicWidget} from '@dynamic-labs/sdk-react'; - -const App = () => ( - - - -); - -export default App; -``` - - - -## Step 4: Turn on Gnosis Chain in your developer dashboard - -Now that we have the basic Dynamic setup, you can go to your developer dashboard, and select `configurations` from the left menu. Next, click on the `EVM` card and toggle `Gnosis` on. Note that you can also chose to toggle the default network, `Ethereum`, off. - -Gnosis_new - - - -## See it in action - -Now that you put things together, you can see a CodeSandbox of the finished product [here](https://codesandbox.io/s/dynamic-gnosis-chain-demo-vzps4b). - -## Next steps - -Now that you set up Dynamic with **Gnosis Chain**, there are many additional things you can explore: - -- **Log in with your wallet, and see data in Dynamic's developer dashboard** - Now that your widget is set up locally, try to log in with a wallet. As soon as you do, head over to the Dynamic developer dashboard and click on user management and analytics. You'll be able to see your user show up! -- **Customize your SDK design** - There are many ways to customize the Dynamic modal to fit your needs (you can explore them in the SDK configuration section), but to start, we suggest setting a light/dark mode and a primary color for the modal, which you can do in the design section of your developer dashboard. -- **Explore how to use the Dynamic SDK** - After your users connect their wallets, you'll want to interact with them for various reasons. You can read more about the SDK in [Dynamic's docs](https://docs.dynamic.xyz). - -For support, you can also join [Dynamic's Slack Community](https://www.dynamic.xyz/slack). diff --git a/docs/developers/Interact on Gnosis/metamask.mdx b/docs/developers/Interact on Gnosis/metamask.md similarity index 100% rename from docs/developers/Interact on Gnosis/metamask.mdx rename to docs/developers/Interact on Gnosis/metamask.md diff --git a/docs/developers/Interact on Gnosis/rainbowkit-wagmi.mdx b/docs/developers/Interact on Gnosis/rainbowkit-wagmi.mdx deleted file mode 100644 index 4b4c7df7..00000000 --- a/docs/developers/Interact on Gnosis/rainbowkit-wagmi.mdx +++ /dev/null @@ -1,397 +0,0 @@ ---- -description: Rainbow Kit + Wagmi is a popular combination of tools to connect the front end to the blockchain. The following instructions are how to add Gnosis chain to the list of chains to be available to choose from based on Next.js installation. -keywords: [rainbow kit, wagmi, tools, front end, development, dapps] ---- - -# Using Rainbow Kit + Wagmi - -Rainbow Kit + Wagmi is a popular combination of tools to connect the front end to the blockchain. The following instructions are how to add Gnosis chain to the list of chains to be available to choose from based on Next.js installation. - -## Summary of actions - -1. Install Rainbow Kit + Wagmi -2. Configure your _app.js file to add a custom RPC and custom chain (using Next.js) -3. Show Final Code Layout - -## Install Rainbow Kit + Wagmi - -Based on the following documentation from [Rainbow Kit](https://rainbowkit.com/docs/installation) -```js showLineNumbers -yarn add @rainbow-me/rainbowkit wagmi ethers -``` - -## Preparing our _app.js - -On a fresh install of Next.js and Wagmi, your code should look pretty bare: - -```js showLineNumbers -import '../styles/globals.css' - -function MyApp({ Component, pageProps }) { - return -} - -export default MyApp - -``` - - - -You want to import the rainbow kit and wagmi library files: - -```js showLineNumbers -import '../styles/globals.css' -import '@rainbow-me/rainbowkit/styles.css'; -import { - getDefaultWallets, - RainbowKitProvider, -} from '@rainbow-me/rainbowkit'; -import { - chain, - configureChains, - createClient, - WagmiConfig, -} from 'wagmi'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; - - - -function MyApp({ Component, pageProps }) { - return -} - -export default MyApp - -``` - -## Understanding the Imports - -We are importing the styles for rainbow kit, already built in for us to use - -```js showLineNumbers -import '@rainbow-me/rainbowkit/styles.css'; -``` - -This imports the Default wallets (MetaMask, WalletConnect, Coinbase and Rainbow Wallet) and Brings in the Provider Wrapper for our _app.js object - -```js showLineNumbers -import { - getDefaultWallets, - RainbowKitProvider, -} from '@rainbow-me/rainbowkit'; -``` - -This part is for the Wagmi configuration - -**chain** - brings in default chains included in Wagmi (ethereum, test nets, polygon, etc) - -**configureChains** - lets us modify the providers for our chains (we could use infura, alchemy, Ankr, Pokt, or any of our choosing) - -**createClient** - Lets us manage our Wallets (MetaMask, etc) and Providers(alchemy, ankr, etc) - -**WagmiConfig** - This is the wrapper for our entire _app.js object (since rainbow kit is dependent on Wagmi, it wraps over rainbow kit wrapper) - - -```js showLineNumbers -import { - chain, - configureChains, - createClient, - WagmiConfig, -} from 'wagmi'; -``` - -The providers can be confusing the wagmi docs and the rainbow docs. In short, a feature of Wagmi is to have failover RPCs. Let's say we start with an alchemy RPC and that fails, then we can use an Ankr RPC and that fails and finally we can use the Public RPCs so that people can keep using our dapp even if our account API fails. Really useful for Wallet Connect and Coinbase Wallet. We are just importing providers here **(NOTE! Gnosis chain currently does NOT require an API key to deploy)**: - -```js showLineNumbers -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; -``` - -Now Let's configure out imports, if you have been following the docs your code should look like this so far: - - -```js showLineNumbers -import '../styles/globals.css' -import '@rainbow-me/rainbowkit/styles.css'; -import { - getDefaultWallets, - RainbowKitProvider, -} from '@rainbow-me/rainbowkit'; -import { - chain, - configureChains, - createClient, - WagmiConfig, -} from 'wagmi'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; - -// Newly imported code here - -const { chains, provider } = configureChains( - [chain.mainnet, chain.optimism, chain.arbitrum], - [ - alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), //Alchemy API - publicProvider() - ] -); - -const { connectors } = getDefaultWallets({ - appName: 'My RainbowKit App', - chains -}); - -const wagmiClient = createClient({ - autoConnect: true, - connectors, - provider -}) - -// new imported code stops here - -function MyApp({ Component, pageProps }) { - return -} - -export default MyApp -``` - -Breaking down what is happening here in the configuration - -Setting up configureChains hook. Here we are using the tool to let our variables "chains" and "provider" know what chains we are using and what providers we are using. - -**chains** is taking in mainnet, optimism and arbitrum. (Wagmi has a built in list of chains, if you want to add more you can type chain. and see the list of available prebuilt chains to choose from. We will add Gnosis in a bit) - -**provider** is taking in both Alchemy provider (with our API key - **Reminder GNOSIS does NOT require an API Key**) and public provider. We can also add more providers as well. So it will first go with Alchemy first and if it fails, then the public provider. - - - -```js showLineNumbers -const { chains, provider } = configureChains( - [chain.mainnet, chain.optimism, chain.arbitrum,], - [ - alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), - publicProvider() - ] -); -``` - -Setting our Default wallets. This sets up our variable "connectors" to accepts the chains that we just previously set in the "configureChains" and giving the app our name (we can change that to whatever we want, our Dapp Name) - -```js showLineNumbers -const { connectors } = getDefaultWallets({ - appName: 'My RainbowKit App', - chains -}); -``` - -The createClient just puts it all together in a single Object call wagmiClient. We take "connectors" we just previously setup (this took in our chains we want to support) and our "Providers" (the RPCs we have setup) and bundle it up for wagmi to refer to. AutoConnect refers to connecting to the wallet on the refresh of the webpage. - -```js showLineNumbers -const wagmiClient = createClient({ - autoConnect: true, - connectors, - provider -}) -``` - -Now that we have all the basic configurations setup, we can now wrap our _app.js object so wagmi and rainbowkit will function throughout our entire website. We are going to turn this part: - -```js showLineNumbers -function MyApp({ Component, pageProps }) { - return -} -``` -into this: - -```js showLineNumbers -function MyApp({ Component, pageProps }) { - return ( - - - - - - ); -} -``` - -We just wrapped out website "object" with the RainbowKit wrapper and let it know we want to support these "chains" (the chains we chose in "configureChains"). Then we wrapped this entire wrapping with the WagmiConfig wrapper and set it to the wagmiClient (that set the type of wallets we will support and the RPC providers). That's a lot of wrapping but at the end, your _app.js file should look like this: - -```js showLineNumbers -import "../styles/globals.css"; -import "@rainbow-me/rainbowkit/styles.css"; -import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"; -import { chain, configureChains, createClient, WagmiConfig } from "wagmi"; -import { alchemyProvider } from "wagmi/providers/alchemy"; -import { publicProvider } from "wagmi/providers/public"; - -const { chains, provider } = configureChains( - [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum], - [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), publicProvider()] -); - -const { connectors } = getDefaultWallets({ - appName: "My RainbowKit App", - chains, -}); - -const wagmiClient = createClient({ - autoConnect: true, - connectors, - provider, -}); - -function MyApp({ Component, pageProps }) { - return ( - - - - - - ); -} - -export default MyApp; -``` - -## Adding Gnosis Chain to List of Chains - -On the top of our _app.js file, we import jsonRpcProvider - -```js showLineNumbers -import { alchemyProvider } from "wagmi/providers/alchemy"; -import { publicProvider } from "wagmi/providers/public"; -import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; //<<< new RPC - -``` - -Now that we imported it, we can add it to our "configureChains" hook and set it up. You will see the "jsonRpcProvider" is on the top of alchemy and public. **It is manually setup to use the Gnosis Chain RPC (using ANKR for this example, but can use [other RPCs providers](/tools/rpc/) )**, but want to show that you can use ANY RPC of your liking for this. You are not limited to the preset RPCs that wagmi supports. So now the order of failure would be , ankr, alchemy and then public RPCs (Note that Alchemy **does NOT currently** support Gnosis Chain, just using it as an example to help you understand the concept): - - -```js showLineNumbers -const { chains, provider } = configureChains( - [chain.mainnet, chain.optimism, chain.arbitrum], - [ - jsonRpcProvider({ rpc: () => ({ http: "https://rpc.ankr.com/gnosis" }) }), //<<<< New RPC Provider - alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), - publicProvider(), - - ] -); -``` -For simplicity, we will add the chain directly under the imports. (Networks can be setup in a separate file and imported in for a cleaner setup). - - -```js showLineNumbers -/* adding gnosis network */ -const GnosisChain = { - id: 100, - name: 'Gnosis Chain', - network: 'Gnosis', - nativeCurrency: { - decimals: 18, - name: 'xDai', - symbol: 'xDai', - }, - rpcUrls: { - default: 'https://rpc.ankr.com/gnosis', - }, - blockExplorers: { - default: { name: 'Gnosis Scan', url: 'https://gnosisscan.io/' }, - }, - iconUrls: ["https://images.prismic.io/koinly-marketing/16d1deb7-e71f-48a5-9ee7-83eb0f7038e4_Gnosis+Chain+Logo.png"], - testnet: false, -} -``` - -Now we have a variable **GnosisChain** that I can add in in the list of networks I want to support. - -```js showLineNumbers -const { chains, provider } = configureChains( - [chain.mainnet, chain.optimism, chain.arbitrum, GnosisChain], // <<<<<< Gnosis Chain Addedd - [ - jsonRpcProvider({ rpc: () => ({ http: "https://rpc.ankr.com/gnosis" }) }), //<<<< New RPC Provider - alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), - publicProvider(), - ] -); -``` - -Now Gnosis Chain is supported. Unfortunately, it currently doesn't support icons for some networks such as Gnosis as of yet. - -# Final Code - -```js showLineNumbers -import "../styles/globals.css"; -import "@rainbow-me/rainbowkit/styles.css"; -import { - getDefaultWallets, - RainbowKitProvider, - darkTheme, - lightTheme, - midnightTheme, -} from "@rainbow-me/rainbowkit"; -import { chain, configureChains, createClient, WagmiConfig } from "wagmi"; -import { publicProvider } from "wagmi/providers/public"; -import { jsonRpcProvider } from "wagmi/providers/jsonRpc"; - - -/* adding gnosis network */ -const GnosisChain = { - id: 100, - name: 'Gnosis Chain', - network: 'Gnosis', - nativeCurrency: { - decimals: 18, - name: 'xDai', - symbol: 'xDai', - }, - rpcUrls: { - default: 'https://rpc.ankr.com/gnosis', - }, - blockExplorers: { - default: { name: 'Blockscout', url: 'https://gnosisscan.io/' }, - }, - iconUrls: ["https://images.prismic.io/koinly-marketing/16d1deb7-e71f-48a5-9ee7-83eb0f7038e4_Gnosis+Chain+Logo.png"], - testnet: false, -} - - -const { chains, provider } = configureChains( - [GnosisChain], // <<<<<< Gnosis Chain is now the only option any other network will say "wrong network" - [ - jsonRpcProvider({ rpc: () => ({ http: "https://rpc.ankr.com/gnosis" }) }), //<<<< New RPC Provider - publicProvider(), - // No need to alchemy - ] -); - -const { connectors } = getDefaultWallets({ - appName: "My RainbowKit App", - chains, -}); - -const wagmiClient = createClient({ - autoConnect: true, - connectors, - provider, -}); - -function MyApp({ Component, pageProps }) { - return ( - - - - - - ); -} - -export default MyApp; - -``` - -With this final setup, you will now be able to support Gnosis chain with Rainbow Kit + Wagmi diff --git a/updates/2024/07-31-core-devs-call.md b/updates/2024/07-31-core-devs-call.md new file mode 100644 index 00000000..984b762e --- /dev/null +++ b/updates/2024/07-31-core-devs-call.md @@ -0,0 +1,73 @@ +--- +title: Core Devs Call - 2024/07/31 +authors: [dapplion, armaganercan, filoozom] +tags: [CoreDevsCall, Gnosis Chain] +--- + +# Gnosis Core Devs Call Notes + +Welcome to the Gnosis Core Devs weekly gathering. Every Wednesday, key members from the Gnosis team, contributors, and various team representatives convene to discuss, collaborate, and update one another on the Gnosis ecosystem's progression. + +Participants represent teams: + +Erigon, Gateway, Nethermind, Geth, Gnosis DevOps, Gnosis Core Devs, Gnosis Comms team. + +With a diverse set of voices present, our discussions are rich, multifaceted, and aim to foster innovation within the community. + +Watch the record [here](https://youtu.be/0v1wraXESIs) + +July 31, 2024 + +# Client Team Updates +## EL + +* **Nethermind**: + * Working on new release: v1.28.0 - Next week + * Will enable snap sync by default for Gnosis Chain + * Should make it possible to sync Nethermind in ~30 minutes + * Includes the fix for Chiado, like v1.27.1 + * Not much progress on EIP-4444 yet + +* **Erigon**: + * Busy working on Pectra + * Announced an alpha of Erigon v3 + * Still takes around two days to sync on a 32 GB of RAM machine + * Because the most recent snapshot is one year old + * Should be updated next week + +* **Geth**: + * Still debugging what’s happening with Chiado + +* **Reth**: + * No updates + +# Chain Infra + +* **Gateway** + * The mainnet and Chiado configs were not identical + * Filter queries were disabled on Chiado when they were properly configured in mainnet + * Now the config is identical + +# Innovation + +* Shutter + * Working on general stability improvements + * Was related to latency + * A new keyper release helped a lot on the p2p side + * Some slots are still missed + * Yesterday night, all keypers stopped sending keys, which was fixed this morning + * By restarting one of the bootnodes, which seemingly unstuck the keypers + * On the dashboard side + * No work on the frontend yet + * Lot of progress on the backend (network observer, collecting data + + +# Testing + +* Hive + * Worked on tools to make debugging of hive tests easier + +# Research + +* No updates +