Quickstart

Install Marble

To install Marble, all you need to do is:

# npm
npm install --save marble-sdk
# yarn
yarn add marble-sdk
# pnpm
pnpm i marble-sdk

WAGMI user? Check out our connector: https://github.com/marblexyz/wagmi-connector.

Open Authentication Modal

Once Marble has been added to your front-end code, you’ll need to log users. We will generate a wallet for the user given their credentials. You can use the auth.loginWithEmailPassword function. This will open up a modal on the user’s end, with a series of actions for:

1. Logging In / Signing Up
2. If Signing up, saving a recovery key
3. Waiting for the wallet generation

Note that the recovery here is not a seed phrase, but is an alternative password only usable on a password reset link. The password reset link is only receivable through the user's email - even if the recovery key is leaked, unless the user's email is also leaked, the user's assets are safe.

Example

import { Marble } from "marble-sdk";

const marble = new Marble();

// this will return false for a new user!
const isLoggedIn = await marbleClient.auth.isLoggedIn();

/**
 * loginWithEmailPassword
 * Opens a modal that lets the user type their email and password to
 * sign up, login, or send a link for forget password. Refer to the demo
 * for how the base design looks like.
 * Once the user successfully finishes login, fails in the process,
 * or quits in the process, the function will return.
 * @param {Object} configuration: Optiona object to pass in additional information.
 * @param {string} configuration.email: If email is passed in, the input box for email will be pre-filled.
 * @returns {loginState: "SUCCESS" | "FAILURE" | "ABANDONED"}
 */
const response = await marbleClient.auth.loginWithEmailPassword();

// this will return true if the user logged in successfully!
const isLoggedIn = await marbleClient.auth.isLoggedIn();

• Once logged in, the user’s logged in session persists for half a day.

Connecting the provider

Marble SDK is compatible with existing Ethereum front-end APIs. As a result, marble-sdk bundles an Ethereum JSON-RPC provider that is compatible with most of the Ethereum JSON-RPC methods. This means that Marble SDK can be used wherever you are able to use existing wallets!

// Example with ethers

import { Marble } from "marble-sdk";
import { ethers } from "ethers";

const marble = new Marble();
const provider = new ethers.providers.Web3Provider(marble.rpcProvider);
const signer = provider.getSigner();

info

✉️ Are you using any libraries or frameworks we don’t have out-of-the box support for yet? Email us at team@marblewallet.com and tell us more! We’re happy to look into it for you and see how we can help.

Signing a Message or Transaction

You can use the regular signer.signMessage or signer.signTransaction , or the Wagmi useAccount and usePrepareContractWrite to have the user sign messages or sign transactions.

Similar to the login, when the user needs to sign a transaction, a modal will appear for the user on the application. The user can reject or confirm.

For any of signMessage, signTransaction, send, if the user clicks “Reject”, any of the sign functions will throw an error MarbleRPCError with the following information:

{
    message: "User rejected signature request."
    code: RPCErrorCode.UserRejectedRequest
}

Example

// Sign a message or a transaction (after the user is logged in)
const signer = provider.getSigner();
const address = await signer?.getAddress();

// Example: Signing Message
const result = await signer?.signMessage("Hello world!");

// Example: Signing Transaction
const data = {
  to: "0xbf9Db3564c22fd22FF30A8dB7f689D654Bf5F1fD", // Mumbai Faucet
  from: address,
  value: 100, // amt in wei
};
const result = await signer?.signTransaction(data);

// Example: Ethereum RPC Call - eth_signTransaction
const signTransactionRequest = {
  jsonrpc: "2.0",
  id: 1,
  method: "eth_signTransaction",
  params: [
    {
      ...data,
      value: hexlify(data.value),
    },
  ],
};
// You can also use the integrated provider to send RPC calls.

try {
  const result = await ethersProvider?.send(
    signTransactionRequest.method,
    signTransactionRequest.params
  );
} catch (e) {
  console.error(e.message); // on user rejection, should show "User rejected signature request."
  console.error(e.code); // code would be RPCErrorCode.UserRejectedRequest which is importable through the SDK library.
}

info

Note: Currently, we don’t support the eth_sendTransaction method, since our API is connected to providers. To use it, you will need to use your own provider and use the eth_sendRawTransaction method instead.