# Web3 Qubic SDK

## Demo

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

## 安裝

### **React**

```
npm install @qubic-js/react
```

### **Javascript**

```
npm install @qubic-js/browser
```

## 開始使用

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

### **Provider and Connector Options**

```typescript
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

```typescript
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

```typescript
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

```typescript
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**

```typescript
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 錯誤拒絕。

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

### Run Example

```
git clone git@github.com:getamis/qubic-js.git
cd qubic-js && yarn
cd example && yarn
yarn example
```


---

# 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://qubic.gitbook.io/docs/guides/web3-qubic-sdk.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.