Using React Auth Wrapper

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const provider = new AuthProvider(process.env.REACT_APP_ARCANA_APP_ID); //See SDK Reference Guide for optional parameters

root.render(
  <StrictMode>
    <ProvideAuth provider={provider}>
      <App />
    </ProvideAuth>
  </StrictMode>
);

import React from "react";
import { Auth } from "@arcana/auth-react";
import { Button } from "./components";
import styled from "styled-components";
import "./styles.css";

const Wrapper = styled.div`
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px;
  display: flex;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

const Section = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  > * {
    &:not(:first-child) {
      margin-top: 20px;
    }
  }
`;

const LeftSection = styled.div`
  width: 20%;
  margin: 0 auto;
  @media (max-width: 768px) {
    width: 100%;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid white;
  }
`;

const RightSection = styled.div`
  width: 78%;
  margin: 0 auto;
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const Heading = styled.h2`
  color: white;
  font-family: "Sora", sans-serif;
  text-align: center;
`;

export default function App() {
  const [theme, setTheme] = React.useState("light");
  const [externalWallet, showExternalWallet] = React.useState(false);
  return (
    <Wrapper>
      <LeftSection>
        <Section>
          <Heading>Theme</Heading>
          <Button onClick={() => setTheme("light")}>Light mode</Button>
          <br />
          <Button onClick={() => setTheme("dark")}>Dark mode</Button>
        </Section>
        <Section>
          <Heading>External Wallet</Heading>
          <Button onClick={() => showExternalWallet(true)}>Show</Button>
          <br />
          <Button onClick={() => showExternalWallet(false)}>Hide</Button>
        </Section>
      </LeftSection>
      <RightSection>
        <Auth externalWallet={externalWallet} theme={theme} />
      </RightSection>
    </Wrapper>
  );
}