Merge pull request #92 from celo-tools/1.6.0

1.6.0 - domain resolution, transfer improvements, staking fixes

.github/workflows/bundle-desktop.yml

@@ -39,6 +39,9 @@ jobs:
       - name: Build with webpack for electron
         shell: bash
         run: ./scripts/build.sh -n Mainnet -e
+        env:
+          ALCHEMY_KEY: ${{ secrets.ALCHEMY_KEY }}
+          WALLET_CONNECT_KEY: ${{ secrets.WALLET_CONNECT_KEY }}
 
       # Mac builds on Github are very flaky, disabling for now as they're easy to make locally anyway
       # - name: Build on Mac

.github/workflows/publish-desktop.yml

@@ -32,6 +32,9 @@ jobs:
       - name: Build with webpack for electron
         shell: bash
         run: ./scripts/build.sh -n Mainnet -e
+        env:
+          ALCHEMY_KEY: ${{ secrets.ALCHEMY_KEY }}
+          WALLET_CONNECT_KEY: ${{ secrets.WALLET_CONNECT_KEY }}
 
       - name: Build on Mac 
         run: yarn electron-builder --mac --publish always

.github/workflows/publish-mac.yml

@@ -21,6 +21,9 @@ jobs:
       - name: Build with webpack for electron
         shell: bash
         run: ./scripts/build.sh -n Mainnet -e
+        env:
+          ALCHEMY_KEY: ${{ secrets.ALCHEMY_KEY }}
+          WALLET_CONNECT_KEY: ${{ secrets.WALLET_CONNECT_KEY }}
 
       - name: Build on Mac 
         run: yarn electron-builder --mac --publish always || yarn electron-builder --mac --publish always

.github/workflows/publish-ubuntu.yml

@@ -21,6 +21,9 @@ jobs:
       - name: Build with webpack for electron
         shell: bash
         run: ./scripts/build.sh -n Mainnet -e
+        env:
+          ALCHEMY_KEY: ${{ secrets.ALCHEMY_KEY }}
+          WALLET_CONNECT_KEY: ${{ secrets.WALLET_CONNECT_KEY }}
 
       - name: Install deps for Linux
         run: sudo apt-get update && sudo apt-get install libudev-dev libusb-1.0-0-dev

.github/workflows/publish-windows.yml

@@ -21,6 +21,9 @@ jobs:
       - name: Build with webpack for electron
         shell: bash
         run: ./scripts/build.sh -n Mainnet -e
+        env:
+          ALCHEMY_KEY: ${{ secrets.ALCHEMY_KEY }}
+          WALLET_CONNECT_KEY: ${{ secrets.WALLET_CONNECT_KEY }}
 
       - name: Build on Windows
         run: yarn electron-builder --win --publish always || yarn electron-builder --win --publish always

electron/main.js

@@ -80,7 +80,7 @@ function setCspHeader() {
         ...details.responseHeaders,
         // Should match header in /netlify/_headers and build.sh
         'Content-Security-Policy': [
-          "default-src 'self'; script-src 'self' 'sha256-a0xx6QQjQFEl3BVHxY4soTXMFurPf9rWKnRLQLOkzg4='; connect-src 'self' https://*.celowallet.app https://*.celo.org wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://api.github.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'",
+          "default-src 'self'; script-src 'self' 'sha256-a0xx6QQjQFEl3BVHxY4soTXMFurPf9rWKnRLQLOkzg4='; connect-src 'self' https://*.celowallet.app https://*.celo.org wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://api.github.com https://eth-mainnet.alchemyapi.io https://unstoppabledomains.g.alchemy.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'",
         ],
       },
     })

netlify/_headers

@@ -1,6 +1,6 @@
 # Configure Netlify custom headers
 # CSP header should match electron copy in /electron/main.js
 /*
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-a0xx6QQjQFEl3BVHxY4soTXMFurPf9rWKnRLQLOkzg4='; connect-src 'self' https://*.celowallet.app https://*.celo.org wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-a0xx6QQjQFEl3BVHxY4soTXMFurPf9rWKnRLQLOkzg4='; connect-src 'self' https://*.celowallet.app https://*.celo.org wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://eth-mainnet.alchemyapi.io https://unstoppabledomains.g.alchemy.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'
   X-Frame-Options: DENY
   X-Content-Type-Options: nosniff

package-electron.json

@@ -1,6 +1,6 @@
 {
   "name": "celo-web-wallet",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "main": "main.js",
   "keywords": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "celo-web-wallet",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "keywords": [
     "Celo",

spec/helpers/global.js

@@ -1,6 +1,8 @@
 global.__DEBUG__ = true
 global.__IS_ELECTRON__ = false
 global.__VERSION__ = '1.0.0'
+global.__ALCHEMY_KEY__ = 'fakeKey'
+global.__WALLET_CONNECT_KEY__ = 'fakeKey'
 global.fetch = require('node-fetch')
 
 var localStorage = {}

src/app/App.tsx

@@ -115,7 +115,7 @@ export const App = () => {
 
             <Route path="change-pin" element={<ChangePasswordScreen />} />
 
-            {/* To faciliatate testing */}
+            {/* To facilitate testing */}
             {/* <Route path="/dev/home" element={<HomeScreen />} />
             <Route path="/dev/modals" element={<ModalTestScreen />} />
             <Route path="/dev/tools" element={<DevTools />} /> */}

src/app/NotFoundScreen.tsx

@@ -17,13 +17,13 @@ export function NotFoundScreen() {
 
   return (
     <OnboardingScreenFrame>
-      <Fade show={true}>
+      <Fade show={true} duration="2s">
         <Box direction="column" align="center">
           <h1 css={style.h1}>This page could not be found, sorry!</h1>
-          <img width="200em" src={NotFoundIcon} alt="Not Found" css={style.img} />
+          <img width="160em" src={NotFoundIcon} alt="Not Found" css={style.img} />
           <h3 css={style.h3}>
             Please check the URL or go{' '}
-            <Link to="/" css={{ color: Color.primaryBlack }}>
+            <Link to="/" css={style.linkHome}>
               back to home
             </Link>
             .
@@ -46,4 +46,7 @@ const style: Stylesheet = {
   img: {
     margin: '2.5em',
   },
+  linkHome: {
+    color: Color.primaryBlack,
+  },
 }

src/blockchain/provider.ts

@@ -29,7 +29,11 @@ export async function connectToProvider() {
 async function connectToJsonRpcProvider(url: string) {
   try {
     logger.info(`Connecting to json rpc provider: ${url}`)
-    provider = new StaticCeloProvider(url, { name: 'Celo', chainId: config.chainId })
+    provider = new StaticCeloProvider(url, {
+      name: 'Celo',
+      chainId: config.chainId,
+      ensAddress: config.nomspaceRegistry,
+    })
     for (let i = 0; i < 3; i++) {
       const blockAndNetworkP = Promise.all([provider.getBlock('latest'), provider.getNetwork()])
       const blockAndNetwork = await promiseTimeout(blockAndNetworkP, 1000)

src/components/StackedBarChart.tsx

@@ -24,11 +24,11 @@ export function StackedBarChart(props: Props) {
     <div>
       <Box direction="row" align="center" styles={{ ...style.container, width }}>
         {data.map((d, i) => {
-          const width = Math.round((d.value / total.value) * 100) + '%'
+          const barWidth = Math.round((d.value / total.value) * 100) + '%'
           return (
             <div
               key={`stacked-bar-area-${i}`}
-              css={{ ...style.element, width, background: d.color }}
+              css={{ ...style.element, width: barWidth, background: d.color }}
             ></div>
           )
         })}

src/components/animation/Fade.tsx

@@ -1,7 +1,12 @@
 import { PropsWithChildren, useEffect, useState } from 'react'
 
-export function Fade(props: PropsWithChildren<{ show: boolean }>) {
-  const { show, children } = props
+interface Props {
+  show: boolean
+  duration?: string
+}
+
+export function Fade(props: PropsWithChildren<Props>) {
+  const { show, duration, children } = props
   const [render, setRender] = useState(show)
 
   useEffect(() => {
@@ -15,7 +20,7 @@ export function Fade(props: PropsWithChildren<{ show: boolean }>) {
   return render ? (
     <div
       css={{
-        animation: `${show ? 'fadeIn' : 'fadeOut'} 1s`,
+        animation: `${show ? 'fadeIn' : 'fadeOut'} ${duration ?? '1s'}`,
         position: 'relative',
       }}
       onAnimationEnd={onAnimationEnd}

src/components/buttons/CloseButton.tsx

@@ -2,16 +2,15 @@ import {
   TransparentIconButton,
   TransparentIconButtonProps,
 } from 'src/components/buttons/TransparentIconButton'
-import CloseIcon from 'src/components/icons/close.svg'
+import { XIcon } from 'src/components/icons/X'
 
 export function CloseButton(props: Omit<TransparentIconButtonProps, 'icon'>) {
   const { onClick, styles, iconStyles, margin, title, color } = props
 
   return (
     <TransparentIconButton
-      icon={CloseIcon}
+      icon={<XIcon styles={iconStyles} />}
       styles={styles}
-      iconStyles={iconStyles}
       color={color}
       margin={margin}
       onClick={onClick}

src/components/buttons/TransparentIconButton.tsx

@@ -1,37 +1,47 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
 import { transparentButtonStyles } from 'src/components/buttons/Button'
 import { Styles } from 'src/styles/types'
 
 export interface TransparentIconButtonProps {
   icon: string | ReactElement
   onClick: () => void
-  styles?: Styles
-  iconStyles?: Styles
-  margin?: string | number
   title?: string
+  margin?: string | number
   color?: 'light' | 'dark'
+  opacity?: number
+  styles?: Styles // button style overrides
+  iconStyles?: Styles // img style overrides
 }
 
 export function TransparentIconButton(props: TransparentIconButtonProps) {
-  const { icon, onClick, styles, iconStyles, margin, title, color } = props
-  const primaryStyle = color === 'light' ? defaultStyleLight : defaultStyle
+  const { icon, onClick, title, margin, color, opacity, styles, iconStyles } = props
+
+  const buttonStyle = useMemo(() => {
+    const defaults = color === 'light' ? defaultStyleLight : defaultStyle
+    return {
+      ...defaults,
+      opacity: opacity ?? defaults.opacity,
+      margin,
+      ...styles,
+    }
+  }, [margin, color, opacity, styles])
 
   return (
-    <button css={{ ...primaryStyle, margin, ...styles }} onClick={onClick} title={title}>
+    <button css={buttonStyle} onClick={onClick} title={title} type="button">
       {typeof icon === 'string' ? <img src={icon} css={iconStyles} /> : icon}
     </button>
   )
 }
 
-const base: Styles = {
+const baseStyle: Styles = {
   ...transparentButtonStyles,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 }
 
 const defaultStyle: Styles = {
-  ...base,
+  ...baseStyle,
   opacity: 0.9,
   ':hover': {
     filter: 'brightness(2.5)',
@@ -42,7 +52,8 @@ const defaultStyle: Styles = {
 }
 
 const defaultStyleLight: Styles = {
-  ...base,
+  ...baseStyle,
+  opacity: 1,
   filter: 'brightness(6)',
   ':hover': {
     filter: 'brightness(5)',

src/components/icons/X.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react'
+import { Color } from 'src/styles/Color'
+import { Styles } from 'src/styles/types'
+
+interface Props {
+  width?: string | number
+  height?: string | number
+  color?: string
+  styles?: Styles
+}
+
+function _XIcon({ width, height, color, styles }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={width ?? 24}
+      height={height ?? 24}
+      css={styles}
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path
+        fill={color ?? Color.primaryBlack}
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+      />
+    </svg>
+  )
+}
+
+export const XIcon = memo(_XIcon)

src/components/input/AmountAndCurrencyInput.tsx

@@ -62,7 +62,7 @@ export const AmountAndCurrencyInput = (props: Props) => {
     [tokens]
   )
 
-  const renderDropdownValue = useCallback(
+  const renderSelectValue = useCallback(
     (value: string) => {
       const option = selectOptions.find((o) => o.display === value)
       if (!option) return null
@@ -91,8 +91,8 @@ export const AmountAndCurrencyInput = (props: Props) => {
         options={selectOptions}
         placeholder="Currency"
         inputStyles={style.token}
+        renderSelectValue={renderSelectValue}
         renderDropdownOption={renderDropdownOption}
-        renderDropdownValue={renderDropdownValue}
         {...errors[selectName]}
       />
       <NumberInput