Feat/sync 20240912

.github/workflows/size-report.yml

@@ -0,0 +1,22 @@
+name: 'size'
+
+on:
+  pull_request:
+    branches:
+      - develop
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Enable node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.12.0
+      - uses: andresz1/[email protected]
+        with:
+          github_token: ${{ secrets.GIT_TOKEN }}
+          build_script: size-build

.gitignore

@@ -20,6 +20,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+*.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -64,6 +64,10 @@ npm install @xdefi-tech/chains
 yarn add @xdefi-tech/chains
 ```
 
+## Environment Setup
+
+The `NETWORKED_QUERIES` environment variable is used to control the behavior of network requests in tests. By default, `NETWORKED_QUERIES` is set to `0`, which means that all network requests are mocked, allowing tests to run without actual network dependencies. This ensures that tests are faster, more reliable, and not affected by external factors such as network latency or availability of external services. Setting `NETWORKED_QUERIES` to `1` enables real network requests, allowing tests to interact with actual external services. This can be useful for integration tests where end-to-end verification of network interactions is required. To configure this setting, simply add `NETWORKED_QUERIES=0` or `NETWORKED_QUERIES=1` to your `.env` file as needed.
+
 ## Manifest
 
 Each provider may have different manifests, but they share common fields. For more details, please refer to the README of the respective provider.

examples/react/components/balances.component.tsx

@@ -3,43 +3,31 @@ import {
   Box,
   Typography,
   Button,
-  Divider,
   List,
   ListItemAvatar,
   ListItem,
   ListItemText,
 } from '@mui/material';
 import { Coin, Chain } from '@xdefi-tech/chains-core';
-import { isEmpty } from 'lodash';
+import HowToContainer from './containers/how-to.container';
 
 export interface IBalancesComponent {
   provider: Chain.Provider;
   address: string;
   tokenList: string[];
+  children?: React.ReactNode;
 }
 
 const BalancesComponent = (props: IBalancesComponent) => {
   const [balances, setBalances] = useState<Coin[]>([]);
   const [balanceError, setBalanceError] = useState<null | string>(null);
   const [balanceLoader, setBalanceLoader] = useState<boolean>(false);
-  const [subscription, setSubscription] = useState(null);
   const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
-  useEffect(() => {
-    handleUnsubscribe();
-  }, [props.address, props.provider, props.tokenList]);
 
   useEffect(() => {
     setBalanceError(null);
   }, [props.address]);
 
-  const handleUnsubscribe = useCallback(() => {
-    if (subscription) {
-      subscription.unsubscribe();
-      setSubscription(null);
-    }
-    setBalanceError(null);
-  }, [subscription]);
-
   const handleBalanceClick = useCallback(async () => {
     try {
       setBalanceLoader(true);
@@ -63,32 +51,9 @@ const BalancesComponent = (props: IBalancesComponent) => {
     }
   }, [props.address, props.provider, props.tokenList]);
 
-  const handleStreamingClick = useCallback(async () => {
-    try {
-      if (subscription) {
-        handleUnsubscribe();
-        return;
-      }
-      if (isEmpty(balances)) {
-        await handleBalanceClick();
-      }
-      const balanceResponse = await props.provider.getBalance(props.address);
-      const balanceObserver = await balanceResponse.getObserver();
-      setSubscription(
-        balanceObserver.subscribe((data) => {
-          // todo create and update subs list
-          console.log('subscription data', data);
-        })
-      );
-    } catch (err) {
-      setBalanceError(err.message);
-      setSubscription(null);
-    }
-  }, [balances, subscription, props.address, props.provider]);
-
   return (
     <Box>
-      <Typography variant="h4">Balances</Typography>
+      <Typography variant="h6">Balances</Typography>
 
       <Box>
         <Button
@@ -97,63 +62,56 @@ const BalancesComponent = (props: IBalancesComponent) => {
         >
           Set Balances
         </Button>
-        <Button
-          onClick={handleStreamingClick}
-          disabled={balanceLoader || Boolean(balanceError)}
-        >
-          {subscription ? 'Disable' : 'Enable'} Stream
-        </Button>
       </Box>
 
       {balanceError && <Typography color="red">{balanceError}</Typography>}
 
-      {lastUpdate && (
-        <Typography color="gray">
-          {lastUpdate.toDateString()} {lastUpdate.toTimeString()}
-        </Typography>
-      )}
+      {balances.length > 0 && (
+        <>
+          {lastUpdate && (
+            <Typography color="gray">
+              {lastUpdate.toDateString()} {lastUpdate.toTimeString()}
+            </Typography>
+          )}
 
-      <List
-        component="div"
-        sx={{
-          width: '100%',
-          bgcolor: 'background.paper',
-          maxHeight: 500,
-          overflow: 'auto',
-        }}
-      >
-        {balances.map((coin: Coin) => {
-          const priceInUsd = coin.asset.price
-            ? `${coin.amount.multipliedBy(coin.asset.price).toFixed(2)}$`
-            : 'N/A';
-          return (
-            <ListItem button key={coin.asset.id || coin.asset.symbol}>
-              <ListItemAvatar>
-                <img
-                  width="30"
-                  height="30"
-                  src={coin.asset.icon}
-                  alt={coin.asset.symbol}
-                />
-              </ListItemAvatar>
-              <Typography>{coin.asset.symbol}</Typography>
-              <ListItemText
-                primary={coin.amount.toFixed(8)}
-                secondary={priceInUsd}
-                sx={{ textAlign: 'end' }}
-              />
-            </ListItem>
-          );
-        })}
-      </List>
+          <List
+            component="div"
+            sx={{
+              width: '100%',
+              bgcolor: 'background.paper',
+              maxHeight: 500,
+              overflow: 'auto',
+              marginBottom: '1em',
+            }}
+          >
+            {balances.map((coin: Coin) => {
+              const priceInUsd = coin.asset.price
+                ? `${coin.amount.multipliedBy(coin.asset.price).toFixed(2)}$`
+                : 'N/A';
+              return (
+                <ListItem button key={coin.asset.id || coin.asset.symbol}>
+                  <ListItemAvatar>
+                    <img
+                      width="30"
+                      height="30"
+                      src={coin.asset.icon}
+                      alt={coin.asset.symbol}
+                    />
+                  </ListItemAvatar>
+                  <Typography>{coin.asset.symbol}</Typography>
+                  <ListItemText
+                    primary={coin.amount.toFixed(8)}
+                    secondary={priceInUsd}
+                    sx={{ textAlign: 'end' }}
+                  />
+                </ListItem>
+              );
+            })}
+          </List>
+        </>
+      )}
 
-      <Divider
-        sx={{
-          borderWidth: 3,
-          my: 3,
-          borderRadius: 10,
-        }}
-      />
+      <HowToContainer title="get balances?">{props.children}</HowToContainer>
     </Box>
   );
 };

examples/react/components/chains/binance/provider.container.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Box, FormControl, OutlinedInput, InputLabel } from '@mui/material';
+
+import { ChainsContext } from '../../../context/chains.context';
+import BalancesComponent from '../../balances.component';
+import TransactionsComponent from '../../transactions.component';
+
+import { registry } from '../../../constants/registry';
+import TransferComponent from './transfer.component';
+
+export interface IProviderContainer {
+  seedPhrase: string;
+  providerId: string;
+}
+
+const BinanceProviderContainer = (props: IProviderContainer) => {
+  const chains = React.useContext(ChainsContext);
+  const provider = React.useMemo(() => {
+    return chains.getProviderById(props.providerId);
+  }, []);
+  const signer = React.useMemo(() => {
+    return new (provider.getSigners()[0])(props.seedPhrase);
+  }, [provider]);
+  const registryManifest = React.useMemo(() => {
+    const item = registry.find((item) => item.id === props.providerId);
+    if (!item) {
+      console.log('Provider not found', props.providerId);
+    }
+    return item;
+  }, []);
+
+  const [address, setAddress] = React.useState<string>('');
+  React.useEffect(() => {
+    const getAddress = async () => {
+      setAddress(
+        await signer.getAddress(
+          registryManifest.derivation[0].path,
+          provider.manifest.prefix
+        )
+      );
+    };
+    getAddress();
+  }, []);
+
+  const handleAddressChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setAddress(event.target.value);
+    },
+    []
+  );
+
+  return (
+    <Box>
+      <FormControl sx={{ mb: 2 }} fullWidth variant="outlined">
+        <InputLabel htmlFor="balance-address">Address</InputLabel>
+        <OutlinedInput
+          id="balance-address"
+          value={address}
+          onChange={handleAddressChange}
+          label="Seed phrase"
+        />
+      </FormControl>
+
+      <BalancesComponent provider={provider} address={address} tokenList={[]}>
+        {`const provider = new BinanceProvider(
+  new BinanceProvider.dataSourceList.IndexerDataSource(BINANCE_MANIFEST)
+);
+const balanceResponse = await provider.getBalance('${address}');
+const balanceData = await balanceResponse.getData();
+console.log(balanceData);`}
+      </BalancesComponent>
+
+      <TransactionsComponent provider={provider} address={address}>
+        {`const provider = new BinanceProvider(
+  new BinanceProvider.dataSourceList.IndexerDataSource(BINANCE_MANIFEST)
+);
+const transactionsResponse = await provider.getTransactions('${address}');
+const transactionsData = await transactionsResponse.getData();
+console.log(transactionsData);`}
+      </TransactionsComponent>
+
+      <TransferComponent
+        provider={provider}
+        address={address}
+        signer={signer}
+        derivation={registryManifest.derivation[0].path}
+      />
+    </Box>
+  );
+};
+
+export default BinanceProviderContainer;