WIP: use util-lib instead of appStates

package.json

@@ -26,25 +26,23 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@apollo/client": "^3.6.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@polkadot/extension-dapp": "^0.40.4",
     "@polkadot/react-identicon": "^0.86.4",
+    "@reef-chain/ui-kit": "^1.1.2",
     "@reef-chain/util-lib": "^1.0.0-rc7",
     "@reef-defi/evm-provider": "^1.0.9",
     "@reef-defi/extension-base": "^1.0.14",
     "@reef-defi/extension-dapp": "^1.0.14",
     "@reef-defi/extension-inject": "^1.0.14",
-    "@reef-chain/ui-kit": "^1.1.2",
     "@types/react-router-dom": "^5.3.0",
     "axios": "^0.21.4",
     "bignumber.js": "^9.0.2",
     "bootstrap": "^5.1.1",
     "eslint-import-resolver-typescript": "^2.4.0",
     "ethers": "^5.7.0",
     "graphql": "^16.2.0",
-    "graphql-ws": "^5.11.2",
     "process": "^0.11.10",
     "react-copy-to-clipboard": "^5.0.4",
     "react-router-dom": "^5.3.0",

src/appState/accountState.ts

@@ -22,17 +22,16 @@ import { filter } from 'rxjs/operators';
 import { AccountJson } from '@reef-defi/extension-base/background/types';
 import type { InjectedAccountWithMeta } from '@reef-defi/extension-inject/types';
 import type { Signer as InjectedSigningKey } from '@polkadot/api/types';
-// import { graphql } from '@reef-chain/util-lib';
 import { UpdateDataCtx } from './updateStateModel';
 import { replaceUpdatedSigners, updateSignersEvmBindings } from './accountStateUtil';
 import { currentProvider$ } from './providerState';
 import { ReefSigner } from '../state';
-// import { apolloExplorerClientInstance$, zenToRx, } from '../graphql/apollo';
 import { accountJsonToMeta, metaAccountToSigner } from '../rpc/accounts';
-import { graphqlRequest } from '../graphql/gqlUtils';
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
+import {reefState} from "@reef-chain/util-lib";
 
 export const accountsSubj = new ReplaySubject<ReefSigner[] | null>(1);
+
 export const accountsJsonSubj = new ReplaySubject<AccountJson[]| InjectedAccountWithMeta[] | null>(1);
 export const accountsJsonSigningKeySubj = new ReplaySubject<InjectedSigningKey>(1);
 export const reloadSignersSubj = new Subject<UpdateDataCtx<ReefSigner[]>>();
@@ -182,21 +181,6 @@ const signersWithUpdatedBalances$ = combineLatest([
     }),
   );
 
-// const EVM_ADDRESS_UPDATE_GQL = graphql.EVM_ADDRESS_UPDATE_GQL;
-/*
-const EVM_ADDRESS_UPDATE_GQL = gql`
-  subscription query($accountIds: [String!]!) {
-    account(
-      where: { address: { _in: $accountIds } }
-      order_by: { timestamp: asc, address: asc }
-    ) {
-      address
-      evm_address
-    }
-  }
-`;
-*/
-
 // eslint-disable-next-line camelcase
 interface AccountEvmAddrData {
   address: string;
@@ -205,7 +189,7 @@ interface AccountEvmAddrData {
   isEvmClaimed?: boolean;
 }
 
-export const EVM_ADDRESS_UPDATE_GQL = `
+const EVM_ADDRESS_UPDATE_GQL = `
   query query($accountIds: [String!]!) {
     accounts(where: {id_in: $accountIds}, orderBy: timestamp_DESC) {
       id
@@ -214,46 +198,67 @@ export const EVM_ADDRESS_UPDATE_GQL = `
   }
 `;
 
-export const getAllAccounts = (accountIds:any) => ({
+const getGraphqlEndpoint = (network:string,isExplorer:boolean):string=>{
+  if(isExplorer){
+    if(network=='testnet'){
+      return 'https://squid.subsquid.io/reef-explorer-testnet/graphql'
+    }else{
+      return 'https://squid.subsquid.io/reef-explorer/graphql'
+    }
+  }else{
+    if(network=='testnet'){
+      return "https://squid.subsquid.io/reef-swap-testnet/graphql";
+    }
+  }
+  return 'https://squid.subsquid.io/reef-swap/graphql'
+}
+
+export const graphqlRequest = (
+  httpClient: AxiosInstance,
+  queryObj: { query: string; variables: any },
+  isExplorer?:boolean
+) => {
+  let selectedNetwork:string="mainnet";
+  try {
+    let storedNetwork = localStorage.getItem("reef-app-active-network");
+    if(storedNetwork){
+      let parsedStoredNetwork = JSON.parse(storedNetwork);
+      selectedNetwork = parsedStoredNetwork.name;
+    }
+  } catch (error) {
+    console.log(error);
+  }
+  const graphql = JSON.stringify(queryObj);
+  if(isExplorer){
+    let url = getGraphqlEndpoint(selectedNetwork!,true);
+    return httpClient.post(url, graphql, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+} 
+let url = getGraphqlEndpoint(selectedNetwork!,false);
+return httpClient.post(url, graphql, {
+  headers: { 'Content-Type': 'application/json' },
+});
+};
+
+const getAllAccounts = (accountIds:any) => ({
   query: EVM_ADDRESS_UPDATE_GQL,
   variables: {accountIds}
 });
 
 const indexedAccountValues$ = combineLatest([
   signersInjected$,
-]).pipe(
-  switchMap(([signers]) => {
-    try {
-      console.log("signers:", signers);
-
-
-      if (!signers) {
-        return [];
-      } else {
-        return graphqlRequest(axios,getAllAccounts(signers.map((s: any) => s.address)),true);
-          // apollo.subscribe({
-          //   query: EVM_ADDRESS_UPDATE_GQL,
-          //   variables: { accountIds: signers.map((s: any) => s.address) },
-          //   fetchPolicy: 'network-only',
-          // })
-      }
-    } catch (error) {
-      console.log("error", error);
-      return [];
-    }
-  }),
-  map((result: any): AccountEvmAddrData[] =>{
-    console.log("result==",result);
-    return result.data?.data.accounts.map((a) => ({
-      address: a.id,
-      evmAddress: a.evmAddress,
-      isEvmClaimed: !!a.evmAddress,
-    } as AccountEvmAddrData))
-  }
-  ),
-  filter((v) => !!v),
-  startWith([])
-);
+])
+  .pipe(
+    switchMap(([ signers]) => (!signers
+      ? []
+      : graphqlRequest(axios,getAllAccounts(signers.map((s: any) => s.address)),true))),
+      map((result: any): AccountEvmAddrData[] => 
+      {
+        return result.data.data.accounts.map((a) => ({ address: a.id, evmAddress: a.evmAddress, isEvmClaimed: !!a.evmAddress } as AccountEvmAddrData))}),
+    filter((v) => !!v),
+    startWith([]),
+  );
 
 const signersWithUpdatedData$ = combineLatest([
   signersWithUpdatedBalances$,
@@ -321,14 +326,9 @@ const signersWithUpdatedData$ = combineLatest([
   );
 
 export const signers$: Observable<ReefSigner[] | null> = signersWithUpdatedData$;
-const currentAddressSubj: Subject<string | undefined> = new Subject<string | undefined>();
-export const setCurrentAddress = (address: string|undefined) => currentAddressSubj.next(address);
-export const currentAddress$: Observable<string | undefined> = currentAddressSubj.asObservable()
-  .pipe(
-    startWith(''),
-    distinctUntilChanged(),
-    shareReplay(1),
-  );
+
+export const setCurrentAddress:(address: string | undefined) => void = reefState.setSelectedAddress;
+export const currentAddress$: Observable<string | undefined> = reefState.selectedAddress$;
 
 // setting default signer (when signers exist) if no selected address exists
 combineLatest([signers$, currentAddress$])
@@ -386,4 +386,4 @@ export const selectedSigner$: Observable<ReefSigner | undefined | null> = combin
       return of(null);
     }),
     shareReplay(1),
-  );
+  );

src/appState/nftTokenState.ts

@@ -1,63 +1,41 @@
 import {
-  combineLatest, map, Observable, switchMap,
+  combineLatest, from, map, Observable, switchMap,
 } from 'rxjs';
 import { BigNumber } from 'ethers';
 import { NFT } from '../state';
 import { currentProvider$ } from './providerState';
-import { queryGql$, selectedSignerAddressUpdate$ } from './tokenState';
+import { selectedSignerAddressUpdate$ } from './tokenState';
 import { resolveNftImageLinks } from '../utils/nftUtil';
 import { _NFT_IPFS_RESOLVER_FN } from './util';
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
+import { graphqlRequest } from './accountState';
 
 const SIGNER_NFTS_GQL = `
-  query query($accountId: String) {
-    tokenHolders(
-    orderBy: balance_DESC
-    where: {AND: {nftId_isNull: false, token: {id_isNull: false}, signer: {id_eq: $accountId}, balance_gt: "0"}, type_eq: Account},
-    limit:100
-  ) {
-    token {
-      id
-      type
-    }
-    balance
-    nftId
+query query($accountId: String) {
+  tokenHolders(
+  orderBy: balance_DESC
+  limit:199
+  where: {AND: {nftId_isNull: false, token: {id_isNull: false}, signer: {id_eq: $accountId}, balance_gt: "0"}, type_eq: Account}
+) {
+  token {
+    id
+    type
   }
- }`;
+  balance
+  nftId
+}
+}`;
+
 
- export const getSignerNftsQry = (accountId: string) => {
+const getSignerNfts = (accountId: string) => {
   return {
     query: SIGNER_NFTS_GQL,
     variables: {
-      accountId,
+      accountId
     },
   };
 };
 
-/*
-const SIGNER_NFTS_GQL = gql`
-  subscription query($accountId: String) {
-    token_holder(
-    order_by: { balance: desc }
-    where: {
-      _and: [{ nft_id: { _is_null: false } }, { signer: { _eq: $accountId } }]
-      type: { _eq: "Account" }
-    }
-  ) {
-    token_address
-    balance
-    nft_id
-    info
-    contract {
-      verified_contract {
-        type
-        contract_data
-      }
-    }
-  }
- }`;
-*/
-
 export interface VerifiedNft {
   token_address: string;
   balance: string;
@@ -82,77 +60,20 @@ const parseTokenHolderArray = (resArr: VerifiedNft[]): NFT[] => resArr.map(({
   iconUrl: '',
 } as NFT));
 
-/* async function getSqwidContractNfts(queryResult: any[] | undefined, signer: ReefSigner, provider: Provider) {
-    const mainnetGHash = '0x7834781d38e4798d548e34ec947d19deea29df148a7bf32484b7b24dacf8d4b7';
-    const network = await provider.api.genesisHash.toHuman();
-    const isMainnet = mainnetGHash === network;
-
-    if (queryResult?.length || !isMainnet) {
-        return queryResult;
-    }
-
-    const sqwid1155Address = '0x0601202b75C96A61CDb9A99D4e2285E43c6e60e4'
-
-    const nftItemsABI = [{
-        "inputs": [
-            {
-                "internalType": "address",
-                "name": "owner",
-                "type": "address"
-            }
-        ],
-        "name": "getTokensByOwner",
-        "outputs": [
-            {
-                "internalType": "uint256[]",
-                "name": "",
-                "type": "uint256[]"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function"
-    }];
-    const sqwid1155Contract = new Contract(sqwid1155Address, nftItemsABI, signer.signer);
-    const allTokens: BigNumber[] = await sqwid1155Contract.getTokensByOwner(signer.evmAddress);
-    const signerIds = allTokens.reduce((signerTokens:({ amt: string, nftId: string })[],tknAmt:BigNumber,  i:number)=>{
-        let amt = tknAmt.toString();
-        if(amt !== '0'){
-            signerTokens.push({amt, nftId:i.toString()})
-        }
-
-        return signerTokens;
-    },[]);
-    return signerIds.map(nftIdAmt=>({
-        token_address: sqwid1155Address,
-        balance: nftIdAmt.amt,
-        nft_id: nftIdAmt.nftId,
-        info: { symbol: '' },
-        contract: {
-            verified_contract: {
-                type: 'ERC1155',
-                contract_data: {type:ContractType.ERC1155}
-            }
-        }
-    } as VerifiedNft));
-} */
+const queryGql$ = (
+  client: AxiosInstance,
+  queryObj: { query: string; variables: any }
+) =>
+  from(graphqlRequest(client as AxiosInstance, queryObj,true).then(res => res.data));
 
 export const selectedSignerNFTs$: Observable<NFT[]> = combineLatest([
   selectedSignerAddressUpdate$,
   currentProvider$,
 ])
   .pipe(
-    switchMap(([signer]) => (!signer
+    switchMap(([ signer]) => (!signer
       ? []
-      : 
-
-        // apollo.subscribe({
-        //   query: SIGNER_NFTS_GQL,
-        //   variables: {
-        //     accountId: signer.address,
-        //   },
-        //   fetchPolicy: 'network-only',
-        // }),
-        queryGql$(axios,getSignerNftsQry(signer.address))
+      :queryGql$(axios,getSignerNfts(signer.address))
         .pipe(
           map(({ data }) => {
             const verNfts = data && Array.isArray(data.tokenHolders)
@@ -166,9 +87,7 @@ export const selectedSignerNFTs$: Observable<NFT[]> = combineLatest([
               : null;
             return verNfts;
           }),
-          // indexer fallback, loading directly from sqwid contract
-          // switchMap((res: VerifiedNft[] | undefined) => getSqwidContractNfts(res, signer as ReefSigner, provider)),
           map((res: VerifiedNft[] | undefined) => parseTokenHolderArray(res || [])),
           switchMap((nfts: NFT[]) => (resolveNftImageLinks(nfts, signer.signer, _NFT_IPFS_RESOLVER_FN) as Observable<NFT[]>)),
         ))),
-  );
+  );