Implement rebrand to Othello (#126)

* Implement rebrand to Othello

* Bump version to 1.9.0

* Fix param with build script

Author: jmrossy

FAQ.md

@@ -1,5 +1,7 @@
 # Frequently Asked Questions
 
+[What is the wallet called?](#what-is-the-wallet-called)
+
 [Where can the app be used?](#where-can-the-app-be-used)
 
 [Does it work on phones?](#does-it-work-on-phones)
@@ -14,11 +16,17 @@
 
 [Is Ledger supported?](#is-ledger-supported)
 
-[Can feature X be added?](#can-feature-x-be-added)
+## What is the wallet called?
+
+The original name for this wallet was just "Celo Wallet", but to avoid confusion it has been renamed to "Othello Wallet".
+
+## Who maintains this wallet?
+
+This wallet was created by [J M Rossy](https://twitter.com/RossyWrote). It is not currently under active development. Only security update will be released.
 
 ## Where can the app be used?
 
-The Celo Wallet can run in a modern browser (Chrome is recommended) or on your desktop (Mac, Windows, and Linux).
+It can run in a modern browser (Chrome is recommended) or on your desktop (Mac, Windows, and Linux).
 The desktop version has stricter security guarantees and is strongly recommended for large accounts.
 
 ## Does it work on phones?
@@ -27,11 +35,11 @@ Yes, the web version was designed from the ground-up to be lightweight and mobil
 
 ## Will it work with Valora wallets?
 
-Yes, you can use your Account Key (seed phrase) to import your account into the Celo Wallet, back into Valora, or use both at the same time.
+Yes, you can use your Account Key (seed phrase) to import your account into Othello, back into Valora, or use both at the same time.
 
 ## How is it different than Valora?
 
-The most obvious difference is platform: Valora runs on iOS and Android, whereas Celo Wallet runs in browsers and on desktop. More abstractly though, Valora is a social payments application whereas the Celo Wallet is just a tool. That's why Valora includes extra features around importing contacts, verifying phone numbers, finding friends, etc. In contrast, one of this wallet's design principles is to be minimal, meaning no analytics, no plugins, and no device permissions (except for Ledger access).
+The most obvious difference is platform: Valora runs on iOS and Android, whereas Othello runs in browsers and on desktop. More abstractly though, Valora is a social payments application whereas the Othello is just a tool. That's why Valora includes extra features around importing contacts, verifying phone numbers, finding friends, etc. In contrast, one of this wallet's design principles is to be minimal, meaning no analytics, no plugins, and no device permissions (except for Ledger access).
 
 ## Is the web version safe?
 

README.md

@@ -1,6 +1,8 @@
-# Celo Wallet For Web and Desktop
+# Othello Wallet
 
-A lightweight, self-sovereign wallet for the Celo network. Manage small accounts [on the web](https://celowallet.app) or large ones [on your desktop.](https://github.com/celo-tools/celo-web-wallet/releases) Fully compatible with Ledger hardware.
+A lightweight, self-sovereign wallet for the Celo network. Manage small accounts [on the web](https://celowallet.app) or large ones [on your desktop.](https://github.com/celo-tools/celo-web-wallet/releases).
+
+**Note**: This wallet is not currently under active development. Only security updates will be released.
 
 ## Desktop Downloads
 

electron/main.js

@@ -18,7 +18,7 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width: 1250,
     height: 760,
-    title: 'Celo Wallet',
+    title: 'Othello',
     webPreferences: {
       preload: false,
       nodeIntegration: true,

package-electron.json

@@ -1,9 +1,10 @@
 {
   "name": "celo-web-wallet",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "main": "main.js",
   "keywords": [
+    "Othello",
     "Celo",
     "wallet"
   ],

package.json

@@ -1,8 +1,9 @@
 {
   "name": "celo-web-wallet",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "keywords": [
+    "Othello",
     "Celo",
     "wallet"
   ],

scripts/build.sh

@@ -11,7 +11,7 @@ NETWORK=""
 ELECTRON=false
 VERCEL=false
 
-while getopts 'n:e:v' flag; do
+while getopts 'n:ev' flag; do
   case "${flag}" in
     n) NETWORK="$OPTARG" ;;
     e) ELECTRON=true ;;

src/app/AlertBanner.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import { XIcon } from 'src/components/icons/X'
+import { Box } from 'src/components/layout/Box'
+import { Color } from 'src/styles/Color'
+import { Stylesheet } from 'src/styles/types'
+
+export function AlertBanner() {
+  const [show, setShow] = useState(true)
+
+  if (!show) return null
+
+  return (
+    <div css={styles.container} onClick={() => setShow(false)}>
+      <Box align="center" justify="center" styles={styles.banner}>
+        <div>
+          Othello Wallet (formerly Celo Wallet) is a community-run project. For a wallet with more
+          features,{' '}
+          <a
+            href="https://valoraapp.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            css={styles.link}
+          >
+            try Valora
+          </a>
+          .
+        </div>
+        <div css={styles.icon}>
+          <XIcon width={18} height={18} color={Color.primaryBlack} />
+        </div>
+      </Box>
+    </div>
+  )
+}
+
+const styles: Stylesheet = {
+  container: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    cursor: 'pointer',
+    '& div': {
+      fontWeight: 500,
+    },
+    ':hover': { opacity: 0.9 },
+  },
+  banner: {
+    backgroundColor: Color.primaryGold,
+    width: '100%',
+    padding: '0.3em 1.5em 0.3em 0.5em',
+  },
+  link: {
+    color: Color.primaryBlack,
+    textDecoration: 'underline',
+  },
+  icon: {
+    paddingTop: '0.2em',
+    marginLeft: '1em',
+  },
+}

src/app/App.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom'
+import { AlertBanner } from 'src/app/AlertBanner'
 import { BadBrowserScreen } from 'src/app/BadBrowserScreen'
 import { useDeepLinkHandler } from 'src/app/deepLink'
 import { ErrorBoundary } from 'src/app/FailScreen'
@@ -77,6 +78,7 @@ export const App = () => {
       <Router>
         <ModalProvider>
           <DeepLinkHandler />
+          <AlertBanner />
           <UpdateBanner />
           <Routes>
             <Route path="/" element={<HomeNavigator />}>

src/components/footer/AboutWallet.tsx

@@ -29,8 +29,10 @@ function AboutWalletModal() {
   return (
     <Box direction="column" align="center" styles={style.container}>
       <p css={style.text}>
-        The Celo Wallet is a free, open source wallet for the Celo network. It was created by{' '}
-        <TextLink link="https://twitter.com/RossyWrote">J M Rossy</TextLink>
+        Othello (formerly Celo Wallet) is a free, open source wallet for the Celo network. It was
+        created by <TextLink link="https://twitter.com/RossyWrote">J M Rossy</TextLink>. It is not
+        affiliated with the Celo Foundation and is not currently under active development. Only
+        security updates will be made.
       </p>
       <p css={style.text}>
         The source code for the wallet can be found{' '}