2024-03-07 LTS upgrade

.github/workflows/netlify.yml

@@ -4,7 +4,7 @@ on:
     branches: [develop]
   pull_request:
 jobs:
-  build:
+  build-dev-vocdoni:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
@@ -21,7 +21,7 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      - name: Build CRA app dev
+      - name: Build vocdoni app dev
         run: yarn build
         env:
           VOCDONI_ENVIRONMENT: dev
@@ -35,38 +35,96 @@ jobs:
         with:
           publish-dir: './dist'
           # keep as a non existant branch, because we don't want to publish this
-          production-branch: master
+          production-branch: develop
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          deploy-message: 'DEV Deploy from GitHub Actions'
+          deploy-message: 'Vocdoni DEV Deploy from GitHub Actions'
           enable-pull-request-comment: true
           enable-commit-comment: true
           overwrites-pull-request-comment: true
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_SITE_ID: 5bddb63a-3f70-4de9-9fa8-89afc6f813a8
+        timeout-minutes: 1
+
+  build-stg-vocdoni:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install
+        run: yarn
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build vocdoni app stg
+        run: yarn build
+        env:
+          VOCDONI_ENVIRONMENT: stg
+          FEATURES: ${{ secrets.FEATURES }}
+          CUSTOM_ORGANIZATION_DOMAINS: ${{ secrets.CUSTOM_ORGANIZATION_DOMAINS }}
+          CSP_URL: ${{ secrets.CSP_URL }}}
+          CSP_PUBKEY: ${{ secrets.CSP_PUBKEY }}
+
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@v2.0
+        with:
+          publish-dir: './dist'
+          production-branch: develop
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: 'Vocdoni STG Deploy from GitHub Actions'
+          enable-pull-request-comment: true
+          enable-commit-comment: true
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: 5f9bd529-1b25-49af-acde-818bbd33109b
         timeout-minutes: 1
 
-      - name: Build CRA app stg
+  build-stg-onvote:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install
+        run: yarn
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build onvote stg
         run: yarn build
         env:
           VOCDONI_ENVIRONMENT: stg
           FEATURES: ${{ secrets.FEATURES }}
           CUSTOM_ORGANIZATION_DOMAINS: ${{ secrets.CUSTOM_ORGANIZATION_DOMAINS }}
           CSP_URL: ${{ secrets.CSP_URL }}}
           CSP_PUBKEY: ${{ secrets.CSP_PUBKEY }}
+          THEME: onvote
 
       - name: Deploy to Netlify
         uses: nwtgck/actions-netlify@v2.0
         with:
           publish-dir: './dist'
           production-branch: develop
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          deploy-message: 'STG Deploy from GitHub Actions'
+          deploy-message: 'Vocdoni STG Deploy from GitHub Actions'
           enable-pull-request-comment: true
           enable-commit-comment: true
           overwrites-pull-request-comment: true
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_SITE_ID: ed17f013-4901-4158-bad6-51c836f77b77
         timeout-minutes: 1

package.json

@@ -38,6 +38,7 @@
     "react-i18next": "^13.0.1",
     "react-icons": "^4.10.1",
     "react-markdown": "^8.0.7",
+    "react-player": "^2.14.1",
     "react-router-dom": "^6.14.1",
     "remark-gfm": "^3.0.1",
     "viem": "^1.16.6",

public/default/index.html

@@ -4,28 +4,54 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
+
+    <title>Vocdoni - The voice of digital voting</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="/logo128.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="canonical" href="https://app.vocdoni.io" />
     <meta
       name="description"
-      content="Voting platform for allowing to create Web2/Web3 voting processes and let your community decide"
+      content="Vocdoni APP is a secure voting platform tailored for local governments, organizations, cooperatives, and businesses, offering a easy-to-use, transparent, and GDPR-compliant way to engage in decision-making, with a user-friendly interface that cuts costs and complexity, allowing votes from anywhere on any device."
     />
     <meta
       name="keywords"
-      content="digital voting, blockchain voting, Web2, Web3, voting, DAOs, token voting, NFTs, address list, custom voting, election, secure, anonymous"
+      content="digital voting, blockchain voting, Web2, voting, participatory budgeting, local governments, organizations, cooperatives, business, GDPR compliant, secure elections, user-friendly interface, cost-effective, mobile-friendly, multidevice, vote from anywhere"
     />
     <meta name="robots" content="index, follow" />
     <meta name="author" content="Vocdoni" />
-    <meta property="og:title" content="The voice of digital voting" />
+
+    <!-- Open Graph Protocol for Facebook -->
+    <meta property="og:title" content="Vocdoni App: Simplifying Secure Digital Voting for Everyone" />
     <meta
       property="og:description"
-      content="Voting platform for allowing to create Web2/Web3 voting processes and let your community decide"
+      content="Vocdoni App is leading the way in digital voting, offering a secure, GDPR-compliant, and user-friendly platform that simplifies the voting process for organizations and local governments. Find out how at https://vocdoni.app."
     />
-    <meta property="og:image" content="/logo512.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="/logo128.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="canonical" href="https://app.vocdoni.io" />
-    <title>Vocdoni - The voice of digital voting</title>
+    <meta property="og:image" content="/assets/vocdoniapp.png" />
+    <meta property="og:url" content="https://app.vocdoni.io">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Vocdoni App: Simplifying Secure Digital Voting for Everyone">
+
+    <!-- Twitter Card -->
+    <meta  property="twitter:title" content="Vocdoni App: Simplifying Secure Digital Voting for Everyone" />
+    <meta
+      content="Discover how Vocdoni App revolutionizes digital voting with a user-friendly, secure, and cost-effective platform, perfect for organizations and governments aiming to simplify decision-making and engage communities."
+      property="twitter:description"
+    />
+    <meta property="twitter:image" content="/assets/vocdoniapp.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@vocdoni">
+    <meta name="twitter:creator" content="@vocdoni">
+
+    <!-- Telegram -->
+    <meta property="telegram:domain" content="https://app.vocdoni.io">
+    <meta property="telegram:title" content="Vocdoni App: Simplifying Secure Digital Voting for Everyone">
+    <meta property="telegram:description" content="Vocdoni App is leading the way in digital voting, offering a secure, GDPR-compliant, and user-friendly platform that simplifies the voting process for organizations and local governments. Find out how at https://vocdoni.app.">
+    <meta property="og:telegram" content="Vocdoni App is here to transform your voting experience with a secure, transparent, and user-friendly platform, making it easy to vote from anywhere on any device. Explore more at https://app.vocdoni.io.">
+
+    <!-- WhatsApp -->
+    <meta property="og:whatsapp" content="Vocdoni App is here to transform your voting experience with a secure, transparent, and user-friendly platform, making it easy to vote from anywhere on any device. Explore more at https://app.vocdoni.io.">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/default/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Vocdoni",
-  "name": "Vocdoni Public Voting Protocol",
+  "short_name": "Vocdoni App",
+  "name": "Vocdoni App: Simplifying Secure Digital Voting for Everyone",
   "icons": [
     {
       "src": "favicon.ico",

public/onvote/index.html

@@ -2,20 +2,15 @@
 <!-- commit sha: <%- commit %> -->
 <html lang="en">
   <head>
+    <title>ONVOTE - Anonymous Gasless and Modular voting for Web3</title>
     <meta charset="utf-8" />
     <link rel="icon" href="../../assets/onvote-icon.svg" />
     <meta
       name="keywords"
-      content="digital voting, blockchain voting, Web2, Web3, voting, DAOs, token voting, NFTs, address list, custom voting, election, secure, anonymous"
+      content="digital voting, blockchain voting, Web2, Web3, voting, DAOs, token voting, NFTs, address list, custom voting, election, secure, anonymous, Onvote, Vocdoni, decentralized voting, secure voting, GDPR compliant, privacy-first voting, Ethereum, IPFS"
     />
     <meta name="robots" content="index, follow" />
     <meta name="author" content="Vocdoni" />
-    <meta property="og:title" content="The voice of digital voting" />
-    <meta
-      property="og:description"
-      content="Voting platform for allowing to create Web2/Web3 voting processes and let your community decide"
-    />
-    <meta property="og:image" content="/logo512.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="/logo128.png" />
@@ -26,22 +21,37 @@
       content="Anonymous, Census strategies with all kinds of ERC tokens, Opensource, Gasless voting, Decentralized, Multichain &amp; Flexible protocol. Discover more!"
       name="description"
     />
-    <meta content="ONVOTE - ANONYMOUS Gasless and Modular voting for Web3" property="og:title" />
+
+    <!-- Open Graph Protocol for Facebook -->
+    <meta property="og:title" content="ONVOTE - Anonymous Gasless and Modular voting for Web3" />
     <meta
-      content="Anonymous, Census strategies with all kinds of ERC tokens, Opensource, Gasless voting, Decentralized, Multichain &amp; Flexible protocol. Discover more!"
       property="og:description"
+      content="Anonymous, Census strategies with all kinds of ERC tokens, Opensource, Gasless voting, Decentralized, Multichain &amp; Flexible protocol. Discover more!"
     />
-    <meta content="/assets/meta-img.jpg" property="og:image" />
-    <meta content="ONVOTE - ANONYMOUS Gasless and Modular voting for Web3" property="twitter:title" />
+    <meta property="og:image" content="/assets/onvote.png" />
+    <meta property="og:url" content="https://onvote.app">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="ONVOTE - Anonymous Gasless and Modular voting for Web3">
+
+    <!-- Twitter Card -->
+    <meta  property="twitter:title" content="ONVOTE - ANONYMOUS Gasless and Modular voting for Web3" />
     <meta
-      content="Anonymous, Census strategies with all kinds of ERC tokens, Opensource, Gasless voting, Decentralized, Multichain &amp; Flexible protocol. Discover more!"
+      content="Experience the future of DAO governance with Onvote by Vocdoni - a secure, gasless, transparent, and flexible digital voting platform tailored for the Web3 ecosystem."
       property="twitter:description"
     />
-    <meta content="/assets/meta-img.jpg" property="twitter:image" />
-    <meta property="og:type" content="website" />
-    <meta content="summary_large_image" name="twitter:card" />
-    <meta content="width=device-width, initial-scale=1" name="viewport" />
-    <title>ONVOTE - ANONYMOUS Gasless and Modular voting for Web3</title>
+    <meta property="twitter:image" content="/assets/onvote.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@onvoteapp">
+    <meta name="twitter:creator" content="@vocdoni">
+
+    <!-- Telegram -->
+    <meta property="telegram:domain" content="https://onvote.app">
+    <meta property="telegram:title" content="ONVOTE - Anonymous Gasless and Modular voting for Web3">
+    <meta property="telegram:description" content="Check out Onvote by Vocdoni for secure, gasless, transparent, and easy-to-use digital voting in the Web3 ecosystem. Explore more at https://onvote.app.">
+    <meta property="og:telegram" content="Check out Onvote by Vocdoni for secure, gasless, transparent, and easy-to-use digital voting in the Web3 ecosystem. Explore more at https://onvote.app.">
+
+    <!-- WhatsApp -->
+    <meta property="og:whatsapp" content="Discover Onvote by Vocdoni - the secure, gasless and decentralized digital voting platform for Web3. Visit https://onvote.app to learn more.">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/onvote/manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "ONVOTE",
-  "name": "ONVOTE - ANONYMOUS Gasless and Modular voting for Web3",
+  "name": "ONVOTE - Anonymous Gasless and Modular voting for Web3",
   "icons": [
     {
       "src": "favicon.ico",

src/components/Navbar/index.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import { MdHowToVote } from 'react-icons/md'
 import { Link as ReactRouterLink } from 'react-router-dom'
 import { useAccount } from 'wagmi'
-import { BasicAccountCreation } from '~components/Account/Create'
 import { useOrganizationHealthTools } from '~components/Account/use-account-health-tools'
 import Logo from '~components/Layout/Logo'
 import { LanguagesMenu } from './LanguagesList'
@@ -23,7 +22,6 @@ const Navbar = () => {
   return (
     <Flex className='site-wrapper' justifyContent='space-between' w='full' mx='auto' py={{ base: '12px', md: '24px' }}>
       <Logo />
-      <BasicAccountCreation />
 
       <List as='nav' display='flex' alignItems='center' gap={4}>
         {isConnected && (
@@ -79,8 +77,6 @@ const Navbar = () => {
                         src={account?.account.avatar}
                         name={account?.account.name.default || account?.address}
                         size='xs'
-                        bg='primary.main'
-                        color='white'
                       />
                       {isOpen ? (
                         <ChevronUpIcon boxSize={8} color='navbar_chevron' />

src/components/Process/ActionsMenu.tsx

@@ -52,6 +52,12 @@ const ActionsMenuList = (props: MenuListProps) => {
           justifyContent='start'
           isLoading={loading.continue}
           variant=''
+          sx={{
+            '& span': {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          }}
         >
           {t('process_actions.start')}
         </MenuItem>
@@ -64,6 +70,12 @@ const ActionsMenuList = (props: MenuListProps) => {
           justifyContent='start'
           isLoading={loading.pause}
           variant=''
+          sx={{
+            '& span': {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          }}
         >
           {t('process_actions.pause')}
         </MenuItem>
@@ -76,6 +88,12 @@ const ActionsMenuList = (props: MenuListProps) => {
         isLoading={loading.end}
         variant='solid'
         colorScheme='gray'
+        sx={{
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+          },
+        }}
       >
         {t('process_actions.end')}
       </MenuItem>
@@ -88,6 +106,12 @@ const ActionsMenuList = (props: MenuListProps) => {
         isLoading={loading.cancel}
         variant='solid'
         colorScheme='gray'
+        sx={{
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+          },
+        }}
       >
         {t('process_actions.cancel')}
       </MenuItem>

src/components/Process/Aside.tsx

@@ -138,7 +138,7 @@ const ProcessAside = () => {
   )
 }
 
-export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void }) => {
+export const VoteButton = ({ setQuestionsTab, ...props }: { setQuestionsTab: () => void }) => {
   const { t } = useTranslation()
 
   const { election, connected, isAbleToVote, isInCensus } = useElection()
@@ -159,6 +159,7 @@ export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void })
       color='process.aside.color'
       py={3}
       px={{ base: 3, lg2: 0 }}
+      {...props}
     >
       {census?.type !== 'spreadsheet' && !connected && (
         <ConnectButton.Custom>
@@ -193,7 +194,17 @@ export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void })
         </ConnectButton.Custom>
       )}
       {census?.type === 'spreadsheet' && !connected && <SpreadsheetAccess />}
-      {isAbleToVote && <CVoteButton w='full' fontSize='lg' onClick={setQuestionsTab} />}
+      {isAbleToVote && (
+        <CVoteButton
+          w='60%'
+          fontSize='lg'
+          height='50px'
+          onClick={setQuestionsTab}
+          _disabled={{
+            opacity: '0.8',
+          }}
+        />
+      )}
     </Flex>
   )
 }