Web3 Qubic SDK

Demo

https://qubic-js-sdk-example.netlify.app/

安裝

React

npm install @qubic-js/react

Javascript

npm install @qubic-js/browser

開始使用

enum Network {
  MAINNET,
  GOERLI,
  POLYGON,
  MUMBAI,
  BSC,
  BSC_TEST_NET
}

Provider and Connector Options

const options {
  // optional
  infuraProjectId: INFURA_PROJECT_ID,

  // optional, you can contact us to apply for higher rate limit
  // apiKey: API_KEY,

  // optional, you can contact us to apply for higher rate limit
  // apiSecret: API_SECRET,

  // optional, default is mainnet 1
  chainId: CHAIN_ID,

  // optional, default is `https://wallet.qubic.app/`
  walletUrl: 'https://wallet.qubic.app/',

  // optional, default: false, when value is true, the show iframe instead of new window, credit card payment will failed with this option value true
  enableIframe: true

  // === QubicConnector Only options ===
  // optional, default: false, when value is true, the popup will hide automatically
  autoHideWelcome: true

  // optional, default: false, when value is true, signUp actions from sdk will
  // create a account that will force password setting
  disableFastSignup: true

   // optional, default: false, when value is true will not show in app browser warning
  disableIabWarning: true

  // optional, default: false, when value is true will not auto open external browser in line iab
  disableOpenExternalBrowserWhenLineIab
}

Web3 React

wrappedConnectors.tsx

import { initializeConnector, Web3ReactHooks } from '@web3-react/core';
import { Connector, Web3ReactStore } from '@web3-react/types';
import QubicWalletConnector from '@qubic-js/react';

// example if you need metamask
// import { MetaMask } from '@web3-react/metamask';
// const metamask = initializeConnector<MetaMask>(actions => new MetaMask({ actions }));

// please check Connector and Provider Options section
// You should only new only once in your application
const qubic = initializeConnector<QubicWalletConnector | Empty>(actions => {
  if (typeof window === 'undefined') return new Empty(actions); // dummy for next.js
  return new QubicWalletConnector({
    actions,
    options: {
      chainId: 1,
      infuraProjectId: INFURA_PROJECT_ID,
    },
  });
});

const wrappedConnectors: Record<'qubic', [Connector, Web3ReactHooks, Web3ReactStore]> = {
  // metamask, // if you need metamask
  qubic,
};

export default wrappedConnectors;

App.tsx

import Main from './Main.tsx';
import wrappedConnectors from './wrappedConnectors';
import { Web3ReactProvider } from '@web3-react/core';

export default function App() {
  return (
    <Web3ReactProvider connectors={Object.values(wrappedConnectors)}>
      <Main />
    </Web3ReactProvider>
  );
}

Main.tsx

import { SignInProvider } from '@qubic-js/core';
import { useWeb3React } from '@web3-react/core';
import wrappedConnectors from './wrappedConnectors';
import QubicWalletConnector from '@qubic-js/react/dist/connector/QubicConnector';

import options from './options';

export default function Main() {
  const { hooks } = useWeb3React();
  const { usePriorityAccount, usePriorityProvider } = hooks;
  
  const account = usePriorityAccount();
  useEffect(() => {
    console.log('priority account:' + account);
  }, [account])  
  
  const ethersProvider = usePriorityProvider();
  useEffect(() => {
    console.log('priority ethersProvider:');
    console.log(ethersProvider)
  }, [ethersProvider])  

  const handleSignIn = useCallback(async () => {
    const qubicConnector = (wrappedConnectors.qubic[0] as QubicWalletConnector)
    qubicConnector.activate(qubicConnector, (e: Error): void => {
      console.error(e);
    });
  }, [activate]);

  const handleGoogleSignIn = useCallback(async () => {
    const qubicConnector = (wrappedConnectors.qubic[0] as QubicWalletConnector)
    // will sign in Qubic wallet with Google
    qubicConnector.setSignInProvider(SignInProvider.GOOGLE);
    qubicConnector.activate(qubicConnector, (e: Error): void => {
      console.error(e);
    });
  }, [activate]);

  return (
    <Web3ReactProvider connectors={library}>
      <button onClick={handleSignIn}>Qubic Wallet</button>
      <button onClick={handleSignIn}>Qubic Wallet - Google </button>
    </Web3ReactProvider>
  );
}

Javascript

import { ethers } from 'ethers';
import QubicProvider from '@qubic-js/browser';
import options from './options';

// please check Connector and Provider Options section
// You should only new only once in your application
const qubicProvider = new QubicProvider(options);

const provider = new ethers.providers.Web3Provider(qubicProvider);

RPC APIs

eth_requestAccounts

使用者發出請求，要求提供一個帳戶以進行登錄。返回一個 Promise，成功回應會包含一個 Ethereum 地址字串的陣列。如果使用者拒絕該請求，Promise將以 4001 錯誤拒絕。

provider.request({ method: 'eth_requestAccounts' });

Run Example

git clone [e-mail]:getamis/qubic-js.git
cd qubic-js && yarn
cd example && yarn
yarn example