# @mojito-inc/connect-wallet

> Connecting wallet via metamask, wallet connect, email

Latest version **1.0.5-beta.32** (published 2024-12-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @mojito-inc/connect-wallet
pnpm add @mojito-inc/connect-wallet
yarn add @mojito-inc/connect-wallet
bun add @mojito-inc/connect-wallet
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5-beta.32 |
| Published | 2024-12-26 |
| First published | 2023-07-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 25 |
| Unpacked size | 283.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mojito |
| Maintainers | alexinx, vivek_ionixx, vivek_mojito, santhosh_prabhakaran, madhimk, sakthi-mojito |
| Keywords | connect-wallet, metamask, wallet-connect |

## Links

- npm: https://www.npmjs.com/package/@mojito-inc/connect-wallet
- Repository: https://github.com/mojitoinc/mojito-connect-wallet
- npm.io page: https://npm.io/package/@mojito-inc/connect-wallet

## Dependencies (25)

- [bs58](https://npm.io/package/bs58.md) ^6.0.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [ethers](https://npm.io/package/ethers.md) ^5.7.2
- [graphql](https://npm.io/package/graphql.md) ^16.6.0
- [date-fns](https://npm.io/package/date-fns.md) ^2.29.3
- [thirdweb](https://npm.io/package/thirdweb.md) 5.53.0
- [magic-sdk](https://npm.io/package/magic-sdk.md) ^28.9.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [bufferutil](https://npm.io/package/bufferutil.md) ^4.0.7
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.11.11
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.7.15
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.6
- [countries-list](https://npm.io/package/countries-list.md) ^3.1.1
- [utf-8-validate](https://npm.io/package/utf-8-validate.md) ^6.0.3
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.6
- [@solana/web3.js](https://npm.io/package/@solana/web3.js.md) ^1.95.3
- [@magic-ext/solana](https://npm.io/package/@magic-ext/solana.md) ^25.10.0
- [html-react-parser](https://npm.io/package/html-react-parser.md) ^3.0.9
- [@web3modal/ethers5](https://npm.io/package/@web3modal/ethers5.md) 5.0.11
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.11.11
- [@mojito-inc/core-service](https://npm.io/package/@mojito-inc/core-service.md) 1.0.8-beta.48
- [@solana/wallet-adapter-base](https://npm.io/package/@solana/wallet-adapter-base.md) ^0.9.23
- [mui-one-time-password-input](https://npm.io/package/mui-one-time-password-input.md) ^1.1.0
- [@solana/wallet-adapter-react](https://npm.io/package/@solana/wallet-adapter-react.md) ^0.15.35
- [@solana/wallet-adapter-wallets](https://npm.io/package/@solana/wallet-adapter-wallets.md) ^0.19.32

## Recent versions

- 1.0.5-beta.32 (latest) — 2024-12-26
- 1.0.5-beta.31 — 2024-12-19
- 1.0.5-beta.30 — 2024-12-19
- 1.0.5-beta.29 — 2024-12-18
- 1.0.5-beta.28 — 2024-12-17
- 1.0.5-beta.27 — 2024-12-10
- 1.0.5-beta.26 — 2024-12-09
- 1.0.5-beta.25 — 2024-12-09
- 1.0.5-beta.24 — 2024-12-02
- 1.0.5-beta.23 — 2024-11-27
- 1.0.5-beta.22 — 2024-11-26
- 1.0.5-beta.21 — 2024-11-25
- 1.0.5-beta.20 — 2024-11-25
- 1.0.5-beta.19 — 2024-11-22
- 1.0.5-beta.18 — 2024-11-20
- … 72 more at https://npm.io/package/@mojito-inc/connect-wallet/versions

## README

<br />

<h1 align="center">☁️ Mojito Modules -  Connect Wallet - Token Gating</h1>

<br /><br />

<p align="center">
👨‍💻 React components for the Mojito Platform, Reference App and third-party projects, including
Connect Wallet and Token Gating.
</p>

<br />

## Using this library in your project


You can install this project with one of these commands:

    npm install @mojito-inc/connect-wallet

</br>

    yarn add @mojito-inc/connect-wallet

<br />

### Install following dependency also

    yarn add @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql

<br />

### Config theme for your project

To config custom theme please follow below steps:

### Step 1:

#### Note: If you encounter any type errors in the themes config, create a file named mui.d.ts and add the following code:

```
  import '@mui/material/styles';

  declare module '@mui/material/styles' {
    export interface Palette {
      backgroundColor?: {
        primary?: string
        secondary?: string
      }
      toastError?: ColorPartial
      toastSuccess?: ColorPartial
      toastWarning?: ColorPartial
      iconColor?: string
    }
    // allow configuration using `createTheme`
    export interface PaletteOptions {
      backgroundColor?: {
        primary?: string
        secondary?: string
      }
      toastError?: ColorPartial
      toastSuccess?: ColorPartial
      toastWarning?: ColorPartial
      iconColor?: string
    }
  }

```

Create a new file and place the following code and replace the colors with your custom colors. export the theme and add into the provider.


```
  import { createTheme } from '@mui/material';

  export const theme = createTheme({
    typography: {
      fontFamily: 'Slate',
    },
    components: {
      MuiTextField: {
        styleOverrides: {
          root: {
            '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button':
            {
              display: 'none',
            },
            '& input[type=number]': {
              MozAppearance: 'textfield',
            },
          },
        },
      },
      MuiCssBaseline: {
        styleOverrides: `
                @font-face {
                  font-family: "Slate";
                  font-style: normal;
                  font-display: swap;
                  font-weight: 400;
                  text-transform: none;
                  font-size: 16px;
                }
              `,
      },
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: 'Slate',
            textTransform: 'none',
            borderRadius: '4px',
            fontWeight: 700,
            fontSize: '16px',
            backgroundColor: '#FDCC35',
            color: '#000',
            '&:hover': {
              backgroundColor: '#FDCC35',
              color: '#000',
              opacity: 0.5,
            },
          },
        },
      },
      MuiDialog: {
        styleOverrides: {
          paper: {
            border: '1px solid #D7D8DB',
            boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.08)',
            borderRadius: '4px',
          },
        },
      },
      MuiDivider: {
        variants: [
          {
            props: { orientation: 'horizontal' },
            style: {
              ':before': {
                borderTop: 'thin solid #D7D8DB',
              },
              ':after': {
                borderTop: 'thin solid #D7D8DB',
              },
            },
          },
        ],
      },
    },
    palette: {
      primary: {
        main: '#FDCC35',
      },
      secondary: {
        main: '#356045',
      },
      backgroundColor: {
        primary: '#ffffff',
        secondary: '#000000',
      },
      grey: {
        100: '#868b93',
        500: '#A1A5AB',
      },
      toastError: {
        500: '#CE2818',
      },
      iconColor: '#000',
    },
  });

```

<br />

### API URL:

<ol>
  <li><b>https://api-sandbox.mojito.xyz/query</b> - Sandbox environment</li>
  <li><b>https://api.mojito.xyz/query</b> - Production environment</li>
</ol>

<br />

```

  import { ConnectWalletProvider } from '@mojito-inc/connect-wallet';

  const WalletProvider = ({ children }: WalletProviderProps) => {

    const [token, setToken] = useState<string>();
    const client = useMemo(
      () => ({
        uri: API_HOSTNAME,
        token: token || undefined,
      }),
      [token],
    );

    return (
      <ConnectWalletProvider
        theme={ theme }
        clientId={ clientId }
        activeChain={ activeChain }
        walletConnectProjectId={ walletConnectProjectId }
        onAuthenticated={ setToken }
        clientOptions={ client }>
        { children }
      </ConnectWalletProvider>
    );
  };

  export default WalletProvider;
```

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|theme| Theme|✅| To Customize the theme
|clientId| string|✅| Pass the client id for email wallet
|activeChain| enum|✅| pass the network name to connect with email
|walletConnectProjectId| string|✅| Pass the wallet connect project id
|onAuthenticated| function|✅| in callback you will get an auth token
|clientOptions| object|✅| pass the bearer token and api url
|metaData| object| | To customize the wallet connect Modal metadata

</br>

After setup ConnectWallet Provider

Following step:
1. [Connect Wallet Container](#ConnectWalletContainer)


### ConnectWalletContainer


```
  import { ConnectWalletContainer } from '@mojito-inc/connect-wallet';

  const ConnectWalletPage = () => {

    return (
      <ConnectWalletContainer
        open={ openModal }
        organizationId: organizationId,
        walletOptions={{
          enableMetamask: true,
          enableEmail: true,
          enableWalletConnect: true,
        }}
        customErrorMessage={{
            externalWalletConnection: {
              wrongWalletMessage: 'Custom Message',
              highRiskMessage: 'Custom Message',
              defaultMessage: 'Custom Message',
            },
        }}
        image={{
          logo: YOUR_LOGO, // pass URL or path, if you are importing an image from local please add ".src" at end
          metamask: Images.METAMASK.src,
          error: Images.METAMASK.src,
          walletConnect: Images.METAMASK.src,
        }}
        isDisConnect={ disconnect }
        isRefetchBalance={ isRefetchBalance }
        onCloseModal={ onClickCloseModal } />
    );
  };

  export default ConnectWalletPage;

```

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|open| boolean|✅| if true it will open modal if false modal will close
|config| Object|✅| [config](#config)
|walletOptions| Object|✅| [walletOptions](#walletOptions)
|image| Object|✅|[image](#image) To customize the image
|isDisConnect| boolean|✅| if true it will disconnect the wallet
|isRefetchBalance| boolean| | if true it will refetch the wallet balance
|onCloseModal| function|✅| To close the Modal
|content| Object| | [content](#content) to customize the title, description in modal
|isPaperWallet| boolean| | if true it will work as paper wallet with email else it will work as thirdweb embedded wallet.
|isWeb2Login| boolean| | if true it will work as web2 login example auth0.
|skipSignature| boolean| | if true it will skip the signature process for connect wallet.
|userEmail| string| | Pass user email address to pre populate email in input fields.
|customErrorMessage| Object| | [customErrorMessage](#customErrorMessage) to customize the error message


### interface

#### config

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|organizationId| string|✅| Pass the organization id
|paperClientId| string| |
|paperNetworkName| enum| | [paper Network Name](#paperNetworkName)

#### walletOptions

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|enableMetamask| boolean|✅|
|enableEmail| boolean|✅|
|enableWalletConnect| boolean|✅|


#### image

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|logo| string|✅|
|metamask| string|✅|
|error| string|✅|
|walletConnect| string|✅|

#### Paper Network Name

|Enum    |
|:--- |
|Ethereum|
|Sepolia|
|Goerli|
|Polygon|
|Mumbai|

#### content

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|walletOptionsContentData| object| | [ContentData](#ContentData)
|otpContentData| object| | [ContentData](#ContentData)
|emailContentData| object| | [ContentData](#ContentData)
|loadingContentData| object| | [ContentData](#ContentData)
|recoverCodeContentData| object| | [ContentData](#ContentData)

#### ContentData

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|title| string||
|description| string||

#### customErrorMessage

|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|externalWalletConnection| Object|| [externalWalletConnection](#externalWalletConnection)


#### externalWalletConnection


|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|wrongWalletMessage| string|| customize error for wrongly connect wallet
|highRiskMessage| string|| customize error for highly risk wallet
|defaultMessage| string|| default error


</br>

### Hooks

To get the connected wallet details use these following hooks:

### Wallet Details Hooks

```
  import { useWallet } from '@mojitoinc/mojito-connect-wallet';

  const { address, balance } = useWallet();

```

### Network Hooks

```
  import { useNetwork } from '@mojitoinc/mojito-connect-wallet';

  const { chainID, id, isTestnet, name } = useNetwork();

```

### Provider Hooks

```
  import { useProvider } from '@mojitoinc/mojito-connect-wallet';

  const { provider, providerType } = useProvider();

```

### Get Status Hooks

```
  import { useWalletStatus } from '@mojitoinc/mojito-connect-wallet';

  const { disconnectStatus, refetchBalanceStatus, connectStatus } = useWalletStatus();

```

</br>

### Token Gating Container

```
  import { TokenGatingContainer } from '@mojito-inc/connect-wallet';

  const TokenGatingPage = () => {
    return (
      <TokenGatingContainer
          onCloseModal={ onCloseModal }
          open={ openModal }
          config={{
            orgId: Configuration.ORG_ID ?? '',
            paperClientId: Configuration.PAPER_CLIENT_ID ?? '',
            paperNetworkName: Configuration.PAPER_NETWORK_NAME ?? '',
            groupId: tokenGatingDetails?.groupId,
            ruleId: tokenGatingDetails?.ruleId,
            isClaimToken: false,
            collectionItemId: tokenGatingDetails?.collectionItemId,
            invoiceId,
          }}
          screenConfig={{
            title: ,
            subTitle: 'Holders of the Myers Manx collection can now get 50%. Connect your wallet to proceed.',
          }}
          gatingErrorDetails={ gatingErrorDetails }
          walletConnectScreenDetails={ walletConnectScreenDetails }
          errorScreenDetails={ errorScreenDetails }
          claimTokenScreenDetails={ claimTokenScreenDetails }
          setInvoice={ setInvoice } />
    )
  }
```

| Param               | type     | Required | Description                          |
| ----------------------- | -------- | -------- | :----------------------------------- |
|open| Boolean |✅| |
|config| Object|✅|[Configuration](#Configuration)
|walletConnectScreenDetails| Object|✅|[walletConnectScreenDetails](#walletConnectScreenDetails)
|errorScreenDetails| Object|✅|[errorScreenDetails](#errorScreenDetails)
|screenConfig|Object|✅|[screenConfig](#screenConfig)
|claimTokenScreenDetails|Object|✅|[claimTokenScreenDetails](#claimTokenScreenDetails)
|gatingLoaderDetails|Object|||
|gatingErrorDetails|Object|||
|invoiceID| string|||
|onCloseModal|function|✅||
|onChangeWalletAddress| function|||
|setInvoice| function|||
|getInvoiceDetails|function|||

### interface

#### Configuration

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
| orgId         | string | ✅        | organization id                       |
| chainId      | Number | ✅        |            |
| paperClientId | string |        | paper client id to connect with email |
| paperNetworkName | any |         |                         |
|groupId| string|| for Checking Token Gating based on GroupId|
|ruleId| string|| for Checking Token Gating based on ruleId|
|isClaimToken| boolean|| if true, call mojito claim api|
|collectionItemId| string|| |
|invoiceId|string|||

#### walletConnectScreenDetails

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
|title| string|||
|subTitle| string|||
|walletOptions| walletOptions|✅|[walletOptions](#walletOptions)|
|image| WalletImages|✅|[WalletImages](#WalletImages)|

#### errorScreenDetails

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
|title| string|||
|primaryButtonTitle|string|||
|secondaryButtonTitle| string|||
|tertiaryButtonTitle| string|||
|onClickTertiaryButton|function|||
|onClickSecondaryButton| function|||
|onClickPrimaryButton| function|||

#### screenConfig

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
|title| string|||
|subTitle| string|||

#### claimTokenScreenDetails

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
|tokenDetail|Object||[tokenDetail](#tokenDetail)|
|redirectionPageURL| string| ||
|onSuccess| function|||

##### tokenDetail 

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
|tokenImage| string|||
|tokenName| string|||
|tokenSubtitle| string|||
|tokenButtonText| string|||

#### WalletImages

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
| error         | string |       | error icon in svg, png, jpeg or gif format          |
| metamask      | string |       | metamask icon in svg, png, jpeg or gif format       |
| logo          | string |       | logo icon in svg, png, jpeg or gif format           |

#### walletOptions

| Param     | type   | Required | Description                           |
| ------------- | ------ | -------- | :------------------------------------ |
| enableMetamask      | boolean | ✅        | to enable or disable metamask       |
| enableEmail         | boolean | ✅        | to enable or disable email connect  |

---
_Source: https://npm.io/package/@mojito-inc/connect-wallet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._