Redesign ethers (#142)

Add Dark theme for bOS redesign.
NearSocial · Feb 14, 2023 · 4901de3 · 4901de3
1 parent 07c66d3
commit 4901de3
Show file tree

Hide file tree

Showing 18 changed files with 152 additions and 134 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "homepage": "/",
   "private": true,
   "dependencies": {
@@ -14,9 +14,9 @@
     "@near-wallet-selector/near-wallet": "^7.4.0",
     "@near-wallet-selector/neth": "^7.4.0",
     "@near-wallet-selector/sender": "^7.4.0",
-    "@web3-onboard/core": "^2.13.1",
-    "@web3-onboard/injected-wallets": "^2.6.0",
-    "@web3-onboard/react": "^2.5.5",
+    "@web3-onboard/core": "^2.15.0",
+    "@web3-onboard/injected-wallets": "^2.7.0",
+    "@web3-onboard/react": "^2.6.2",
     "acorn": "^8.8.0",
     "acorn-jsx": "^5.3.2",
     "big.js": "^6.1.1",

diff --git a/public/index.html b/public/index.html
@@ -7,24 +7,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="Social data protocol built on NEAR"
+      content="Welcome to the future of decentralized front-ends with BOS - the blockchain-based platform-as-a-service that's aims to make Web 3.0 more accessible for all. "
     />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@NearSocial_">
-    <meta name="twitter:image" content="https://near.social/assets/logo.png">
-    <meta property="og:image" content="https://near.social/assets/logo.png">
+    <meta name="twitter:image" content="https://bos.gg/assets/logo.png">
+    <meta property="og:image" content="https://bos.gg/assets/logo.png">
     <meta property="og:type" content="website">
-    <meta property="og:title" content="Near Social" />
-    <meta property="og:description" content="Social data protocol built on NEAR" />
+    <meta property="og:title" content="Blockchain Operating System (BOS)" />
+    <meta property="og:description" content="Welcome to the future of decentralized front-ends with BOS - the blockchain-based platform-as-a-service that's aims to make Web 3.0 more accessible for all. " />
     <link rel="apple-touch-icon" href="favicon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="manifest.json" />
-    <title>Near Social</title>
-    <script defer data-domain="near.social" src="https://plausible.io/js/script.hash.js"></script>
-    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }; window.analytics = function() { window.plausible(...arguments) }</script>
+    <title>Blockchain Operating System (BOS)</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Near Social",
-  "name": "Near Social",
+  "short_name": "BOS",
+  "name": "Blockchain Operating System (BOS)",
   "icons": [
     {
       "src": "favicon.png",
@@ -10,6 +10,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#333333",
-  "background_color": "#ffffff"
+  "theme_color": "#ffffff",
+  "background_color": "#000000"
 }
diff --git a/src/App.scss b/src/App.scss
@@ -1,9 +1,25 @@
+$primary: #ffffff;
+$danger: #ff4136;
+$body-bg: #000;
+$body-color: #eee;
+@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&family=Silkscreen&display=swap');
+$dark: #eee;
+$light: #222;
+$font-family-sans-serif: 'IBM Plex Mono', monospace;
+$font-family-monospace: 'IBM Plex Mono', monospace;
+$component-active-color: #000;
+
 @import "bootstrap";
 
 body, html {
   -webkit-font-smoothing: antialiased;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Silkscreen', serif;
+}
+
 .pointer {
   cursor: pointer;
 }

diff --git a/src/components/ethers/Web3ConnectButton.js b/src/components/ethers/Web3ConnectButton.js
@@ -7,13 +7,14 @@ export default function Web3ConnectButton() {
   return (
     <div>
       <button
-        className={`btn me-3 ${
-          connecting || wallet ? "btn-outline-light" : "btn-primary"
+        className={`btn ms-3 ${
+          connecting || wallet ? "btn-outline-dark" : "btn-outline-primary"
         }`}
         disabled={connecting}
         onClick={() => (wallet ? disconnect(wallet) : connect())}
+        style={wallet ? { marginRight: "317px" } : {}}
       >
-        Web3 {connecting ? "connecting" : wallet ? "disconnect" : "Connect"}
+        {connecting ? "Connecting" : wallet ? "Disconnect" : "Connect Wallet"}
       </button>
     </div>
   );

diff --git a/src/components/navigation/Logotype.js b/src/components/navigation/Logotype.js
diff --git a/src/components/navigation/NavigationButton.js b/src/components/navigation/NavigationButton.js
@@ -8,6 +8,7 @@ const StyledNavigationButton = styled.div`
     font-size: 16px;
     padding: 10px;
     border-radius: 8px;
+    font-family: "Silkscreen", serif;
     font-weight: var(--font-weight-bold);
     height: 40px;
     display: flex;

diff --git a/src/components/navigation/NavigationWrapper.js b/src/components/navigation/NavigationWrapper.js
@@ -3,20 +3,10 @@ import { DesktopNavigation } from "./desktop/DesktopNavigation";
 import { MobileNavigation } from "./mobile/MobileNavigation";
 
 export function NavigationWrapper(props) {
-  const [matches, setMatches] = useState(
-    window.matchMedia("(min-width: 992px)").matches
-  );
-
-  useEffect(() => {
-    window
-      .matchMedia("(min-width: 992px)")
-      .addEventListener("change", (e) => setMatches(e.matches));
-  }, []);
   return (
     <>
-      {matches && <DesktopNavigation {...props} />}
-      {!matches && <MobileNavigation {...props} />}
-      <div style={{ height: "100px" }} />
+      <DesktopNavigation {...props} />
+      <div style={{ height: "70px" }} />
     </>
   );
 }
diff --git a/src/components/navigation/desktop/DesktopNavigation.js b/src/components/navigation/desktop/DesktopNavigation.js
@@ -27,7 +27,7 @@ const StyledNavigation = styled.div`
     }
   }
 
-  .container {
+  .container-fluid {
     display: flex;
     align-items: center;
 
@@ -60,34 +60,21 @@ const StyledNavigation = styled.div`
 export function DesktopNavigation(props) {
   return (
     <StyledNavigation>
-      <div className="container">
+      <div className="container-fluid">
         <Link to="/" className="logo-link">
           <Logotype />
         </Link>
         <div className="navigation-section">
           <NavigationButton route="/">Home</NavigationButton>
-          <NavigationButton route="/edit">Create</NavigationButton>
+          <NavigationButton route="/edit">Editor</NavigationButton>
           <NavigationButton href="https://thewiki.near.page/near.social_docs">
             Documentation
             <ArrowUpRight />
           </NavigationButton>
         </div>
         <div className="user-section">
+          <DevActionsDropdown {...props} />
           <Web3ConnectButton />
-          {!props.signedIn && (
-            <SignInButton onSignIn={() => props.requestSignIn()} />
-          )}
-          {props.signedIn && (
-            <>
-              <DevActionsDropdown {...props} />
-              <NotificationWidget
-                notificationButtonSrc={
-                  props.NearConfig.widgets.notificationButton
-                }
-              />
-              <UserDropdown {...props} />
-            </>
-          )}
         </div>
       </div>
     </StyledNavigation>

diff --git a/src/components/navigation/desktop/DevActionsDropdown.js b/src/components/navigation/desktop/DevActionsDropdown.js
@@ -105,7 +105,7 @@ export function DevActionsDropdown(props) {
         </button>
         <ul className="dropdown-menu" aria-labelledby="dropdownMenu2222">
           {props.widgetSrc?.edit && (
-            <li>
+            <li className="text-nowrap">
               <Link to={`/edit/${props.widgetSrc?.edit}`}>
                 <Fork />
                 {props.widgetSrc.edit.startsWith(`${account.accountId}/widget/`)
@@ -115,7 +115,7 @@ export function DevActionsDropdown(props) {
             </li>
           )}
           {props.widgetSrc?.view && (
-            <li>
+            <li className="text-nowrap">
               <Link
                 to={`/${props.NearConfig.widgets.viewSource}?src=${props.widgetSrc?.view}`}
               >

diff --git a/src/components/navigation/desktop/EditorSignIn.js b/src/components/navigation/desktop/EditorSignIn.js
@@ -0,0 +1,11 @@
+import { SignInButton } from "../SignInButton";
+import { UserDropdown } from "./UserDropdown";
+import React from "react";
+
+export default function EditorSignIn(props) {
+  return props.signedIn ? (
+    <UserDropdown {...props} />
+  ) : (
+    <SignInButton onSignIn={() => props.requestSignIn()} />
+  );
+}
diff --git a/src/data/ethersProvider.js b/src/data/ethersProvider.js
@@ -16,27 +16,46 @@ export const onboard = init({
   wallets: [injected],
   chains: [
     {
-      id: "0x1",
+      id: 1,
       token: "ETH",
       label: "Ethereum Mainnet",
       rpcUrl: "https://rpc.ankr.com/eth",
     },
+    {
+      id: 3,
+      token: "ETH",
+      label: "Ropsten - Ethereum Testnet",
+      rpcUrl: "https://rpc.ankr.com/eth_ropsten",
+    },
+    {
+      id: 5,
+      token: "ETH",
+      label: "Goerli - Ethereum Testnet",
+      rpcUrl: "https://rpc.ankr.com/eth_goerli",
+    },
     {
       id: "0x4e454152",
       token: "ETH",
       label: "Aurora Mainnet",
       rpcUrl: "https://mainnet.aurora.dev",
     },
+    {
+      id: 137,
+      token: "MATIC",
+      label: "Matic Mainnet",
+      rpcUrl: "https://rpc.ankr.com/polygon",
+    },
   ],
   appMetadata: {
-    name: "NEAR Discovery",
-    icon: "<svg width=\"30\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"logotype\"><path d=\"M9.55396 20.518L2 13.009L9.55396 5.5\" stroke=\"#3D7FFF\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M19.536 5.5L27 13.009L19.536 20.518\" stroke=\"#3D7FFF\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></path></svg>",
-    description: "Decentralized Frontends hosted on a NEAR Blockchain"
+    name: "bOS",
+    icon: '<svg width="30" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="logotype"><path d="M9.55396 20.518L2 13.009L9.55396 5.5" stroke="#3D7FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.536 5.5L27 13.009L19.536 20.518" stroke="#3D7FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></path></svg>',
+    description: "Blockchain Operating System",
   },
+  theme: "dark",
   containerElements: {
-     // connectModal: '#near-social-navigation-bar',
-     // accountCenter: '#near-social-navigation-bar'
-  }
+    // connectModal: '#near-social-navigation-bar',
+    // accountCenter: "#near-social-web3-account",
+  },
 });
 
 export const useEthersProvider = singletonHook(defaultEthersProvider, () => {

diff --git a/src/index.css b/src/index.css
@@ -12,5 +12,7 @@
   --font-weight-bold: 600;
 
   /* For web3 onboard */
-  --account-center-position-top: 60px;
+  --account-center-z-index: 1070;
+  --account-center-position-top: -10px;
+    --account-center-position-right: -10px;
 }
diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js
@@ -12,6 +12,7 @@ import { Nav, OverlayTrigger, Tooltip } from "react-bootstrap";
 import RenameModal from "../components/Editor/RenameModal";
 import OpenModal from "../components/Editor/OpenModal";
 import { useAccountId } from "../data/account";
+import EditorSignIn from "../components/navigation/desktop/EditorSignIn";
 
 const StorageDomain = {
   page: "editor",
@@ -70,7 +71,7 @@ export default function EditorPage(props) {
 
   const [tab, setTab] = useState(Tab.Editor);
   const [layout, setLayoutState] = useState(
-    ls.get(EditorLayoutKey) || Layout.Tabs
+    ls.get(EditorLayoutKey) || Layout.Split
   );
 
   const setLayout = useCallback(
@@ -284,11 +285,6 @@ export default function EditorPage(props) {
       } else {
         loadFile(widgetSrc);
       }
-      analytics("edit", {
-        props: {
-          widget: widgetSrc,
-        },
-      });
       history.replace(`/edit/`);
     } else if (path === undefined) {
       if (files.length === 0) {
@@ -557,6 +553,7 @@ export default function EditorPage(props) {
                   <Editor
                     value={code}
                     path={widgetPath}
+                    theme="vs-dark"
                     defaultLanguage="javascript"
                     onChange={(code) => updateCode(path, code)}
                     wrapperProps={{
@@ -598,11 +595,15 @@ export default function EditorPage(props) {
                     </a>
                   )}
                 </div>
+                <div className="mb-3">
+                  <EditorSignIn {...props} />
+                </div>
               </div>
               <div className={`${tab === Tab.Props ? "" : "visually-hidden"}`}>
                 <div className="form-control" style={{ height: "70vh" }}>
                   <Editor
                     value={widgetProps}
+                    theme="vs-dark"
                     defaultLanguage="json"
                     onChange={(props) => setWidgetProps(props)}
                     wrapperProps={{

diff --git a/src/pages/EmbedPage.js b/src/pages/EmbedPage.js
@@ -20,14 +20,6 @@ export default function EmbedPage(props) {
     );
   }, [query]);
 
-  useEffect(() => {
-    analytics("embed", {
-      props: {
-        widget: src,
-      },
-    });
-  }, [src]);
-
   return (
     <div className="d-inline-block position-relative overflow-hidden">
       <Widget key={src} src={src} props={widgetProps} />{" "}

diff --git a/src/pages/ViewPage.js b/src/pages/ViewPage.js
@@ -29,21 +29,8 @@ export default function ViewPage(props) {
               view: src,
             }
       );
-      analytics("view", {
-        props: {
-          widget: src,
-        },
-      });
     }, 1);
   }, [src, query, setWidgetSrc]);
 
-  return (
-    <div className="container">
-      <div className="row">
-        <div className="d-inline-block position-relative overflow-hidden">
-          <Widget key={src} src={src} props={widgetProps} />{" "}
-        </div>
-      </div>
-    </div>
-  );
+  return <Widget key={src} src={src} props={widgetProps} />;
 }