Introduce ads (#841)

* Update chakra imports

* Update AspectRadio

* Update Skeleton

* Update Profile screen

* Update bordered radio variant

Remove testing stubs

* Update Flips screens

* Update Contacts screen

* Update Voting list screen

* Update voting view screen

* Update settings components

* Update voting dialogs

* Update Prize pool icon

* Add basic Ad screens

* Add Ad edit screen

Add dexie db

* Make ads deployable

* Review and burn ads

* Add pb models

* Move to ad drawers

* Move Add stake drawer to ads

* Remove unused pb code

Fix linting errors

* Set width for onboarding mining popover

* Update icons

* Update Profile --> Home

* Add update Home components

* Remove outdated profile penalty tag

Nail component styles

* Render popover w/ display none is not open

Nail styles

* Update flip editor arrow helpers position
Flip wallet tx icons

* Add Publish flip drawer
Update flip styles

* Update staking APY calculation

* Add validation ads

* Nail validation ad styles

* Update voting drawer footers

* Sort ads by targeting score

* Remove truncating oracle desc

* Update ad drawer styles

Handle loading ad offers

* Remove ad drawer tester

* Update image search styles

* Rework SendDna form

* Nail wallet ts list styles

* Trim long ad url

* Handle flips w/out noise

* Update dayjs package

* Reset timers on duration change
Update test cases w/ new home route

* Show estimatedTerminationTime for Termination date

* Batch read ad contract data

* Skip Sync screen when hardfork
Nail hardfork styles

* Hide overflowing links

* Allow setting owner fee for ad voting

* Refetch identity after adding ad

* Add validation ads animation

* Nail Review ad drawer styles

* Update Bad flip dialog styles

* Consider rewardsFund when creating ad voting

* Check for images before protecting

* Enable flip noise conditionally

* Adjust flip noise feature flagging

* Check for voting result before persisting

* Throw when incorrect dna send params

* Respect FLIP_NOISE_EPOCH_START env

* Skip animations if no ads

* Refactor hooks and util fns

* Persist and restore validation reports as the Set

* Truncate ad links

* Rework handling flip noise

* Handle flip mining

* Fix APY calculation

* Fix lint

* Check FLIP_NOISE_EPOCH_START for null

* Truncate ad link in create campaign drawer

* Return ad target in useProfileAds

* Adjust ad offer list styles

Nail validation ad styles

* Add Age, Stake for nullish targeting

* Rotate validation nav buttons

* Workaround popover inset not being supported

* Format oracle prize pool with 4 fraction digits
Expose single useFormatDna hook

Nail onboarding popover styles

Co-authored-by: ridenaio <[email protected]>

.eslintignore

@@ -1,4 +1,4 @@
 renderer/.next
 renderer/out
 **/dist
-renderer/shared/proto
+**/shared/models/proto/**

.testcafe-electron-rc

@@ -1,4 +1,4 @@
 {
-  "mainWindowUrl": "http://localhost:8000/profile",
+  "mainWindowUrl": "http://localhost:8000/home",
   "appPath": "./"
 }

main/index.js

@@ -99,7 +99,7 @@ const createMainWindow = () => {
     show: false,
   })
 
-  loadRoute(mainWindow, 'profile')
+  loadRoute(mainWindow, 'home')
 
   // Protocol handler for win32 and linux
   // eslint-disable-next-line no-cond-assign
@@ -592,7 +592,7 @@ ipcMain.on('node-log', ({sender}, message) => {
 })
 
 ipcMain.on('reload', () => {
-  loadRoute(mainWindow, 'dashboard')
+  loadRoute(mainWindow, 'home')
 })
 
 ipcMain.on('showMainWindow', () => {

main/preload.js

@@ -53,6 +53,7 @@ process.once('loaded', () => {
     BUMP_EXTRA_FLIPS: process.env.BUMP_EXTRA_FLIPS,
     FINALIZE_FLIPS: process.env.FINALIZE_FLIPS,
     INDEXER_URL: process.env.INDEXER_URL,
+    FLIP_NOISE_EPOCH_START: process.env.FLIP_NOISE_EPOCH_START,
   }
 
   global.toggleFullScreen = () => {

package.json

@@ -89,7 +89,6 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^1.0.0",
-    "framer-motion": "^4.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@react-hook/hover": "^4.0.0",
@@ -101,6 +100,7 @@
     "color-convert": "^2.0.1",
     "dayjs": "^1.9.6",
     "dequal": "^1.0.0",
+    "dexie": "^3.2.2",
     "duckduckgo-images-api": "^1.0.5",
     "electron-is-dev": "^1.0.1",
     "electron-next": "^3.1.5",
@@ -109,6 +109,7 @@
     "express": "^4.17.1",
     "extract-colors": "^1.1.22",
     "follow-redirects": "^1.9.0",
+    "framer-motion": "^4.0.0",
     "fs-extra": "^8.1.0",
     "google-protobuf": "^3.14.0",
     "i18next": "^19.0.1",
@@ -119,6 +120,7 @@
     "lowdb": "^1.0.0",
     "macos-version": "^5.2.1",
     "mousetrap": "^1.6.3",
+    "multiformats": "^9.7.1",
     "nanoid": "^2.0.1",
     "next": "^9.5.1",
     "next-google-fonts": "^1.2.1",
@@ -130,6 +132,7 @@
     "react-i18next": "^11.2.5",
     "react-query": "^3.39.0",
     "react-scroll": "^1.8.7",
+    "react-swipeable": "^7.0.0",
     "reverse-line-reader": "^0.2.6",
     "rlp": "^2.2.2",
     "semver": "^6.3.0",
@@ -146,4 +149,4 @@
     "singleQuote": true,
     "bracketSpacing": false
   }
-}
+}

renderer/i18n.js

@@ -806,7 +806,7 @@ export const isoLangs = {
 }
 
 i18n.use(initReactI18next).init({
-  debug: global.isDev,
+  debug: false,
   resources: {
     en: {translation: en_translation, error: en_error},
     id: {translation: ri_translation, error: ri_error},

renderer/pages/adn/edit.js

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import {Box, HStack, Text, useDisclosure} from '@chakra-ui/react'
+import {useRouter} from 'next/router'
+import {useTranslation} from 'react-i18next'
+import Layout from '../../shared/components/layout'
+import {AdForm, AdPreview} from '../../screens/ads/containers'
+import {PrimaryButton, SecondaryButton} from '../../shared/components/button'
+import {
+  PageHeader,
+  PageCloseButton,
+  PageFooter,
+} from '../../screens/ads/components'
+import {useCoinbase, usePersistedAd} from '../../screens/ads/hooks'
+import {isValidImage} from '../../screens/ads/utils'
+import {Page, PageTitle} from '../../shared/components/components'
+import {dexieDb} from '../../shared/utils/dexieDb'
+import {ArrowRightIcon} from '../../shared/components/icons'
+
+export default function EditAdPage() {
+  const {t} = useTranslation()
+
+  const router = useRouter()
+
+  const {data: ad} = usePersistedAd(router.query.id)
+
+  const coinbase = useCoinbase()
+
+  const adFormRef = React.useRef()
+
+  const previewAdRef = React.useRef()
+
+  const previewDisclosure = useDisclosure()
+
+  return (
+    <Layout showHamburger={false}>
+      <Page px={0} py={0} overflow="hidden">
+        <Box flex={1} w="full" px={20} py={6} overflowY="auto">
+          <PageHeader>
+            <PageTitle mb={0}>{t('Edit ad')}</PageTitle>
+            <PageCloseButton href="/adn/list" />
+          </PageHeader>
+
+          <AdForm
+            ref={adFormRef}
+            id="adForm"
+            ad={ad}
+            onSubmit={async nextAd => {
+              await dexieDb.table('ads').update(ad.id, nextAd)
+              router.push('/adn/list')
+            }}
+          />
+        </Box>
+
+        <PageFooter>
+          <SecondaryButton
+            onClick={async () => {
+              const currentAd = Object.fromEntries(
+                new FormData(adFormRef.current).entries()
+              )
+
+              previewAdRef.current = {
+                ...ad,
+                ...currentAd,
+                author: ad.author ?? coinbase,
+                thumb: isValidImage(currentAd.thumb)
+                  ? URL.createObjectURL(currentAd.thumb)
+                  : ad.thumb,
+                media: isValidImage(currentAd.media)
+                  ? URL.createObjectURL(currentAd.media)
+                  : ad.media,
+              }
+
+              previewDisclosure.onOpen()
+            }}
+          >
+            <HStack>
+              <ArrowRightIcon boxSize="5" />
+              <Text>{t('Show preview')}</Text>
+            </HStack>
+          </SecondaryButton>
+          <PrimaryButton form="adForm" type="submit">
+            {t('Save')}
+          </PrimaryButton>
+        </PageFooter>
+      </Page>
+
+      <AdPreview ad={previewAdRef.current} {...previewDisclosure} />
+    </Layout>
+  )
+}