text: import React, { Component } from "react";
  import { ThemeProvider, Box, Text, Flex } from "rimble-ui";
  
  import RimbleWeb3 from "./utilities/RimbleWeb3";
  import ConnectionBanner from "@rimble/connection-banner";
  
  import Header from "./components/Header";
  import PrimaryCard from "./components/PrimaryCard";
  import InstructionsCard from "./components/InstructionsCard";
  import Web3Debugger from "./components/Web3Debugger";
  
  import theme from "./theme";
  import { createGlobalStyle } from "styled-components";
  
  const GlobalStyle = createGlobalStyle`
    body, html {
      margin: 0;
      padding: 0;
      background-color: #efefef;
    }
  `;
  
  class App extends Component {
    state = {
      route: "default"
    };
  
    // Optional parameters to pass into RimbleWeb3
    config = {
      accountBalanceMinimum: 0.0001,
      requiredNetwork: 4
    };
  
    showRoute = route => {
      this.setState({
        route
      });
    };
  
    render() {
      return (
        <ThemeProvider theme={theme} className="App">
          <RimbleWeb3 config={this.config}>
            <RimbleWeb3.Consumer>
              {({
                needsPreflight,
                validBrowser,
                userAgent,
                web3,
                account,
                accountBalance,
                accountBalanceLow,
                initAccount,
                rejectAccountConnect,
                userRejectedConnect,
                accountValidated,
                accountValidationPending,
                rejectValidation,
                userRejectedValidation,
                validateAccount,
                connectAndValidateAccount,
                modals,
                network,
                transaction,
                web3Fallback
              }) => (
                <Box
                  style={{
                    paddingBottom: !network.isCorrectNetwork ? "8em" : "0"
                  }}
                >
                  <Header
                    account={account}
                    accountBalance={accountBalance}
                    accountBalanceLow={accountBalanceLow}
                    initAccount={initAccount}
                    rejectAccountConnect={rejectAccountConnect}
                    userRejectedConnect={userRejectedConnect}
                    accountValidated={accountValidated}
                    accountValidationPending={accountValidationPending}
                    rejectValidation={rejectValidation}
                    userRejectedValidation={userRejectedValidation}
                    validateAccount={validateAccount}
                    connectAndValidateAccount={connectAndValidateAccount}
                    modals={modals}
                    network={network}
                  />
  
                  <Flex m={3} justifyContent={'center'}>
                    <ConnectionBanner
                      currentNetwork={network.current.id}
                      requiredNetwork={this.config.requiredNetwork}
                      onWeb3Fallback={web3Fallback}
                    />
                  </Flex>
  
                  <Flex justifyContent="center" p={4}>
                    <Text width="400px">
                      This is a starter React dApp that uses the Rimble UI
                      component library to call methods on a smart contract
                      deployed to the Ethereum Rinkeby testnet.
                    </Text>
                  </Flex>
  
                  {this.state.route === "default" ? <PrimaryCard /> : null}
  
                  {this.state.route === "onboarding" ? (
                    <Web3Debugger
                      validBrowser={validBrowser}
                      userAgent={userAgent}
                      web3={web3}
                      account={account}
                      accountBalance={accountBalance}
                      accountBalanceLow={accountBalanceLow}
                      initAccount={initAccount}
                      rejectAccountConnect={rejectAccountConnect}
                      userRejectedConnect={userRejectedConnect}
                      accountValidated={accountValidated}
                      accountValidationPending={accountValidationPending}
                      rejectValidation={rejectValidation}
                      userRejectedValidation={userRejectedValidation}
                      validateAccount={validateAccount}
                      connectAndValidateAccount={connectAndValidateAccount}
                      modals={modals}
                      network={network}
                      transaction={transaction}
                    />
                  ) : null}
                  <InstructionsCard
                    showRoute={this.showRoute}
                    route={this.state.route}
                  />
                </Box>
              )}
            </RimbleWeb3.Consumer>
          </RimbleWeb3>
          <GlobalStyle />
        </ThemeProvider>
      );
    }
  }
  
  export default App;
  