Get Started on Viction

Overview

Ramper SDK provides an easy wallet solution for developers to integrate into their Dapps. Once integrated, your users will be able to log in with a popular OAuth solution and instantly interact with a Viction wallet.

Ramper SDK also provides the "WalletView" component, which allows your application to access various wallet-related functionalities such as Fiat On-ramp, transaction history, and token transfers. All via a single line of code.

Getting Started

Install Ramper SDK

Ramper v2 currently supports Next Js and will be supporting Unity, React Native soon.

Installing Ramper SDK

$ npm i @ramper-v2/viction

$ yarn add @ramper-v2/viction

Initialising Ramper SDK

import { init, signIn } from '@ramper-v2/viction'
import { getWalletModel, User, WALLET_PROVIDER } from '@ramper-v2/core'
import { ethers } from '@ethers'

await init({
  appId: 'missing_app_id',
  appName: 'Viction Test App',
  walletProviders: [],
  defaultTokenAddresses: [],
  theme: 'dark',
  network: 'mainnet',
  authProviders: ['google', 'facebook', 'email'],
})

You need to initialize the SDK with your app id, app name, and other configurations to be able to use Ramper SDK. Make sure to run the init function after the page is loaded, and wait for the promise to resolve before using the SDK.

User sign-up & sign-in

const signInResult = await signInWithProvider({ provider });
const signInResult = await signIn();

There are two ways to sign in a user. The first way is to use the signInWithProvider function, which takes a provider as an argument. The provider can be one of the following: google, facebook, or email. The second way is to use the signIn function, which will show a modal with all the available providers.

Get the current signed in user

import { getUser } from '@ramper-v2/viction'
const user = await getUser()
if (user) {
  console.log(user)
}

Logging Out

Users can log out or disconnect their wallet with:

import { signOut } from '@ramper-v2/viction'
await signOut()

Yup, it really is just that easy!

Disclaimer: Our current SDK is in active development. The interface described above and the functionalities provided are subject to change.

In-App Wallet View

Overview

The Ramper SDK provides "ViewWallet" component. This is meant to further help Dapp developers to focus on their core-competancy, by providing a number of wallet-related functions one may have to implmenet off-the-shelf.

These functions include showing the user's wallet info (address, balances, transaction history, etc), an integrated fiat-on-ramp, token transfer, as well as access to numerous config items (that you'd initially pass in init())

How to include in your app

It's extremely simple to include WalletView in your Dapp, if you're already using Ramper Embedded Wallet SDK!

import { openWallet } from '@ramper-v2/viction'
...
    <Button onClick={openWallet}>My Wallet</Button>

Wallet Integration

Overview

Ramper supports many standardized methods, including: signMessage signTransaction sendTransaction sendToken connect

import {
  sendToken,
  sendTransaction,
  signMessage,
  signTransaction,
  getNonce,
  estimateGas
} from "@ramper-v2/viction";
...
// Sign Message
const handleSignMessage = async () => {
  const result = await signMessage(message.message);
};
// Sign Transaction
const handleSignTransaction = async () => {
  const nonce = await getNonce(wallet?.publicKey as string);
    const gasLimit = await estimateGas({
      to: receiver,
      value: convertBalanceToWei("0.0001", 18),
    });
    const transaction = {
      from: wallet?.publicKey as string,
      data: "0x",
      gasLimit: gasLimit.toString(),
      nonce,
      to: receiver,
      value: amount,
    };
  const result = await signTransaction(transaction);
};
// Send Transaction
const handleSendTransaction = async () => {
  const nonce = await getNonce(wallet?.publicKey as string);
    const gasLimit = await estimateGas({
      to: receiver,
      value: convertBalanceToWei("0.0001", 18),
    });
    const transaction = {
      from: wallet?.publicKey as string,
      data: "0x",
      gasLimit: gasLimit.toString(),
      nonce,
      to: receiver,
      value: amount,
    };
  const result = await sendTransaction(transaction);
};
// Send Token
const handleSendToken = async () => {
  const result = await sendToken({
    to: transactionData.receiver,
    value: transactionData.amount,
    symbol: "c98",
  });
};