2.5.5 • Published 7 months ago

sdk-v2-egglegamewallet v2.5.5

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

sdk-v2-egglegamewallet

This docs is for React.js and Next.js, if you are using Javacript, please refer to sdk-v2-egglegamewallet for JavaScript

Introduction:

The sdk-v2-egglegamewallet SDK is built on React.js, provides a straightforward way to connect wallets using passkeys, allowing interaction with smart accounts. It is pre-configured with AppKit (web3modal), making it easy to integrate into your projects.

Prerequisites:

Before installing the SDK, ensure you have set up AppKit (web3modal).

⚠ If you have already set it up, skip this step.

šŸ“š AppKit Documentation

If you prefer a video tutorial, please click below šŸ‘‡

IMAGE ALT TEXT HERE

# NOTE:
// when you are in the modal creation step of web3modal,
// ensure enableEIP6963 = true and enableInjected = true

// Example
const modal = createAppKit({
  ...yourConfig,
  enableEIP6963: true,
  enableInjected: true,
});

Installation

Install the SDK using npm:

npm install --save sdk-v2-egglegamewallet

or using yarn:

yarn add sdk-v2-egglegamewallet

Usage

// MUST HAVE - Use this in the first file to run (index.js)

import React from "react";
import { PasskeyProvider } from "sdk-v2-egglegamewallet";

const App = ({ children }) => {
  return <PasskeyProvider>{children}</PasskeyProvider>;
};

export default App;

#Issue

If you have completed the above steps but your wallet is not listed in the AppKit (web3modal) modal

=> Please update AppKit( web3modal) to the latest version.

#Supported chains

Ethereum:         '0x1'
OP Mainnet:       '0xa'
BNB Smart Chain:  '0x38'
Polygon:          '0x89'
Arbitrum One:     '0xa4b1'

#API

NameDescription
PasskeyProviderComponent Passkey Provider
infoWalletWallet information
isWeb3InjectedCheck if Web3 Injected Provider is supported

#API Details

PasskeyProvider

PasskeyProvider is a wrapper that supports using wallets.

PropertyDescriptionRequiredAttribute
configConfig Passkey ProviderOptionalrpcUrl
import { PasskeyProvider } from "sdk-v2-egglegamewallet";

  //Example
  <PasskeyProvider
        config={{
          rpcUrl: {
            137: "http://rpc...",
          },
        }}
      >
        {/*CODE HERE */}
  </PasskeyProvider>

infoWallet

Information about the wallet.

PropertyAttribute
infoWalletndns
name
icon
id
import { infoWallet } from "sdk-v2-egglegamewallet";

  //example
  <div>
    <img src={infoWallet.icon} width={20} height={20} />
    <div>{infoWallet.name}</div>
    <div>{infoWallet.id}</div>
    <div>{infoWallet.ndns}</div>
  </div>

isWeb3Injected

Function to check if the browser supports Web3 provider injection.

Functionresult
isWeb3Injected()boolean
import { isWeb3Injected } from "sdk-v2-egglegamewallet";

  //Example
  <div>
    {!isWeb3Injected() && <ButtonConnectWallet />}
  </div>

 // The way to create a ButtonConnectWallet will be in Advanced

#Advanced

Custom Button to Connect Wallet

#Required: To customize the button to connect the wallet, you can set up one of the below providers.

#1 - Documentation Provider AppKit ( web3modal) - recommended

Or

#2 - Documentation Provider wagmi

#Target:

- Connect wallet to browsers that do not support injected providers.
- If you are using Provider AppKit: Resolve the issue of using an older version without updating to the latest version.
- If you are using Provider wagmi: You only need a simple setup with wagmi.
=> Then follow these steps to create a custom connect button.
// Step 1: Create a button to connect
import React from "react";
import { infoWallet } from "sdk-v2-egglegamewallet";
import { useConnect, useConnectors, useSwitchChain } from "wagmi";

const ButtonConnectWallet = () => {
  const { connect } = useConnect();

  const { switchChainAsync } = useSwitchChain();
  const connectors = useConnectors();

  const handleConnect = async () => {
    const chainId = 137;

    await switchChainAsync({ chainId: chainId });// Switch to the chain you want to connect

    connectors.forEach((connector) => {
      if (connector.id === infoWallet.rdns) {
        connect({
          connector,
          chainId: chainId,
        });
      }
    });
  };

  return (
    <button
      onClick={async () => {
        await handleConnect();
      }}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "10px",
        borderRadius: "5px",
        cursor: "pointer",
        gap: "10px",
      }}
    >
      <img src={infoWallet.icon} width={20} height={20} />
      <div>{infoWallet.name}</div>
    </button>
  );
};

export default ButtonConnectWallet;

// Step 2: Use the connect button

import React from "react";
import { isWeb3Injected } from "sdk-v2-egglegamewallet";
import ButtonConnectWallet from "./ButtonConnectWallet";// step 1

const YourComponent = () => {

  return (
    <>
         <ButtonConnectWallet />
    </>
  );
};

export default YourComponent;
2.5.5

7 months ago

2.5.2

7 months ago

2.5.1

7 months ago

2.5.0

7 months ago

2.4.26

7 months ago

2.4.25

7 months ago

2.4.22

8 months ago

2.4.21

8 months ago

2.4.20

8 months ago

2.4.19

8 months ago

2.4.18

8 months ago

2.4.17

9 months ago

2.4.16

9 months ago

2.4.15

9 months ago

2.4.14

9 months ago

2.4.13

9 months ago

2.4.12

9 months ago

2.4.11

9 months ago

2.4.10

9 months ago

2.4.9

9 months ago

2.4.8

9 months ago

2.4.7

9 months ago

2.4.5

9 months ago

2.4.4

9 months ago

2.4.3

9 months ago

2.4.2

9 months ago

2.3.0

9 months ago

2.2.15

9 months ago

2.2.14

9 months ago

2.2.13

9 months ago

2.2.12

9 months ago

2.2.11

9 months ago

2.2.10

9 months ago

2.2.9

9 months ago

2.2.8

9 months ago

2.2.7

9 months ago

2.2.6

9 months ago

2.2.5

9 months ago

2.2.4

10 months ago

2.2.3

10 months ago

2.2.2

10 months ago

2.1.2

10 months ago

2.1.1

10 months ago

2.1.0

10 months ago

2.0.6

10 months ago

2.0.5

10 months ago

2.0.4

10 months ago

2.0.3

10 months ago

2.0.2

10 months ago

2.0.1

10 months ago