# @morphis-wallet/morphis-wallet-adapter

> Morphis wallet adapter based on Sui wallet adapter

Latest version **0.0.4** (published 2023-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @morphis-wallet/morphis-wallet-adapter
pnpm add @morphis-wallet/morphis-wallet-adapter
yarn add @morphis-wallet/morphis-wallet-adapter
bun add @morphis-wallet/morphis-wallet-adapter
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-03-06 |
| First published | 2022-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 1 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Morphis Labs |
| Maintainers | alexandermzchiu |
| Keywords | sui, morphis, wallet, adapter |

## Links

- npm: https://www.npmjs.com/package/@morphis-wallet/morphis-wallet-adapter
- Repository: https://github.com/MorphisWallet/morphis-wallet-adapter
- Issues: https://github.com/MorphisWallet/morphis-wallet-adapter/issues
- npm.io page: https://npm.io/package/@morphis-wallet/morphis-wallet-adapter

## Dependencies (1)

- [@mysten/sui.js](https://npm.io/package/@mysten/sui.js.md) ^0.20.0

## Recent versions

- 0.0.4 (latest) — 2023-03-06
- 0.0.3 — 2023-03-06
- 0.0.2 — 2022-12-07
- 0.0.1 — 2022-12-07

## README

# Morphis Wallet Adapter

### Before we start

There're ways to integrate your dApp with the wallet adapters. Here're some demo to make it easy for you to do this.

### 1. Use Sui Wallet Kit (Highly recommended)

Sui Wallet Kit is a library that makes it easy to connect your dApp to Sui wallets. It wraps the underlying Sui Wallet Adapters and comes pre-configured with sane defaults.

#### Getting started

To get started in a React application, you can install the following packages:

```bash
npm install @mysten/wallet-kit
```

At the root of your application, you can then set up the wallet kit provider:

```tsx
import { WalletKitProvider } from "@mysten/wallet-kit";

export function App() {
  return <WalletKitProvider>{/* Your application... */}</WalletKitProvider>;
}
```

> The `WalletKitProvider` also supports an `adapters` prop, which lets you override the default Sui Wallet Adapters.

You can then add a **Connect Wallet** button to your page:

```tsx
import { ConnectButton } from "@mysten/wallet-kit";

function ConnectToWallet() {
  return (
    <div>
      Connect wallet to get started:
      <ConnectButton />
    </div>
  );
}
```

To get access to the currently connected wallet, use the `useWallet()` hook to interact with the wallet, such as proposing transactions:

```tsx
import { useWallet } from "@mysten/wallet-kit";

export function SendTransaction() {
  const { connected, getAccounts, signAndExecuteTransaction } = useWallet();

  const handleClick = async () => {
    await signAndExecuteTransaction({
      kind: "moveCall",
      data: {
        packageObjectId: "0x2",
        module: "devnet_nft",
        function: "mint",
        typeArguments: [],
        arguments: [
          "name",
          "capy",
          "https://cdn.britannica.com/94/194294-138-B2CF7780/overview-capybara.jpg?w=800&h=450&c=crop",
        ],
        gasBudget: 10000,
      },
    });
  };

  return (
    <Button onClick={handleClick} disabled={!connected}>
      Send Transaction
    </Button>
  );
}
```

#### Usage without React

We do not currently have non-React UI libraries for connecting to wallets. The wallet adapters and logic in the React library (`@mysten/wallet-adapter-react`) can be used as reference for implementing a wallet connection UI in other UI libraries.

#### Supported wallets

Wallet Kit comes pre-configured with every supported wallet. You can also install individual wallet adapters that you plan on using in your project.

### Wallet Standard

The `WalletStandardAdapterProvider` adapter (published under `@mysten/wallet-adapter-wallet-standard`) automatically supports wallets that adhere to the cross-chain [Wallet Standard](https://github.com/wallet-standard/wallet-standard/). This adapter detects the available wallets in users' browsers. You do not need to configure additional adapters.

The following wallets are known to work with the Wallet Standard:

- **[Sui Wallet](https://docs.sui.io/devnet/explore/wallet-browser)**
- **[Morphis Wallet](https://morphiswallet.com/)**
- **[Ethos Wallet](https://chrome.google.com/webstore/detail/ethos-wallet/mcbigmjiafegjnnogedioegffbooigli)**
- **[Suiet Wallet](https://suiet.app/)**

### 2. Use Legacy Sui Wallet Provider and Morphis Wallet Adapter

Since @mysten/wallet-adapter-react@^3.0.0, the wallet adapter automatically detects wallets that adhere to the standard interface by Wallet Standard. However, if you still use legacy packages like @mysten/wallet-adapter-react@^2.0.0 or ealier versions, you have to install Morphis Wallet Adapter and put it into the provider.

#### Getting started

To get started in a React application, you can install the following packages:

```bash
npm install @morphis-wallet/morphis-wallet-adapter
```

At the root of your application, you can then set up the wallet kit provider:

```tsx
import { Wallet, WalletProvider } from "@mysten/wallet-adapter-react-2.0.0";
import { MorphisWalletAdapter } from "@morphis-wallet/morphis-wallet-adapter";

export default function App() {
  return (
    <WalletProvider
      supportedWallets={[{ adapter: new MorphisWalletAdapter() } as Wallet]}
    >
      <WithLegacyWalletAdapter />
    </WalletProvider>
  );
}
```

Then in your components, use the hook `useWallet` to get the wallet information and methods.

```
import { useWallet } from "@mysten/wallet-adapter-react-2.0.0";

export default function Page() {
  const { supportedWallets, connect } = useWallet();

  return (
    <div>
      {supportedWallets.map((wallet) => (
        <div
          key={wallet.adapter.name}
          onClick={() => connect(wallet.adapter.name)}
        >
          {wallet.adapter.name}
        </div>
      ))}
    </div>
  )
}
```

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