@material-ui/lab#ToggleButtonGroup JavaScript Examples

render() {
    //console.log("Rendering AddGraph");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add Graph</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="center">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="plotname">Plot Name</InputLabel>
                <Input
                  id="plotname"
                  onChange={event => this.plotname = event.target.value}
                  aria-describedby="plotname-helper-text"
                  inputProps={{
                    'aria-label': 'Plot Name',
                  }}
                />
                <FormHelperText id="plotname-helper-text">Can be left empty</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
            <ToggleButtonGroup orientation="vertical" value={this.lines} onChange={(event, lines) => {this.lines = lines; this.setState({render_revision: this.state.render_revision + 1}); } } aria-label="lines available">
              {this.renderButtons()}
            </ToggleButtonGroup>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.addplot(this.plotname, this.lines)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

CurrencyComponent = ({ fromSideBar }) => {
  const styles = useStyles({ fromSideBar });
  const { currency, currencyHandler } = useContext(CurrencyContext);
  const mappedCurrencies = Object.values(CURRENCIES_LIST).map(
    ({ label: currencyLabel, unicode: currencyUnicode }) => (
      <ToggleButton
        value={currencyLabel}
        key={currencyLabel}
        arau-label={`${CURRENCY} ${currencyLabel}`}
      >
        {currencyUnicode}
      </ToggleButton>
    )
  );

  return (
    <div data-cy='currency' className={styles.root}>
      <ToggleButtonGroup
        value={currency}
        exclusive
        onChange={currencyHandler}
        aria-label={CURRENCY}
      >
        {mappedCurrencies}
      </ToggleButtonGroup>
    </div>
  );
}

render() {
    const { classes, t, leverage } = this.props;

    return (
      <div className={ classes.root }>
        <Typography variant='h3' className={ classes.inputCardHeading }>{ t("Open.Leverage") }</Typography>
        <ToggleButtonGroup value={ leverage } onChange={this.handleTabChange} aria-label="version" exclusive size={ 'small' }>
          <ToggleButton value={2} aria-label="v3">
            <Typography variant={ 'h3' }>2X</Typography>
          </ToggleButton>
          <ToggleButton value={3} aria-label="v3">
            <Typography variant={ 'h3' }>3X</Typography>
          </ToggleButton>
          <ToggleButton value={4} aria-label="v3">
            <Typography variant={ 'h3' }>4X</Typography>
          </ToggleButton>
        </ToggleButtonGroup>
      </div>
    )
  }

render() {
        let subComponent;
        if (this.state.isFigureLoading === true) {
            subComponent =
                <div className='loader-wrapper'>
                    <CircularProgress />
                </div>
        } else if (this.state.massagedData.length > 0) {
            // const fullRangePercentage = this.state.massagedData[this.state.massagedData.length - 1][2] / this.state.massagedData.data[0][2] - 1;
            // const halfRangePercentage = this.state.massagedData[this.state.massagedData.length - 1][2] / this.state.massagedData.data[Math.round((this.state.massagedData.data.length - 1) / 2)][2] - 1;

            // let fullRangeChange = (fullRangePercentage < 0 ? "" : "+") + (fullRangePercentage * 100).toFixed(2) + '%'
            // let halfRangeChange = (halfRangePercentage < 0 ? "" : "+") + (halfRangePercentage * 100).toFixed(2) + '%'

            subComponent =
                <div>
                    {/* <div className="highlights">
                        <div><p>Full range price change: {fullRangeChange}</p></div>
                        <div><p>Half range price change: {halfRangeChange}</p></div>
                    </div> */}

                    <ReactEcharts
                        option={this.getOption()}
                        notMerge={true}
                        lazyUpdate={true}
                        style={{ height: '400px', width: '100%' }}
                    />

                    <Grid container justify="center" alignItems="center">
                        <ToggleButtonGroup
                            className="toggle-button-group"
                            value={this.state.candlestickDaysRange}
                            exclusive
                            onChange={this.handleCandlestickDaysRangeChange}
                            aria-label="figure-range-button-group"
                        >
                            {this.state.figureRangeButtonConfigs.map(button =>
                                <ToggleButton key={button.id} value={button.value} aria-label={`toggle-button-${button.id}`}>{button.text}</ToggleButton>
                            )}
                        </ToggleButtonGroup>
                    </Grid>
                </div>
        } else {
            subComponent =
                <div className="chart-placeholder">
                    <p>
                        Search Any Ticker/Tap Any Card/Tap Any Row
                        <br></br>
                        Candlestick Chart Will Display Below
                    </p>
                    <svg width="3em" height="3em" viewBox="0 0 16 16" className="bi bi-chevron-double-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                        <path d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                    </svg>
                </div>
        }

        return (
            <div>
                {subComponent}
            </div>
        )
    }

export function DeploymentLogs({ leases, selectedLogsMode, setSelectedLogsMode }) {
  const [isLoadingLogs, setIsLoadingLogs] = useState(true);
  const [canSetConnection, setCanSetConnection] = useState(false);
  const [isConnectionEstablished, setIsConnectionEstablished] = useState(false);
  const logs = useRef([]);
  const [logText, setLogText] = useState("");
  const [isDownloadingLogs, setIsDownloadingLogs] = useState(false);
  const [services, setServices] = useState([]);
  const [selectedServices, setSelectedServices] = useState([]);
  const [stickToBottom, setStickToBottom] = useState(true);
  const [selectedLease, setSelectedLease] = useState(null);
  const classes = useStyles();
  const { data: providers } = useProviders();
  const { localCert, isLocalCertMatching } = useCertificate();
  const monacoRef = useRef();
  const { launchAsyncTask } = useAsyncTask();
  const providerInfo = providers?.find((p) => p.owner === selectedLease?.provider);
  const {
    data: leaseStatus,
    refetch: getLeaseStatus,
    isFetching: isLoadingStatus
  } = useLeaseStatus(providerInfo?.host_uri, selectedLease || {}, {
    enabled: false
  });
  const options = {
    ...monacoOptions,
    readOnly: true
  };

  useEffect(() => {
    // Clean up the socket if opened
    return () => {
      socket?.close();
    };
  }, []);

  useEffect(() => {
    // Set the services and default selected services
    if (leaseStatus) {
      setServices(Object.keys(leaseStatus.services));
      // Set all services as default
      setSelectedServices(Object.keys(leaseStatus.services));

      setCanSetConnection(true);
    }
  }, [leaseStatus]);

  const updateLogText = useThrottledCallback(
    () => {
      const logText = logs.current.map((x) => x.message).join("\n");
      setLogText(logText);
      setIsLoadingLogs(false);
    },
    [],
    1000
  );

  useEffect(() => {
    if (!leases || leases.length === 0) return;

    setSelectedLease(leases[0]);
  }, [leases]);

  useEffect(() => {
    if (!selectedLease || !providerInfo) return;

    getLeaseStatus();
  }, [selectedLease, providerInfo, getLeaseStatus]);

  useEffect(() => {
    if (!canSetConnection || !providerInfo || !isLocalCertMatching || !selectedLease || isConnectionEstablished) return;

    logs.current = [];

    let url = null;
    if (selectedLogsMode === "logs") {
      url = `${providerInfo.host_uri}/lease/${selectedLease.dseq}/${selectedLease.gseq}/${selectedLease.oseq}/logs?follow=true&tail=100`;

      if (selectedServices.length < services.length) {
        url += "&service=" + selectedServices.join(",");
      }
    } else {
      url = `${providerInfo.host_uri}/lease/${selectedLease.dseq}/${selectedLease.gseq}/${selectedLease.oseq}/kubeevents?follow=true`;
    }

    setIsLoadingLogs(true);

    socket?.close();
    socket = window.electron.openWebSocket(url, localCert.certPem, localCert.keyPem, (message) => {
      setIsLoadingLogs(true);

      let parsedLog = null;
      if (selectedLogsMode === "logs") {
        parsedLog = JSON.parse(message);
        parsedLog.service = parsedLog.name.split("-")[0];
        parsedLog.message = parsedLog.service + ": " + parsedLog.message;
      } else {
        parsedLog = JSON.parse(message);
        parsedLog.service = parsedLog.object.name.split("-")[0];
        parsedLog.message = `${parsedLog.service}: [${parsedLog.type}] [${parsedLog.reason}] [${parsedLog.object.kind}] ${parsedLog.note}`;
      }

      logs.current = logs.current.concat([parsedLog]);

      updateLogText();

      setIsConnectionEstablished(true);
    });
  }, [
    isLocalCertMatching,
    selectedLogsMode,
    selectedLease,
    selectedServices,
    localCert.certPem,
    localCert.keyPem,
    services?.length,
    updateLogText,
    canSetConnection,
    isConnectionEstablished,
    providerInfo
  ]);

  useEffect(() => {
    if (stickToBottom && monacoRef.current) {
      const editor = monacoRef.current.editor;
      // Immediate scroll type, scroll to bottom
      editor.revealLine(editor.getModel().getLineCount(), 1);
      // Clear selection
      editor.setSelection(new monaco.Selection(0, 0, 0, 0));
    }
  }, [logText, stickToBottom]);

  function handleModeChange(ev, val) {
    if (val) {
      setSelectedLogsMode(val);

      if (selectedLogsMode !== val) {
        setLogText("");
        setIsLoadingLogs(true);
        setIsConnectionEstablished(false);
      }
    }
  }

  function handleLeaseChange(id) {
    setSelectedLease(leases.find((x) => x.id === id));

    if (id !== selectedLease.id) {
      setLogText("");
      setServices([]);
      setSelectedServices([]);
      setIsLoadingLogs(true);
      setCanSetConnection(false);
      setIsConnectionEstablished(false);
    }
  }

  const onSelectedServicesChange = (selected) => {
    setSelectedServices(selected);

    setLogText("");
    setIsLoadingLogs(true);
    setIsConnectionEstablished(false);
  };

  const onDownloadLogsClick = async () => {
    setIsDownloadingLogs(true);

    await launchAsyncTask(
      async () => {
        const url = `${providerInfo.host_uri}/lease/${selectedLease.dseq}/${selectedLease.gseq}/${selectedLease.oseq}/logs?follow=false&tail=10000000`;

        const appPath = await window.electron.appPath("temp");
        const filePath = await window.electron.downloadLogs(
          appPath,
          url,
          localCert.certPem,
          localCert.keyPem,
          `${selectedLease.dseq}_${selectedLease.gseq}_${selectedLease.oseq}`
        );

        const downloadsPath = await window.electron.appPath("downloads");
        const savePath = `${downloadsPath}/${selectedLease.dseq}_${selectedLease.gseq}_${selectedLease.oseq}`;

        await window.electron.saveFileFromTemp(filePath, savePath, { dialogTitle: "Save log file" });
      },
      () => {
        // Cancelled
        window.electron.cancelSaveLogs();
        setIsDownloadingLogs(false);
      },
      "Downloading logs..."
    );

    await analytics.event("deploy", "downloaded logs");

    setIsDownloadingLogs(false);
  };

  return (
    <div className={classes.root}>
      {isLocalCertMatching ? (
        <>
          {selectedLease && (
            <>
              <Box display="flex" alignItems="center" justifyContent="space-between" padding=".2rem .5rem" height="45px">
                <Box display="flex" alignItems="center">
                  <ToggleButtonGroup color="primary" value={selectedLogsMode} exclusive onChange={handleModeChange} size="small">
                    <ToggleButton value="logs" size="small">
                      Logs
                    </ToggleButton>
                    <ToggleButton value="events" size="small">
                      Events
                    </ToggleButton>
                  </ToggleButtonGroup>

                  {leases?.length > 1 && (
                    <Box marginLeft=".5rem">
                      <LeaseSelect leases={leases} defaultValue={selectedLease.id} onSelectedChange={handleLeaseChange} />
                    </Box>
                  )}

                  {services?.length > 0 && canSetConnection && (
                    <Box marginLeft=".5rem">
                      <SelectCheckbox
                        options={services}
                        onSelectedChange={onSelectedServicesChange}
                        label="Services"
                        disabled={selectedLogsMode !== "logs"}
                        defaultValue={selectedServices}
                      />
                    </Box>
                  )}

                  {isLoadingStatus && (
                    <Box marginLeft="1rem">
                      <CircularProgress size="1rem" />
                    </Box>
                  )}
                </Box>

                <Box display="flex" alignItems="center">
                  {localCert && (
                    <Box marginRight="1rem">
                      <Button onClick={onDownloadLogsClick} variant="contained" size="small" color="primary" disabled={isDownloadingLogs}>
                        {isDownloadingLogs ? <CircularProgress size="1.5rem" color="primary" /> : "Download logs"}
                      </Button>
                    </Box>
                  )}
                  <FormControlLabel
                    control={<Checkbox color="primary" checked={stickToBottom} onChange={(ev) => setStickToBottom(ev.target.checked)} size="small" />}
                    label={"Stick to bottom"}
                  />
                </Box>
              </Box>

              <LinearLoadingSkeleton isLoading={isLoadingLogs} />

              <ViewPanel bottomElementId="footer" overflow="hidden">
                <MemoMonaco monacoRef={monacoRef} value={logText} options={options} />
              </ViewPanel>
            </>
          )}
        </>
      ) : (
        <Box mt={1}>
          <Alert severity="info">You need a valid certificate to view deployment logs.</Alert>
        </Box>
      )}
    </div>
  );
}

RegionTable = (props) => {
  const { classes } = props;
  // const sortOptions = { byName: 'name' };
  const {
    regions,
    collections,
    currentPage,
    pageSize,
    showCollections,
    changeCurrentPage,
    changePageSize,
    // changeSort,
    setShowCollections,
    regionCount,
    collectionCount,
    upload,
    updateRegion,
    updateCollection,
    deleteRegion,
    deleteCollection,
  } = useContext(RegionContext);
  const { orgList, userHasOrg } = useContext(AppContext);
  const [openEdit, setOpenEdit] = useState(false);
  const [isUpload, setIsUpload] = useState(false);
  const [selectedItem, setSelectedItem] = useState(undefined);
  const [openDelete, setOpenDelete] = useState(false);
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarMessage, setSnackbarMesssage] = useState('');

  useEffect(() => {
    if (!openDelete && !openEdit) {
      // Wait for the dialog to disappear before clearing the selected item.
      setTimeout(() => {
        setSelectedItem(undefined);
        setIsUpload(false);
      }, 300);
    }
  }, [openDelete, openEdit]);

  const tableRef = useRef(null);

  const handleChangeCurrentPage = (event, value) => {
    tableRef.current && tableRef.current.scrollIntoView();
    changeCurrentPage(value);
  };

  const handleChangeRowsPerPage = (event) => {
    changePageSize(Number(event.target.value));
    changeCurrentPage(0);
  };

  const handleEdit = (item, isCollection) => {
    setSelectedItem({
      ...item,
      isCollection,
    });
    setOpenEdit(true);
  };

  const handleDelete = (item, isCollection) => {
    setSelectedItem({
      ...item,
      isCollection,
    });
    setOpenDelete(true);
  };

  const handleChangeShowCollections = (event, val) => {
    if (val !== null) {
      setShowCollections(val);
    }
  };

  const handleUploadClick = () => {
    setIsUpload(true);
    setOpenEdit(true);
  };

  const handleSnackbarClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setSnackbarOpen(false);
    setSnackbarMesssage('');
  };

  const showSnackbar = (message) => {
    setSnackbarMesssage(message);
    setSnackbarOpen(true);
  };

  const RegionProperties = ({ region, max = 0 }) => {
    return Object.keys(region.properties || {}).map((key, idx) => {
      if (max === 0 || idx < max)
        return (
          <Grid key={`prop_${region.id}_${key}_${max}`}>
            <span>
              <b>{key}:</b>
            </span>
            &nbsp;
            <span>{JSON.stringify(region.properties[key])}</span>
            {max > 0 && idx === max - 1 && <span>&nbsp;&hellip;</span>}
          </Grid>
        );
    });
  };

  const RegionTableRows = () => {
    return (showCollections ? collections : regions).map((item) => (
      <TableRow key={item.id} role="listitem">
        {/* <TableCell>
          <Checkbox
            onChange={(e) => handleSelect(e.target.checked, region.id)}
            checked={selected.includes(region.id)}
          />
        </TableCell> */}
        <TableCell component="th" scope="row" data-testid="region">
          {item.name}
        </TableCell>
        {!userHasOrg && (
          <TableCell>
            {orgList.find((org) => org.stakeholder_uuid === item.owner_id)
              ?.name || '---'}
          </TableCell>
        )}
        {!showCollections && (
          <>
            <TableCell>{item.collection_name || '---'}</TableCell>
            <Tooltip title={<RegionProperties region={item} />}>
              <TableCell>
                <RegionProperties region={item} max={3} />
              </TableCell>
            </Tooltip>
            <TableCell align="center">
              {item.show_on_org_map ? 'Yes' : 'No'}
            </TableCell>
            <TableCell align="center">
              {item.calculate_statistics ? 'Yes' : 'No'}
            </TableCell>
          </>
        )}
        <TableCell align="right" className={classes.operations}>
          <IconButton
            title="edit"
            onClick={() => handleEdit(item, showCollections)}
          >
            <Edit />
          </IconButton>
          <IconButton
            title="delete"
            onClick={() => handleDelete(item, showCollections)}
          >
            <Delete />
          </IconButton>
        </TableCell>
      </TableRow>
    ));
  };

  const RegionTablePagination = () => (
    <TablePagination
      count={Number(showCollections ? collectionCount : regionCount)}
      rowsPerPageOptions={[25, 50, 100, { label: 'All', value: -1 }]}
      page={currentPage}
      rowsPerPage={pageSize}
      onChangePage={handleChangeCurrentPage}
      onChangeRowsPerPage={handleChangeRowsPerPage}
      SelectProps={{
        inputProps: { 'aria-label': 'rows per page' },
        native: true,
      }}
    />
  );

  return (
    <>
      <Grid container className={classes.regionsTableContainer}>
        <Paper elevation={3} className={classes.menu}>
          <Menu variant="plain" />
        </Paper>

        <Grid item container className={classes.rightBox}>
          <Grid item xs={12}>
            <Grid
              container
              justify="space-between"
              className={classes.titleBox}
            >
              <Grid item>
                <Grid container>
                  <Grid item>
                    <Typography variant="h2">Regions</Typography>
                  </Grid>
                </Grid>
              </Grid>
              <Grid item className={classes.headerButtonBox}>
                <ToggleButtonGroup
                  color="primary"
                  value={showCollections}
                  exclusive
                  onChange={handleChangeShowCollections}
                >
                  <ToggleButton value={false}>Regions</ToggleButton>
                  <ToggleButton value={true}>Collections</ToggleButton>
                </ToggleButtonGroup>
              </Grid>
              <Grid item className={classes.headerButtonBox}>
                <Button
                  onClick={handleUploadClick}
                  variant="contained"
                  className={classes.upload}
                  color="primary"
                >
                  UPLOAD
                </Button>
              </Grid>
            </Grid>
            <Grid container direction="column" className={classes.bodyBox}>
              <TableContainer component={Paper} ref={tableRef}>
                <Table className={classes.table} aria-label="simple table">
                  <TableHead>
                    <TableRow>
                      <TableCell>
                        Name
                        {/* <IconButton
                          title="sortbyName"
                          onClick={() => changeSort(sortOptions.byName)}
                        >
                          <SortIcon />
                        </IconButton> */}
                      </TableCell>
                      {!userHasOrg && <TableCell>Owner</TableCell>}
                      {!showCollections && (
                        <>
                          <TableCell>Collection</TableCell>
                          <TableCell>Properties</TableCell>
                          <TableCell align="center">Shown on Org Map</TableCell>
                          <TableCell align="center">
                            Statistics Calculated
                          </TableCell>
                        </>
                      )}
                      <TableCell></TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    <RegionTableRows />
                  </TableBody>
                  <TableFooter>
                    <TableRow>
                      <RegionTablePagination />
                    </TableRow>
                  </TableFooter>
                </Table>
              </TableContainer>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
      <EditModal
        openEdit={openEdit}
        setOpenEdit={setOpenEdit}
        isUpload={isUpload}
        selectedItem={selectedItem}
        styles={{ ...classes }}
        upload={upload}
        updateRegion={updateRegion}
        updateCollection={updateCollection}
        showSnackbar={showSnackbar}
      />
      <DeleteDialog
        selectedItem={selectedItem}
        openDelete={openDelete}
        setOpenDelete={setOpenDelete}
        deleteRegion={deleteRegion}
        deleteCollection={deleteCollection}
        showSnackbar={showSnackbar}
      />
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={handleSnackbarClose}
        message={snackbarMessage}
        action={
          <>
            <IconButton
              size="small"
              aria-label="close"
              color="inherit"
              onClick={handleSnackbarClose}
            >
              <Close fontSize="small" />
            </IconButton>
          </>
        }
      />
    </>
  );
}

render() {
    const { classes, handleClose } = this.props;
    const { y, account, gasPrices, gasSpeed } = this.state

    var address = 'Not Connected';
    if (account.address) {
      address = account.address.substring(0,8)+'...'+account.address.substring(account.address.length-6,account.address.length)
    }

    return (
      <div className={ classes.root } style={{ right: 0, top: y }}>
        <div className={ classes.setting }>
          <div className={ classes.topBar }>
            <Typography variant='h6' className={ classes.settingTitle }>Account</Typography>
            <CloseIcon className={ classes.closeIcon } onClick={ handleClose } />
          </div>
          { !account.address &&
            <div className={ classes.connectRoot } onClick={ this.connectWallet }>
              <img alt="" src={ require('../../assets/connectors/icn-metamask.svg') } className={ classes.connectedIcon } />
              <Typography variant='h5'>Connect to Metamask</Typography>
            </div>
          }
          { account.address &&
            <div className={ classes.accountSetting }>
              <div className={ classes.connectedRoot }>
                <img alt="" src={ require('../../assets/connectors/icn-metamask.svg') } className={ classes.connectedIcon } />
                <Typography className={ classes.connectedString } variant='h4'>Connected with Metamask</Typography>
                <Button
                  className={ classes.actionButton }
                  onClick={ this.closeWallet }>
                  <ExitToAppIcon className={ classes.buttonIcon } /> Disconnect
                </Button>
              </div>
              <div className={ classes.addressContainer }>
                <Typography variant='h3' className={ classes.addresstext }>{ address }</Typography>
                <Button
                  className={ classes.actionButton }
                  onClick={ (e) => { this.copyAddressToClipboard(e, account.address) } }>
                  <FileCopyIcon className={ classes.buttonIcon } /> Copy
                </Button>
                <Button
                  className={ classes.actionButton }
                  onClick={ (e) => { this.viewAddressClicked(e, account.address) } }>
                  <FileCopyIcon className={ classes.buttonIcon } /> View
                </Button>
              </div>
            </div>
          }
        </div>
        { account.address &&
          <div className={ classes.setting }>
            <Typography variant='h6' className={ classes.settingTitle }>Select Gas Setting</Typography>
            <ToggleButtonGroup color='secondary' value={ gasSpeed } onChange={this.handleTabChange} aria-label="type" exclusive size={ 'small' } fullwidth className={ classes.gasFeeToggle } >
              <ToggleButton value={'standard'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Medium</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.standard ? gasPrices.standard.toFixed(0) : '' } Gwei)</Typography>
                </div>
              </ToggleButton>
              <ToggleButton value={'fast'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Fast</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.fast ? gasPrices.fast.toFixed(0) : '' } Gwei)</Typography>
                </div>
              </ToggleButton>
              <ToggleButton value={'instant'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Instant</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.instant ? gasPrices.instant.toFixed(0) : '' } Gwei)</Typography>
                </div>
              </ToggleButton>
            </ToggleButtonGroup>
          </div>
        }
        { /*account.address &&
          <div className={ classes.setting }>
            <Typography variant='h6' className={ classes.settingTitle }>Recent Transactions</Typography>
            <div className={ classes.transactionsRoot }>
              { this.renderTransactions() }
            </div>
          </div>
        */ }
      </div>
    )
  }

render() {
    const { classes, handleClose } = this.props;
    const { y, account, gasPrices, gasSpeed } = this.state

    var address = 'Not Connected';
    if (account.address) {
      address = account.address.substring(0,8)+'...'+account.address.substring(account.address.length-6,account.address.length)
    }

    return (
      <div className={ classes.root } style={{ right: 0, top: y }}>
        <div className={ classes.setting }>
          <div className={ classes.topBar }>
            <Typography variant='h6' className={ classes.settingTitle }>Account</Typography>
            <CloseIcon className={ classes.closeIcon } onClick={ handleClose } />
          </div>
          { !account.address &&
            <div className={ classes.connectRoot } onClick={ this.connectWallet }>
              <img alt="" src={ require('../../assets/connectors/icn-metamask.svg') } className={ classes.connectedIcon } />
              <Typography variant='h5'>Connect to Metamask</Typography>
            </div>
          }
          { account.address &&
            <div className={ classes.accountSetting }>
              <div className={ classes.connectedRoot }>
                <img alt="" src={ require('../../assets/connectors/icn-metamask.svg') } className={ classes.connectedIcon } />
                <Typography className={ classes.connectedString } variant='h4'>Connected with Metamask</Typography>
                <Button
                  className={ classes.actionButton }
                  onClick={ this.closeWallet }>
                  <ExitToAppIcon className={ classes.buttonIcon } /> Disconnect
                </Button>
              </div>
              <div className={ classes.addressContainer }>
                <Typography variant='h3' className={ classes.addresstext }>{ address }</Typography>
                <Button
                  className={ classes.actionButton }
                  onClick={ (e) => { this.copyAddressToClipboard(e, account.address) } }>
                  <FileCopyIcon className={ classes.buttonIcon } /> Copy
                </Button>
                <Button
                  className={ classes.actionButton }
                  onClick={ (e) => { this.viewAddressClicked(e, account.address) } }>
                  <FileCopyIcon className={ classes.buttonIcon } /> View
                </Button>
              </div>
            </div>
          }
        </div>
        { account.address &&
          <div className={ classes.setting }>
            <Typography variant='h6' className={ classes.settingTitle }>Select Gas Setting</Typography>
            <ToggleButtonGroup color='secondary' value={ gasSpeed } onChange={this.handleTabChange} aria-label="type" exclusive size={ 'small' } fullwidth className={ classes.gasFeeToggle } >
              <ToggleButton value={'slow'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Slow</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.slow.toFixed(0) } Gwei)</Typography>
                </div>
              </ToggleButton>
              <ToggleButton value={'normal'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Medium</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.standard.toFixed(0) } Gwei)</Typography>
                </div>
              </ToggleButton>
              <ToggleButton value={'fast'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Fast</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.fast.toFixed(0) } Gwei)</Typography>
                </div>
              </ToggleButton>
              <ToggleButton value={'instant'} className={ classes.gasFee }>
                <div className={ classes.gasFee }>
                  <Typography variant={ 'h6' } className={ classes.gasFeeText }>Instant</Typography>
                  <Typography variant={ 'body1' } className={ classes.gasFeeText }>({ gasPrices.instant.toFixed(0) } Gwei)</Typography>
                </div>
              </ToggleButton>
            </ToggleButtonGroup>
          </div>
        }
        { account.address &&
          <div className={ classes.setting }>
            <Typography variant='h6' className={ classes.settingTitle }>Recent Transactions</Typography>
            <div className={ classes.transactionsRoot }>
              { this.renderTransactions() }
            </div>
          </div>
        }
      </div>
    )
  }