# Get Started on Viction

## Overview <a href="#getting-started" id="getting-started"></a>

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 <a href="#install-ramper-sdk" id="install-ramper-sdk"></a>

#### Installing Ramper SDK <a href="#id-sdk-viction-installrampervictionsdk" id="id-sdk-viction-installrampervictionsdk"></a>

```
$ npm i @ramper-v2/viction
```

```
$ yarn add @ramper-v2/viction
```

#### Initialising Ramper SDK <a href="#id-sdk-viction-usersignup-and-login" id="id-sdk-viction-usersignup-and-login"></a>

```jsx
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 <a href="#user-sign-up-and-sign-in" id="user-sign-up-and-sign-in"></a>

```jsx
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 <a href="#get-the-current-signed-in-user" id="get-the-current-signed-in-user"></a>

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

#### Logging Out <a href="#logging-out" id="logging-out"></a>

Users can log out or disconnect their wallet with:

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

Yup, it really is just that easy!

{% hint style="info" %}
Disclaimer: Our current SDK is in active development. The interface described above and the functionalities provided are subject to change.
{% endhint %}

### In-App Wallet View

#### Overview <a href="#overview.1" id="overview.1"></a>

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 <a href="#how-to-include-in-your-app" id="how-to-include-in-your-app"></a>

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

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

```

### Wallet Integration <a href="#wallet-integration" id="wallet-integration"></a>

#### Overview <a href="#overview.2" id="overview.2"></a>

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

```jsx
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",
  });
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ramper.xyz/embedded-wallet-sdk/quickstart/for-web-apps/get-started-on-viction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.