Merge pull request #70 from celo-tools/1.3.6

- Fix proposal fetching bug
- Add ramp to funding options
- Upgrade walletconnect to 17.beta.3
- Rebrand account key to recovery phrase

electron/main.js

@@ -67,7 +67,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 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://relay.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'",
         ],
       },
     })

netlify/_headers

@@ -1,5 +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; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'
-  X-Frame-Options: DENY
+  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://relay.walletconnect.org; 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.3.5",
+  "version": "1.3.6",
   "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.3.5",
+  "version": "1.3.6",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "keywords": [
     "Celo",
@@ -38,7 +38,7 @@
     "@ledgerhq/hw-transport-webusb": "^5.51.1",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28",
     "@reduxjs/toolkit": "^1.6.1",
-    "@walletconnect/client": "2.0.0-beta.10",
+    "@walletconnect/client": "2.0.0-beta.17.3",
     "buffer": "^6.0.3",
     "electron-updater": "^4.3.9",
     "ethers": "^5.3.0",

src/app/logout/useLogoutModal.ts

@@ -17,7 +17,7 @@ export async function showLogoutModal(
   const answer = await showModalAsync({
     head: 'WALLET RESET WARNING',
     subHead: 'Are you sure you want to logout?',
-    body: 'All keys and information for ALL OF YOUR ACCOUNTS will be completely removed from this device. If you have local accounts, back up their Account Keys first.',
+    body: 'All keys and information for ALL OF YOUR ACCOUNTS will be completely removed from this device. If you have local accounts, back up their recovery (seed) phrase first.',
     actions: [
       { key: 'cancel', label: 'Cancel', color: Color.primaryWhite },
       { key: 'logout', label: 'Log me out', color: Color.primaryRed },

src/components/FundWalletModal.tsx

@@ -3,9 +3,13 @@ import Bittrex from 'src/components/icons/logos/bittrex.svg'
 import Coinbase from 'src/components/icons/logos/coinbase.svg'
 import Coinlist from 'src/components/icons/logos/coinlist.svg'
 import Okcoin from 'src/components/icons/logos/okcoin.svg'
+import Okex from 'src/components/icons/logos/okex.svg'
+import Ramp from 'src/components/icons/logos/ramp.svg'
 import Simplex from 'src/components/icons/logos/simplex.svg'
-import { ModalLinkGrid } from 'src/components/modal/ModalLinkGrid'
+import { Box } from 'src/components/layout/Box'
+import { ModalLinkGrid, SmallGridLink } from 'src/components/modal/ModalLinkGrid'
 import { useModal } from 'src/components/modal/useModal'
+import { RAMP_PROJECT_ID } from 'src/consts'
 
 export function useFundWalletModal() {
   const { showModalWithContent } = useModal()
@@ -19,12 +23,25 @@ export function useFundWalletModal() {
 }
 
 export function FundWalletModal({ address }: { address: string }) {
-  const links = [
+  const bigLinks = [
+    {
+      url: `https://buy.ramp.network/?hostAppName=CeloWallet&hostLogoUrl=https%3A%2F%2Fcelowallet.app%2Fstatic%2Ficon.png&defaultAsset=CELO&userAddress=${address}&hostApiKey=${RAMP_PROJECT_ID}`,
+      imgSrc: Ramp,
+      text: 'Ramp',
+      subText: 'No Fees!',
+    },
     {
       url: 'https://www.coinbase.com/earn/celo',
       imgSrc: Coinbase,
       text: 'Coinbase',
     },
+    {
+      url: `https://valoraapp.com/simplex?address=${address}`,
+      imgSrc: Simplex,
+      text: 'Simplex',
+    },
+  ]
+  const smallLinks = [
     {
       url: 'https://global.bittrex.com/Market/Index?MarketName=USD-CELO',
       imgSrc: Bittrex,
@@ -41,15 +58,24 @@ export function FundWalletModal({ address }: { address: string }) {
       text: 'Binance',
     },
     {
-      url: `https://valoraapp.com/simplex?address=${address}`,
-      imgSrc: Simplex,
-      text: 'Simplex',
+      url: 'https://www.okex.com/markets/spot-info/celo-usdt',
+      imgSrc: Okex,
+      text: 'Okex',
     },
     {
       url: 'https://coinlist.co/asset/celo',
       imgSrc: Coinlist,
       text: 'Coinlist',
     },
   ]
-  return <ModalLinkGrid links={links} />
+  return (
+    <div>
+      <ModalLinkGrid links={bigLinks} />
+      <Box align="center" justify="center" wrap margin="1em 0 1em 0">
+        {smallLinks.map((link, index) => (
+          <SmallGridLink link={link} key={`ModalLinkGridSm-link-${index}`} />
+        ))}
+      </Box>
+    </div>
+  )
 }

src/components/modal/ModalLinkGrid.tsx

@@ -3,8 +3,16 @@ import { Color } from 'src/styles/Color'
 import { mq } from 'src/styles/mediaQueries'
 import { Stylesheet } from 'src/styles/types'
 
+interface GridLink {
+  url: string
+  imgSrc: string
+  text: string
+  subText?: string
+  altText?: string
+}
+
 interface ModalLinkGridProps {
-  links: Array<{ url: string; imgSrc: string; text: string; altText?: string }>
+  links: Array<GridLink>
 }
 
 export function ModalLinkGrid({ links }: ModalLinkGridProps) {
@@ -18,19 +26,38 @@ export function ModalLinkGrid({ links }: ModalLinkGridProps) {
       wrap
     >
       {links.map((link, index) => (
-        <Box key={`ModalLinkGrid-link-${index}`} align="center" justify="center">
-          <a css={style.link} href={link.url} target="_blank" rel="noopener noreferrer">
-            <Box direction="column" align="center" justify="center" styles={style.linkContent}>
-              <img src={link.imgSrc} css={style.icon} alt={link.altText || link.text} />
-              <div>{link.text}</div>
-            </Box>
-          </a>
-        </Box>
+        <BigGridLink link={link} key={`ModalLinkGrid-link-${index}`} />
       ))}
     </Box>
   )
 }
 
+function BigGridLink({ link }: { link: GridLink }) {
+  return (
+    <Box align="center" justify="center">
+      <a css={style.link} href={link.url} target="_blank" rel="noopener noreferrer">
+        <Box direction="column" align="center" justify="center" styles={style.linkContent}>
+          <img src={link.imgSrc} css={style.icon} alt={link.altText || link.text} />
+          <div>{link.text}</div>
+          {link.subText && <div css={style.subText}>{link.subText}</div>}
+        </Box>
+      </a>
+    </Box>
+  )
+}
+
+export function SmallGridLink({ link }: { link: GridLink }) {
+  return (
+    <Box align="center" justify="center">
+      <a css={style.link} href={link.url} target="_blank" rel="noopener noreferrer">
+        <Box direction="column" align="center" justify="center" styles={styleSm.linkContent}>
+          <img src={link.imgSrc} css={styleSm.icon} alt={link.altText || link.text} />
+        </Box>
+      </a>
+    </Box>
+  )
+}
+
 const style: Stylesheet = {
   container: {
     maxWidth: '30em',
@@ -68,4 +95,34 @@ const style: Stylesheet = {
       width: '3em',
     },
   },
+  subText: {
+    fontSize: '0.8em',
+    color: Color.primaryGreen,
+    marginTop: '0.3em',
+  },
+}
+
+const styleSm: Stylesheet = {
+  linkContent: {
+    ...style.linkContent,
+    width: '2.8em',
+    height: '2.8em',
+    margin: '0 0.4em',
+    [mq[480]]: {
+      width: '2.9em',
+      height: '2.9em',
+      margin: '0 0.5em',
+    },
+    [mq[768]]: {
+      width: '3em',
+      height: '3em',
+      margin: '0 0.7em',
+    },
+  },
+  icon: {
+    width: '1.8em',
+    [mq[768]]: {
+      width: '2em',
+    },
+  },
 }

src/consts.ts

@@ -57,3 +57,5 @@ export const DONATION_ADDRESS = '0xE3791A4a231D026c9567BEDbAb977617f2900383' //
 
 export const GOVERNANCE_GITHUB_BASEURL =
   'https://api.github.com/repos/celo-org/governance/contents/CGPs/'
+
+export const RAMP_PROJECT_ID = 'jg2gy6y7o35np2w7npw9jnszaz962z3dxhpso4hq'

src/features/governance/fetchDescription.test.ts

@@ -1,17 +1,45 @@
 import { fetchProposalDescription } from 'src/features/governance/fetchDescription'
+import { Proposal, ProposalStage, VoteValue } from 'src/features/governance/types'
 
 // TODO these are causing flaky 403s when running in CI. Skipping for now
 xdescribe('fetchProposals', () => {
-  it('Fetches and processes as expected', async () => {
-    const prop1Desc = await fetchProposalDescription(
-      'https://github.com/celo-org/governance/blob/main/CGPs/cgp-0001.md'
-    )
+  const proposal: Proposal = {
+    id: '21',
+    timestamp: 123,
+    description: 'Test prop',
+    url: '',
+    stage: ProposalStage.Referendum,
+    votes: {
+      [VoteValue.Yes]: '1',
+      [VoteValue.No]: '0',
+      [VoteValue.Abstain]: '0',
+    },
+  }
+
+  it('Fetches and processes as expected for old format', async () => {
+    const prop1Desc = await fetchProposalDescription({
+      ...proposal,
+      id: '1',
+      url: 'https://github.com/celo-org/governance/blob/main/CGPs/cgp-0001.md',
+    })
     expect(prop1Desc).toBe('Enable validator elections, epoch rewards and carbon offsetting')
-    const prop21Desc = await fetchProposalDescription(
-      'https://github.com/celo-org/governance/blob/main/CGPs/cgp-0021.md'
-    )
+
+    const prop21Desc = await fetchProposalDescription({
+      ...proposal,
+      id: '21',
+      url: 'https://github.com/celo-org/governance/blob/main/CGPs/cgp-0021.md',
+    })
     expect(prop21Desc).toBe(
       'Update randomnessBlockRetentionWindow to Extend Attestation Expiration Duration'
     )
   })
+
+  it('Fetches and processes as expected for new format', async () => {
+    const prop35Desc = await fetchProposalDescription({
+      ...proposal,
+      id: '35',
+      url: 'https://github.com/celo-org/governance/blob/main/CGPs/cgp-0035.md',
+    })
+    expect(prop35Desc).toBe('Reduce the Epoch Rewards Community Fund share from 25% to 5%')
+  })
 })

src/features/governance/fetchDescription.ts

@@ -1,21 +1,24 @@
 import { GOVERNANCE_GITHUB_BASEURL } from 'src/consts'
+import { Proposal } from 'src/features/governance/types'
 import { logger } from 'src/utils/logger'
 
 // Putting these in a seperate file to faciliate testing for now
-export async function fetchProposalDescription(url: string) {
+export async function fetchProposalDescription(proposal: Proposal) {
   try {
-    if (!url) throw new Error('No url provided')
-    const parsed = new URL(url)
+    if (!proposal || !proposal.url) throw new Error('No url provided')
+    const parsed = new URL(proposal.url)
     if (parsed.protocol !== 'https:') throw new Error('Invalid url protocol')
 
     if (parsed.hostname === 'github.com') {
-      return fetchProposalDescriptionFromGithub(parsed)
+      const description = await fetchProposalDescriptionFromGithub(parsed)
+      if (!description) throw new Error('No description found')
+      return description
     } else {
       throw new Error('Only github based urls currently supported')
     }
   } catch (error) {
     logger.error('Failed to retrieve proposal description', error)
-    return null
+    return `Proposal #${proposal.id}`
   }
 }
 
@@ -38,8 +41,28 @@ async function fetchProposalDescriptionFromGithub(url: URL) {
 
   // TODO find a way to read just the first line if possible, don't actually need the whole file
   const text = await response.text()
+  const lines = text.split(/\r?\n/)
+  if (lines[0] === '---') {
+    return parseNewProposalFormat(lines)
+  } else {
+    return parseOldProposalFormat(lines[0])
+  }
+}
+
+function parseOldProposalFormat(line: string) {
   const descriptionRegex = /(.*): (.*)/
-  const desciptionMatches = text.match(descriptionRegex)
+  const desciptionMatches = line.match(descriptionRegex)
   if (desciptionMatches?.length !== 3) throw new Error('Unable to extract proposal description')
   return desciptionMatches[2].trim().replace(/(`|#)/gi, '')
 }
+
+function parseNewProposalFormat(lines: string[]) {
+  for (let i = 0; i < 15; i++) {
+    const line = lines[i]
+    const descriptionRegex = /title: (.*)/
+    const desciptionMatches = line.match(descriptionRegex)
+    if (desciptionMatches?.length !== 2) continue
+    return desciptionMatches[1].trim().replace(/(`|#)/gi, '')
+  }
+  throw new Error('Unable to extract proposal description')
+}

src/features/governance/fetchProposals.ts

@@ -95,7 +95,7 @@ export async function fetchCurrentProposals(): Promise<Proposal[]> {
     })
   }
 
-  const descriptionsP = proposals.map((p) => fetchProposalDescription(p.url))
+  const descriptionsP = proposals.map((p) => fetchProposalDescription(p))
   const descriptions = await Promise.all(descriptionsP)
   for (let i = 0; i < numProps; i++) {
     proposals[i].description = descriptions[i]

src/features/home/HomeScreenWarnings.tsx

@@ -71,8 +71,9 @@ function AccountKeyReminder() {
   const navigate = useNavigate()
   return (
     <div>
-      Reminder: Copy your <TextButton onClick={() => navigate('/wallet')}>Account Key</TextButton>{' '}
-      (seed phrase) to a safe place. Your key is the only way to recover your account.
+      Reminder: Copy your{' '}
+      <TextButton onClick={() => navigate('/wallet')}>Recovery Phrase</TextButton> (seed phrase) to
+      a safe place. Your key is the only way to recover your account.
     </div>
   )
 }

src/features/home/Tips.ts

@@ -10,16 +10,16 @@ const Tips = [
     'The CELO currency is unstable and limited, like Bitcoin; its value will change over time.',
   ],
   [
-    'To keep your account safe, keep a copy of your Account Key in a private place.',
+    'To keep your account safe, keep a copy of your recovery (seed) phrase in a private place.',
     'For even better security, consider using a Ledger hardware wallet.',
   ],
   [
-    "Your Account Address is public; it's like your username on the Celo network. Share it with your friends!",
-    'Your Account Key is a secret; always keep it private.',
+    "Your account address is public; it's like your username on the Celo network. Share it with your friends!",
+    'Your recovery (seed) phrase is a secret; always keep it private.',
   ],
   [
     'Your accounts can be imported in many places at once.',
-    'For example, you can import your Account Key into the Valora mobile app.',
+    'For example, you can import your recovery (seed) phrase into the Valora mobile app.',
   ],
   [
     'You can lock CELO to participate in Celo network elections and governance.',