added custom signers guides

gnosischain · Sep 19, 2024 · 98c04a7 · 98c04a7
1 parent be2b4fc
commit 98c04a7
Show file tree

Hide file tree

Showing 5 changed files with 282 additions and 0 deletions.
diff --git a/docs/technicalguides/custom-signers/README.md b/docs/technicalguides/custom-signers/README.md
@@ -0,0 +1,35 @@
+---
+sidebar_position: 4
+sidebar_label: Custom Signers
+---
+
+# Custom Signers
+
+Custom signers allow developers to inject their own signing mechanisms tailored to specific use cases. This flexibility enhances security, usability, and adaptability in different environments, such as multi-signature wallets or smart contract interactions.
+
+## Why Use Custom Signers?
+
+### Tailored Signing Methods
+With custom signers, you can personalize the signing process to fit your dApp’s specific needs. This could mean automatic signing for trusted operations, requiring additional confirmation for sensitive actions, or integrating unique hardware devices for enhanced security.Users can now interact with dapps by just using their emails or passkeys.
+
+### Enhanced Security
+Custom signers give developers more control over how and where signing keys are stored. This can include signing transactions in hardware security modules (HSMs), using a multi-sig contract, or requiring multi-factor authentication before a transaction is signed.
+
+### Optimized for Specific Use Cases
+Whether you’re dealing with privacy-focused transactions, or social recovery mechanisms, custom signers can be configured to handle the specific logic needed. They allow for flexibility in crafting unique user flows that require specialized transaction signing methods.
+
+
+
+
+<CardContainer>
+    <Card
+        title="Privy"
+        subtitle="Guide to intgerate Privy Wallet and SDK"
+        url="/technicalguides/custom-signers/privy" 
+    />
+    <Card
+        title="Dynamic"
+        subtitle="Guide to intgerate Dynamic Wallet and SDK"
+        url="/technicalguides/custom-signers/dynamic" 
+    />
+</CardContainer>
diff --git a/docs/technicalguides/custom-signers/dynamic.md b/docs/technicalguides/custom-signers/dynamic.md
@@ -0,0 +1,142 @@
+---
+description: Dynamic offers smart and beautiful login flows for crypto-native users, simple onboarding flows for everyone else, and powerful developer tools that go beyond authentication.
+keywords: [dynamic ,custom-signers]
+---
+
+# Dynamic
+
+Dynamic offers smart and beautiful login flows for crypto-native users, simple onboarding flows for everyone else, and powerful developer tools that go beyond authentication. This is a basic guide which demonstrates the integration of Dynamic wallet with Gnosis chain and generate offchain user signatures.
+
+![Dynamic Image](../../../static/img/signers/dynamic.png)
+
+
+## Guide
+
+- Create a NextJs application from scratch
+
+```
+npx create-next-app dynamic-gnosis
+# install with Tailwind
+```
+- Install Dynamic labs SDK & some other dependencies
+
+```
+npm install @dynamic-labs/ethereum @dynamic-labs/ethers-v6 @dynamic-labs/sdk-react-core
+```
+
+- Create an account at [Dynamic Web App](https://app.dynamic.xyz/) and choose the Ethereum Sandbox option.
+In the dashboard, enable the networks you want to allow your users. For our example we will enable Gnosis network. Also make sure you have Email as an authentication enabled for your users. This helps create a wallet by just using user's email.
+
+- In the [developers section](https://app.dynamic.xyz/dashboard/developer/api), copy the Environment ID, we will need this in the next step.
+
+- Initialize the SDK in your **layout.tsx** file like this. The goal is to initialize the SDK as early as possible when loading you application. Put your Environment ID in the proper variable.
+Make sure you have **EthersExtension** also added in the extensions variable, this will be useful later!
+```
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <DynamicContextProvider
+        settings={{
+          environmentId: "<Replace with you own Environment ID>",
+          walletConnectors: [EthereumWalletConnectors],
+          walletConnectorExtensions: [EthersExtension],
+        }}
+      >
+        <body className={inter.className}>{children}</body>
+      </DynamicContextProvider>
+    </html>
+  );
+}
+
+```
+
+
+- Create a components folder and inside that create a component **DynamicWidgetButton.tsx** and here we need to declare our DynamicWidget component provided to us by Dynamic SDK.
+
+```
+export const DynamicWidgetButton: React.FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px' }}>
+      <Title level={3} style={{ marginBottom: '20px' }}>Wallet Interaction</Title>
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <DynamicWidget />
+      </div>
+    </div>
+  );
+};
+
+```
+
+- Now we can use and initialize the Dynamic wallet anywhere in our app by just using the above component!
+
+- Let's create our Main component in **page.tsx** file.
+
+In this file, we will [**useDynamicContext**](https://docs.dynamic.xyz/sdks/react-sdk/hooks/usedynamiccontext#header) provided by the dynamic sdk to fetch the wallet connected. We will also use this same wallet to execute all our ethers expression.
+
+```
+  const { primaryWallet } = useDynamicContext();
+```
+
+- In our application, we have built a basic **Signer** component which uses the connected Dynamic wallet to generate a signature from the user.
+
+
+```
+  const signMessage = async () => {
+    if (!primaryWallet) {
+      console.error("No primary wallet connected");
+      return;
+    }
+
+    try {
+      const signedMessage = await primaryWallet.connector.signMessage('You are signing an example message');
+      if (signedMessage) {
+        setSignature(signedMessage);
+      } else {
+        setSignature(null);
+      }
+    } catch (error) {
+      console.error("Error signing message:", error);
+      setSignature(null);
+    }
+  };
+```
+
+You can also see that the **signMessage** function is provided by the  Dynamic SDK.  So cool!
+
+## Using ethers
+
+The last piece of component, I want to discuss is the **getBalance** component. Although Dybamic also gives a component to fetch user balance, this function is created to demonstrate how you can use standard ethers expression to build out your app further.
+
+```
+  const getBalance = async () => {
+    if (!primaryWallet) {
+      console.error("No primary wallet connected");
+      return null;
+    }
+
+    const provider = await primaryWallet.connector?.ethers?.getRpcProvider();
+    
+    if (!provider) {
+      console.error("No provider available");
+      return null;
+    }
+    try {
+      const balance = await provider.getBalance(primaryWallet.address);
+      console.log(balance);
+      return balance;
+    } catch (error) {
+      console.error("Error getting balance:", error);
+      return null;
+    }
+  };
+
+```
+
+## Demo Application
+
+You can check out this [**repository**](https://github.com/gnosischain/developer-resources/tree/main/custom-signers/dynamic-gnosis) for the full stack application demo.
+
diff --git a/docs/technicalguides/custom-signers/privy.md b/docs/technicalguides/custom-signers/privy.md
@@ -0,0 +1,105 @@
+---
+description: Privy is a simple library to add beautiful authentication flows and powerful embedded wallets to your app.
+keywords: [privy,custom-signers]
+---
+
+# Privy
+
+This guide will walk you through the steps to integrate the Privy Wallet and SDK into your Web3 DApp, with a specific configuration for the Gnosis chain(mainnet & Chiado testnet).
+
+![Privy Image](../../../static/img/signers/privy.png)
+
+## Guide
+
+The [Privy React SDK](https://www.npmjs.com/package/@privy-io/react-auth) is the easiest way to integrate Privy in your
+application.
+
+In order to integrate the Privy React SDK, your project must be on:
+
+- a minimum React version of 18
+- a minimum TypeScript version of 5
+
+### 1. Install the Privy React SDK
+
+```shell
+npm install @privy-io/react-auth@latest
+```
+
+### 2. Setup Log-in methods & Privy App ID
+
+Navigate to your [Privy dashboard](https://dashboard.privy.io/apps) and from the **Login methods** methods tab, enable all the login methods you want the end-user to have.
+
+Also, note the **App ID** from the settings, we will need to configure while initializing Privy.
+
+### 3. Setup Privy Provider and Gnosis Config
+
+We can now initialize **PrivyProvider**. Replace the App ID field with your own Privy App ID and import the chains you want to support in your dapp. In our case, we have imported **gnosisChiado**. and **gnosis** from viem. We can also also cutomize with theme, logo and , colours and other [configs](https://docs.privy.io/guide/react/configuration/appearance#app-name).
+
+```shell
+'use client';
+
+import {PrivyProvider} from '@privy-io/react-auth';
+import {gnosisChiado, gnosis} from 'viem/chains';
+
+export default function Providers({children}: {children: React.ReactNode}) {
+  return (
+    <PrivyProvider
+      appId="<Enter App ID>"
+      config={{
+        appearance: {
+          theme: 'dark',
+          accentColor: '#676FFF',
+          logo: 'https://cdn.prod.website-files.com/662931fe35e0c191d1733ab9/662931fe35e0c191d1733b0f_owl-forest.png',
+        },
+        defaultChain: gnosisChiado,
+        supportedChains: [gnosisChiado,gnosis], 
+
+        embeddedWallets: {
+          createOnLogin: 'users-without-wallets',
+        },
+      }}
+    >
+      {children}
+    </PrivyProvider>
+  );
+}
+```
+
+
+You can now import the above component and wrap around your application in the **layout.tsx** file(In case of a NextJS app).
+
+Here is an example:
+
+```shell
+import type { Metadata } from "next";
+import PrivyProvider from "./components/privy"; 
+
+export const metadata: Metadata = {
+  title: "Gnosis App Demo",
+  description: "Gnosis App Demo",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark"> 
+      <body>
+          <PrivyProvider> 
+            {children} 
+          </PrivyProvider>
+      </body>
+    </html>
+  );
+}
+
+```
+
+## Demo Application
+
+Here is a full-stack dapp which showcases Privy integration along with proper configurations to fetch wallet data and make on-chain transactions. The application integrates the Pirvy React SDK and uses it to mint ERC-1155 tokens on the Gnosis Chiado testnet.
+
+[**Link to Demo Application**](https://github.com/gnosischain/developer-resources/tree/main/custom-signers/privy-gnosis)
+
diff --git a/static/img/signers/dynamic.png b/static/img/signers/dynamic.png
diff --git a/static/img/signers/privy.png b/static/img/signers/privy.png