Nubit modular-indexer-light-sdk verification demo

package.json

@@ -35,6 +35,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@metamask/obs-store": "^7.0.0",
+    "@nubit/modular-indexer-light-sdk": "0.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@reduxjs/toolkit": "^1.9.2",
     "@sentry/browser": "^6.19.7",
@@ -73,6 +74,7 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.2.0",
     "debounce": "^1.2.1",
+    "decimal.js": "^10.4.3",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "eslint-webpack-plugin": "^3.1.1",

src/ui/components/AddressBar/index.tsx

@@ -1,11 +1,10 @@
 import { useAccountAddress } from '@/ui/state/accounts/hooks';
 import { copyToClipboard, shortAddress } from '@/ui/utils';
 
+import { CopyOutlined } from '@ant-design/icons';
 import { useTools } from '../ActionComponent';
-import { Icon } from '../Icon';
 import { Row } from '../Row';
 import { Text } from '../Text';
-import { CopyOutlined } from '@ant-design/icons';
 
 export function AddressBar() {
   const tools = useTools();
@@ -21,7 +20,7 @@ export function AddressBar() {
       }}>
       <Text text={shortAddress(address)} color="textDim" />
       {/*<Icon icon="copy" color="textDim" />*/}
-      <CopyOutlined style={{color:'#888',fontSize:14}}/>
+      <CopyOutlined style={{ color: '#888', fontSize: 14 }} />
     </Row>
   );
 }

src/ui/components/NubitVerify/index.tsx

@@ -0,0 +1,217 @@
+import { Row } from '@/ui/components';
+import { useCurrentAccount } from '@/ui/state/accounts/hooks';
+import { copyToClipboard } from '@/ui/utils';
+import { CopyOutlined, LoadingOutlined } from '@ant-design/icons';
+import * as lightIndexer from '@nubit/modular-indexer-light-sdk';
+import { Tooltip } from 'antd';
+import { useEffect, useState } from 'react';
+import { useTools } from '../ActionComponent';
+import { Text } from '../Text';
+
+interface NubitVerifyProps {
+  tokens: any[];
+}
+
+interface verTokenItem {
+  name: string;
+  proof: string;
+}
+
+export function NubitVerify(props: NubitVerifyProps) {
+
+  const { tokens } = props;
+  const verTokens: Array<verTokenItem> = []
+  const currentAccount = useCurrentAccount();
+  const tools = useTools();
+  const [verStatus, setVerStatus] = useState(0);
+  const [verClick, setVerClick] = useState(false);
+
+  const [verRes, setVerRes] = useState<any>([]);
+
+  const [unVerRes, setUnVerRes] = useState([]);
+
+  const init = async () => {
+    const sdk = await lightIndexer.create();
+    await sdk.run({
+      committeeIndexers: {
+        s3: [
+          {
+            region: "us-west-2",
+            bucket: "nubit-modular-indexer-brc-20",
+            name: "nubit-official-00"
+          }
+        ],
+        da: []
+      },
+      verification: {
+        bitcoinRPC: "https://bitcoin-mainnet-archive.allthatnode.com",
+        metaProtocol: "brc-20",
+        minimalCheckpoint: 1
+      },
+    });
+
+    getLightStatus(sdk)
+
+  }
+
+  const getLightStatus = (sdk: lightIndexer.SDK) => {
+    sdk.getStatus()
+      .then((res: any) => {
+        console.log('lightStatus', res);
+        if (res === 'verified') {
+          tokens.forEach((item, index) => {
+            getLightGetBalanceOfWallet(sdk, index)
+          })
+          return false
+        }
+        if (res === 'unverified') {
+          getLightGetCurrentCheckpoints(sdk)
+          return false
+        }
+        if (res === 'verifying') {
+          setVerStatus(0)
+          setTimeout(function () {
+            getLightStatus(sdk)
+          }, 1000);
+        }
+      })
+      .catch((err: any) => {
+        getLightStatus(sdk)
+      })
+  }
+
+  const getLightGetBalanceOfWallet = (sdk: lightIndexer.SDK, index: number) => {
+    sdk.getBalanceOfWallet(tokens[index].ticker, currentAccount.address)
+      .then((res: any) => {
+        verTokens.push({
+          name: tokens[index].ticker,
+          proof: res?.proof
+        })
+        if (verTokens.length == tokens.length) {
+          setVerRes(verTokens)
+          setVerStatus(1)
+        }
+      })
+      .catch((err: any) => {
+        console.log('lightGetBalanceOfWallet', err);
+        setVerStatus(0)
+        setVerClick(false)
+        tools.toastError('Network Unstable, Please Retry Later...');
+      })
+  }
+
+  const getLightGetCurrentCheckpoints = (sdk: lightIndexer.SDK) => {
+    sdk.getCurrentCheckpoints()
+      .then((res: any) => {
+        setUnVerRes(res)
+        setVerStatus(2)
+      })
+      .catch((err: any) => {
+        console.log('lightGetBalanceOfWallet', err);
+        setVerStatus(0)
+        setVerClick(false)
+        tools.toastError('Network Unstable, Please Retry Later...');
+      })
+  }
+
+  useEffect(() => {
+    setVerStatus(0)
+    setVerClick(false)
+  }, [tokens]);
+
+  return (
+    <>
+      <Row justifyEnd mt="lg" style={{ marginBottom: '-15px' }}>
+        {verStatus === 0 && !verClick && <div style={{
+          fontSize: 14,
+          color: '#fff',
+          cursor: 'pointer',
+          backgroundColor: '#F7931A',
+          padding: '3px 5px',
+          borderRadius: '5px',
+          border: '1px solid #F7931A',
+          display: 'flex',
+          alignItems: 'center'
+        }} onClick={() => {
+          setVerClick(true)
+          init()
+        }}>
+          VERIFY <img src="./images/icons/nubit-ver.svg" height={20} style={{ marginLeft: "3px" }} />
+        </div>}
+        {verStatus === 0 && verClick && <div style={{
+          fontSize: 14,
+          color: '#fff',
+          backgroundColor: '#F7931A',
+          padding: '3px 5px',
+          borderRadius: '5px',
+          border: '1px solid #F7931A',
+          display: 'flex',
+          alignItems: 'center'
+        }}>
+          VERIFY <LoadingOutlined style={{ marginLeft: "3px" }} />
+        </div>}
+        {verStatus === 1 &&
+          <Tooltip placement="topRight" title={<>
+            <Row justifyCenter style={{
+              color: '#F7931A',
+              fontSize: 12,
+            }}>PROOF</Row>
+            {verRes?.map((item: any, index) => {
+              return <Row justifyBetween key={index}>
+                <div style={{
+                  fontSize: 12,
+                }}>{item?.name}</div>
+                <Row
+                  selfItemsCenter
+                  itemsCenter
+                  onClick={(e) => {
+                    copyToClipboard(item?.proof).then(() => {
+                      tools.toastSuccess('Copied');
+                    });
+                  }}>
+                  <Text text={item?.proof.slice(0, 5) + '...' + item?.proof.slice(item?.proof?.length - 15)} style={{ color: '#fff', fontSize: 12 }} />
+                  <CopyOutlined style={{ color: '#fff', fontSize: 12 }} />
+                </Row>
+              </Row>
+            })}
+          </>}>
+            <div style={{
+              fontSize: 14,
+              color: '#03D73E',
+              backgroundColor: 'transparent',
+              padding: '3px 5px',
+              borderRadius: '5px',
+              border: '1px solid #03D73E'
+            }}>VERIFIED</div>
+          </Tooltip>
+        }
+        {verStatus === 2 &&
+          <Tooltip placement="topRight" title={<>
+            <Row justifyCenter style={{
+              color: '#E10F0F',
+              fontSize: 14,
+            }}>Inconsistent Discovered</Row>
+            {unVerRes?.map((item: any, index) => {
+              return <Row justifyBetween key={index}>
+                <div style={{ fontSize: 12 }}>{item.name}</div>
+                <div style={{ color: '#fff', fontSize: 12, overflow: 'hidden' }} >{item.commitment}</div>
+              </Row>
+            })}
+          </>}>
+            <div style={{
+              fontSize: 14,
+              color: '#E10F0F',
+              backgroundColor: 'transparent',
+              padding: '3px 5px',
+              borderRadius: '5px',
+              border: '1px solid #E10F0F'
+            }}>UNVERIFIED</div>
+          </Tooltip>
+        }
+      </Row>
+      <Row justifyEnd mt="lg">
+        <img src="./images/icons/nubit.svg" width={100} />
+      </Row>
+    </>
+  );
+}

src/ui/pages/Main/WalletTabScreen/BRC20List5Byte.tsx

@@ -5,6 +5,7 @@ import { Column, Row } from '@/ui/components';
 import { useTools } from '@/ui/components/ActionComponent';
 import BRC20BalanceCard2 from '@/ui/components/BRC20BalanceCard2';
 import { Empty } from '@/ui/components/Empty';
+import { NubitVerify } from '@/ui/components/NubitVerify';
 import { Pagination } from '@/ui/components/Pagination';
 import { useCurrentAccount } from '@/ui/state/accounts/hooks';
 import { useWallet } from '@/ui/utils';
@@ -81,6 +82,7 @@ export function BRC20List5Byte() {
           }}
         />
       </Row>
+      <NubitVerify tokens={tokens} />
     </Column>
   );
 }

src/ui/pages/Main/WalletTabScreen/Brc20List.tsx

@@ -5,11 +5,11 @@ import { Column, Row } from '@/ui/components';
 import { useTools } from '@/ui/components/ActionComponent';
 import BRC20BalanceCard2 from '@/ui/components/BRC20BalanceCard2';
 import { Empty } from '@/ui/components/Empty';
+import { NubitVerify } from '@/ui/components/NubitVerify';
 import { Pagination } from '@/ui/components/Pagination';
 import { useCurrentAccount } from '@/ui/state/accounts/hooks';
 import { useWallet } from '@/ui/utils';
 import { LoadingOutlined } from '@ant-design/icons';
-
 import { useNavigate } from '../../MainRoute';
 
 export function BRC20List() {
@@ -29,6 +29,7 @@ export function BRC20List() {
         pagination.currentPage,
         pagination.pageSize
       );
+      console.log('list', list);
       setTokens(list);
       setTotal(total);
     } catch (e) {
@@ -81,6 +82,7 @@ export function BRC20List() {
           }}
         />
       </Row>
+      <NubitVerify tokens={tokens} />
     </Column>
   );
 }

src/ui/pages/Main/WalletTabScreen/index.tsx

@@ -62,6 +62,7 @@ export default function WalletTabScreen() {
 
   const dispatch = useAppDispatch();
   const assetTabKey = useAssetTabKey();
+  console.log(assetTabKey, '===assetTabKey')
 
   const skipVersion = useSkipVersionCallback();
 

yarn.lock

@@ -1733,6 +1733,13 @@
     "@types/node-fetch" "^2.5.10"
     node-fetch "^2.6.1"
 
+"@nubit/[email protected]":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@nubit/modular-indexer-light-sdk/-/modular-indexer-light-sdk-0.2.0.tgz#7103d8ef88bcc7a0d67bfe37438c8634da3f9602"
+  integrity sha512-wAft+L9ZEYqFUwYtqVWix8PTBvyTYIdMO+D7DH42mxykv8QbUpQMy2Gdl/UCdn67y1Jjy/8FAOLRT/rJwAlt3Q==
+  dependencies:
+    comlink "^4.4.1"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
@@ -4449,6 +4456,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comlink@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.4.1.tgz#e568b8e86410b809e8600eb2cf40c189371ef981"
+  integrity sha512-+1dlx0aY5Jo1vHy/tSsIGpSkN4tS9rZSW8FIhG0JH/crs9wwweswIo/POr451r7bZww3hFbPAKnTpimzL/mm4Q==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -5011,7 +5023,7 @@ decamelize@^1.1.1, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decimal.js@^10.2.1:
+decimal.js@^10.2.1, decimal.js@^10.4.3:
   version "10.4.3"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==