1  import { useState, useEffect } from 'react';
  2  import { Outlet } from 'react-router';
  3  import { useAtomValue, useAtom } from 'jotai';
  4  import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
  5  import { Flex, Grid, GridItem } from '@chakra-ui/react';
  6  import SideNav from 'components/SideNav';
  7  import BackgroundAnimation from 'components/BackgroundAnimation';
  8  import WalletConnection from 'components/WalletConnection';
  9  import WalletBridge from 'components/WalletBridge';
 10  import { GlassBox } from 'components/GlassBox';
 11  import { watchVbank } from 'services/vbank';
 12  import {
 13    chainStorageWatcherAtom,
 14    importContextAtom,
 15    networkConfigAtom,
 16  } from 'store/app';
 17  import { fetchChainInfo } from 'utils/rpc';
 18  
 19  function Layout() {
 20    const netConfig = useAtomValue(networkConfigAtom);
 21    const importContext = useAtomValue(importContextAtom);
 22    const [chainStorageWatcher, setChainStorageWatcher] = useAtom(
 23      chainStorageWatcherAtom,
 24    );
 25    const [error, setError] = useState<unknown | null>(null);
 26  
 27    useEffect(() => {
 28      let isCancelled = false;
 29      if (chainStorageWatcher) return;
 30      const startWatching = async () => {
 31        try {
 32          const { rpc, chainName } = await fetchChainInfo(netConfig.url);
 33          console.log({ rpc, chainName });
 34          if (isCancelled) return;
 35          setChainStorageWatcher(
 36            makeAgoricChainStorageWatcher(
 37              rpc,
 38              chainName,
 39              importContext.fromBoard.unserialize,
 40              (e) => {
 41                setError(e);
 42                throw e;
 43              },
 44            ),
 45          );
 46  
 47          watchVbank();
 48        } catch (e) {
 49          if (isCancelled) return;
 50          setError(e);
 51        }
 52      };
 53      startWatching();
 54  
 55      return () => {
 56        isCancelled = true;
 57      };
 58    }, [
 59      setError,
 60      netConfig,
 61      chainStorageWatcher,
 62      setChainStorageWatcher,
 63      importContext.fromBoard.unserialize,
 64    ]);
 65  
 66    return (
 67      <Grid
 68        h="100vh"
 69        templateRows="repeat(12, 1fr)"
 70        templateColumns="repeat(6, 1fr)"
 71        gap={0}
 72      >
 73        <GridItem rowSpan={12} colSpan={1}>
 74          <SideNav />
 75        </GridItem>
 76        <GridItem rowSpan={1} colSpan={5}>
 77          <WalletBridge />
 78          <WalletConnection />
 79        </GridItem>
 80        <GridItem
 81          rowSpan={11}
 82          colSpan={5}
 83          mt={4}
 84          mb={6}
 85          ml={5}
 86          mr={7}
 87          overflowY="scroll"
 88        >
 89          <GlassBox display="flex" flexDirection="column" minHeight="100%">
 90            {error ? (
 91              <>
 92                {/* <div className="flex justify-end flex-row space-x-2 items-center mr-6 m-2">
 93                  {networkDropdown}
 94                </div> */}
 95                <div>Error connecting to chain</div>
 96                <details>{error.toString()}</details>
 97              </>
 98            ) : (
 99              <Outlet />
100            )}
101          </GlassBox>
102        </GridItem>
103        <BackgroundAnimation />
104      </Grid>
105    );
106  }
107  
108  export default Layout;