ovio-gg-w3 v1.0.124

OviO

The OviO platform seamlessly delivers users in scale from traditional games into blockchain games. Our platform allows gamers to exchange game-currencies and transition from industry leading web2 games, into the most innovative and pioneering blockchain games with a click of a button.

SDK Short Description

The OviO SDK is a software development kit that enables web3 games to integrate with the OviO wallet, a seamless web3 wallet designed for OviO users. By utilizing the SDK, game developers can access the user's game-related balance, retrieve their game-related NFTs, and offer them transactions such as buying, selling, and trading game tokens and NFTs. The SDK is compatible with ERC20, ERC1155, and ERC721 tokens, making it versatile and adaptable to various game types and blockchain ecosystems. Overall, the OviO SDK provides a convenient and secure way for game developers to integrate with the OviO wallet and offer their users seamless blockchain experiences.

Support

For any questions or feature requests please contact integrations@ovio.gg.

Integration Initializion

Before implementing the integration in your own code make sure you provide OviO your ERC-20 game token contract address and your game wallet address. OviO will provide you in return with your own Game Identifier.

On this page:

Installation

npm install --save ovio-gg-web3 

Code Setup

OviO sends users to your own game using a deeplink to your website with relevant data. In order to init OviO integration you need to catch the deeplink by adding this code to your index.js:

import { getOvioDataFromUrl, init } from 'ovio-gg-web3';
import { useEffect } from 'react';


useEffect(() => {
 var params = getOvioDataFromUrl(window.location.href)
 init(params.gamerId, '<your game identifier provided by OviO>');
}, []);

Usage

OviO provides the following functions to fetch data:

• isOvioWalletUser – returns a if the user is an OviO user, if true you should use the SDK’s wallet and transfer methods.
• getBalance – returns the number of your game tokens in user’s account.

Fetch data actions: OviO provides your game with option to accept user payments with your own tokens. This can be implemented through OviOPayment component or OviOWallet component.

• OviOPayment - Allows seamless integration. This compenent opens a popup to accept the payment through OviO and the user will transfer the tokens to the wallet address you've provided. OviOPayment accepts the following parameters: open - a Boolean that indicates wether to open the popup or not. setOpen - a function that changes the previous boolean state. * tokenAmouns - a number indicating how many tokens should be transfered to your game wallet.

• OviOWallet - Use this component if you wish to have more control over the component. This component is a widget that accepts the payment through OviO similar to OviOPayment, and you will decide where it appreas. OviOWallet accepts the following parameters: tokenAmouns - a number indicating how many tokens should be transfered to your game wallet. onClose - a function which is called when closing the widget. onSuccess - a function which is called when a successful transaction is preformed. onFailure - a function which is called when an unseccessful transaction is preformed.

Widgets:

import { isOvioWalletUser, OvioPayment } from 'ovio-gg-web3';

type Props = {
    cost: number
}

const ExampleBuyItem = ({ cost }: Props) => {
const [ovioPaymentOpen, setOvioPaymentOpen] = useState(false);

const handleBuy = () => {
    if (isOvioWalletUser) {
    setOvioPaymentOpen(true);
    } else {
    //Open any other wallet provider
    }
}

return 
    (<>
          <OvioWallet 
               onSuccess={handleSuccess} 
               itemImage={<item image>}
               itemName={<item name>}
               onClose={() => {...}}
               tokensAmount={<tokens amount>}
               operation={<operation>} />
    </>);
}

If you wish to use the wallet as a popup instead of a widget use:

     <OvioPaymentPopUp
            open={ovioPaymentOpen}
            setOpen={setOvioPaymentPopUpOpen}
            onCompleted={handleCompleted}
            itemName={<item name>}
            itemImage={<item image>}
            onClose={() => {}}
            tokensAmount={<tokens amount>}
            operation={<operation>} >

Parameters:

    item name:
        the item name you're selling.
        optional parameter.
    item image:
        the image for the item you're selling.
        optional parameter.
    tokens amount:
        the cost of the item.
        mandatory parameter.
    operation:
        the operation you choose to perform for the transaction.
        can be one of the following:
            1. transfer
            2. approve
    

The widget with item name & item image:

The widget without item name & item image:

Connect with OviO

OviO provides an option for users to return to your game and reconnects with their OviO wallet, if you prefer to not save the OviO identifier for the user. Users will need to connect with OviO in order to get their credentials and user their wallet in your game.

You can choose to use ConnectWithOvio component or call connectWithOvio() function from Utils.tsx. Both the component and the function will open a popup for the users to reconnect to OviO and then the users will be redirected back to your game.

The component supports 3 styles - sqaure button, flat button and a popup. If you wish to use the sqaure button form use:

<ConnectWithOvio />

for the flat button use:

<ConnectWithOvio flat />

for the popup use:

<ConnectToOvio onClose={() => setShowConnect(false)} />

The popup will look like this:

Contact Us

If you have any questions or feedback about this project, please don't hesitate to reach out to us at integrations@ovio.gg. We'd love to hear from you and are always happy to help.