Fix adversarial image generation (#907)

* Fix adversarial image generation * Fixing for flip editing * Fix selecting oracle radio buttons Adjust flip list layout * Fix overlay gradient stop color * Rewrite oracle redirect dialog to disclosure * Decide validation result based on identity In a case of API call fails decide on validation result based on known identity chain data * Explicitly sets validation failed status
idena-network · Apr 7, 2023 · f23d3b4 · f23d3b4
1 parent 5007284
commit f23d3b4
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 128 deletions.
diff --git a/renderer/pages/flips/edit.js b/renderer/pages/flips/edit.js
@@ -120,8 +120,9 @@ export default function EditFlipPage() {
           !flip.adversarialImages.some((x) => x) &&
           !eitherState(currentSearch, 'searching')
         ) {
-          currentSearch.context.query = `${flip.keywords.words[0]?.name} ${flip.keywords.words[1]?.name}`
-          sendSearch('SEARCH')
+          sendSearch('SEARCH', {
+            query: `${flip.keywords.words[0]?.name} ${flip.keywords.words[1]?.name}`,
+          })
         }
         return Promise.resolve()
       },

diff --git a/renderer/pages/flips/list.js b/renderer/pages/flips/list.js
@@ -302,7 +302,7 @@ export default function FlipListPage() {
             {current.matches('ready.dirty.active') && (
               <>
                 {missingFlips.map(({keywords, ...flip}, idx) => (
-                  <Box key={idx}>
+                  <Box key={idx} w={150}>
                     <EmptyFlipBox position="relative">
                       {[FlipType.Deleting, FlipType.Invalid].some(
                         (x) => x === flip.type
@@ -313,7 +313,7 @@ export default function FlipListPage() {
                             flip.type === FlipType.Deleting
                               ? `linear-gradient(to top, ${colors.warning[500]}, transparent)`
                               : flip.type === FlipType.Invalid
-                              ? `linear-gradient(to top, ${colors.red[500]}, ${colors.red[500]})`
+                              ? `linear-gradient(to top, ${colors.red[500]}, transparent)`
                               : ''
                           }
                         >

diff --git a/renderer/pages/flips/new.js b/renderer/pages/flips/new.js
@@ -120,8 +120,9 @@ export default function NewFlipPage() {
           !flip.adversarialImages.some((x) => x) &&
           !eitherState(currentSearch, 'searching')
         ) {
-          currentSearch.context.query = `${flip.keywords.words[0]?.name} ${flip.keywords.words[1]?.name}`
-          sendSearch('SEARCH')
+          sendSearch('SEARCH', {
+            query: `${flip.keywords.words[0]?.name} ${flip.keywords.words[1]?.name}`,
+          })
         }
         return Promise.resolve()
       },

diff --git a/renderer/pages/oracles/view.js b/renderer/pages/oracles/view.js
@@ -270,6 +270,9 @@ export default function ViewVotingPage() {
     })
   }, [onCloseCampaignDisclosure, redirect, successToast, t])
 
+  const redirectDisclosure = useDisclosure()
+  const [redirectUrl, setRedirectUrl] = React.useState()
+
   return (
     <>
       <Layout syncing={syncing} offline={offline}>
@@ -343,7 +346,8 @@ export default function ViewVotingPage() {
                           >
                             <Linkify
                               onClick={(url) => {
-                                send('FOLLOW_LINK', {url})
+                                setRedirectUrl(url)
+                                redirectDisclosure.onOpen()
                               }}
                             >
                               {desc}
@@ -1105,20 +1109,22 @@ export default function ViewVotingPage() {
         />
       )}
 
-      <Dialog
-        isOpen={eitherIdleState('redirecting')}
-        onClose={() => send('CANCEL')}
-      >
+      <Dialog {...redirectDisclosure}>
         <DialogHeader>{t('Leaving Idena')}</DialogHeader>
         <DialogBody>
           <Text>{t(`You're about to leave Idena.`)}</Text>
           <Text>{t(`Are you sure?`)}</Text>
         </DialogBody>
         <DialogFooter>
-          <SecondaryButton onClick={() => send('CANCEL')}>
+          <SecondaryButton onClick={redirectDisclosure.onClose}>
             {t('Cancel')}
           </SecondaryButton>
-          <PrimaryButton onClick={() => send('CONTINUE')}>
+          <PrimaryButton
+            onClick={() => {
+              global.openExternal(redirectUrl)
+              redirectDisclosure.onClose()
+            }}
+          >
             {t('Continue')}
           </PrimaryButton>
         </DialogFooter>

diff --git a/renderer/screens/flips/components.js b/renderer/screens/flips/components.js
@@ -2,7 +2,6 @@
 import React, {useEffect} from 'react'
 import NextLink from 'next/link'
 import {
-  SimpleGrid,
   Image,
   Text,
   Box,
@@ -30,6 +29,8 @@ import {
   Center,
   useRadio,
   useRadioGroup,
+  Wrap,
+  WrapItem,
 } from '@chakra-ui/react'
 import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd'
 import {useTranslation} from 'react-i18next'
@@ -91,7 +92,7 @@ export function FlipPageTitle({onClose, ...props}) {
 }
 
 export function FlipCardList(props) {
-  return <SimpleGrid columns={4} spacing={10} {...props} />
+  return <Wrap spacing="39px" {...props} />
 }
 
 export function FlipCard({flipService, onDelete}) {
@@ -122,95 +123,97 @@ export function FlipCard({flipService, onDelete}) {
   const isDeletable = [FlipType.Published, FlipType.Draft].includes(type)
 
   return (
-    <Box position="relative">
-      <FlipCardImageBox>
-        {[FlipType.Publishing, FlipType.Deleting, FlipType.Invalid].some(
-          (x) => x === type
-        ) && (
-          <FlipOverlay
-            backgroundImage={
-              // eslint-disable-next-line no-nested-ternary
-              [FlipType.Publishing, FlipType.Deleting].some((x) => x === type)
-                ? `linear-gradient(to top, ${colors.warning[500]}, transparent)`
-                : type === FlipType.Invalid
-                ? `linear-gradient(to top, ${colors.red[500]}, transparent)`
-                : ''
+    <WrapItem>
+      <Box w={150} position="relative">
+        <FlipCardImageBox>
+          {[FlipType.Publishing, FlipType.Deleting, FlipType.Invalid].some(
+            (x) => x === type
+          ) && (
+            <FlipOverlay
+              backgroundImage={
+                // eslint-disable-next-line no-nested-ternary
+                [FlipType.Publishing, FlipType.Deleting].some((x) => x === type)
+                  ? `linear-gradient(to top, ${colors.warning[500]}, transparent)`
+                  : type === FlipType.Invalid
+                  ? `linear-gradient(to top, ${colors.red[500]}, transparent)`
+                  : ''
+              }
+            >
+              <FlipOverlayStatus>
+                <InfoSolidIcon boxSize="5" />
+                <FlipOverlayText>
+                  {type === FlipType.Publishing && t('Mining...')}
+                  {type === FlipType.Deleting && t('Deleting...')}
+                  {type === FlipType.Invalid && t('Mining error')}
+                </FlipOverlayText>
+              </FlipOverlayStatus>
+            </FlipOverlay>
+          )}
+          <FlipCardImage
+            src={
+              images[originalOrder ? originalOrder[0] : 0] ||
+              images[originalOrder ? originalOrder[1] : 1]
             }
-          >
-            <FlipOverlayStatus>
-              <InfoSolidIcon boxSize="5" />
-              <FlipOverlayText>
-                {type === FlipType.Publishing && t('Mining...')}
-                {type === FlipType.Deleting && t('Deleting...')}
-                {type === FlipType.Invalid && t('Mining error')}
-              </FlipOverlayText>
-            </FlipOverlayStatus>
-          </FlipOverlay>
-        )}
-        <FlipCardImage
-          src={
-            images[originalOrder ? originalOrder[0] : 0] ||
-            images[originalOrder ? originalOrder[1] : 1]
-          }
-        />
-      </FlipCardImageBox>
-      <Flex justifyContent="space-between" alignItems="flex-start" mt={4}>
-        <Box>
-          <FlipCardTitle>
-            {keywords.words && keywords.words.length
-              ? formatKeywords(keywords.words)
-              : t('Missing keywords')}
-          </FlipCardTitle>
-          <FlipCardSubtitle>
-            {new Date(modifiedAt).toLocaleString()}
-          </FlipCardSubtitle>
-        </Box>
-        {isActionable && (
-          <FlipCardMenu>
-            {isSubmittable && (
-              <FlipCardMenuItem onClick={() => send('PUBLISH', {id})}>
-                <HStack spacing="2">
-                  <FlipCardMenuItemIcon icon={UploadIcon} />
-                  <Text as="span">{t('Submit flip')}</Text>
-                </HStack>
-              </FlipCardMenuItem>
-            )}
-            {isViewable && (
-              <NextLink href={`/flips/view?id=${id}`}>
-                <FlipCardMenuItem>
+          />
+        </FlipCardImageBox>
+        <Flex justifyContent="space-between" alignItems="flex-start" mt={4}>
+          <Box>
+            <FlipCardTitle>
+              {keywords.words && keywords.words.length
+                ? formatKeywords(keywords.words)
+                : t('Missing keywords')}
+            </FlipCardTitle>
+            <FlipCardSubtitle>
+              {new Date(modifiedAt).toLocaleString()}
+            </FlipCardSubtitle>
+          </Box>
+          {isActionable && (
+            <FlipCardMenu>
+              {isSubmittable && (
+                <FlipCardMenuItem onClick={() => send({type: 'PUBLISH', id})}>
                   <HStack spacing="2">
-                    <FlipCardMenuItemIcon icon={EyeIcon} />
-                    <Text as="span">{t('View flip')}</Text>
+                    <FlipCardMenuItemIcon icon={UploadIcon} />
+                    <Text as="span">{t('Submit flip')}</Text>
                   </HStack>
                 </FlipCardMenuItem>
-              </NextLink>
-            )}
-            {isEditable && (
-              <NextLink href={`/flips/edit?id=${id}`}>
-                <FlipCardMenuItem>
+              )}
+              {isViewable && (
+                <NextLink href={`/flips/view?id=${id}`}>
+                  <FlipCardMenuItem>
+                    <HStack spacing="2">
+                      <FlipCardMenuItemIcon icon={EyeIcon} />
+                      <Text as="span">{t('View flip')}</Text>
+                    </HStack>
+                  </FlipCardMenuItem>
+                </NextLink>
+              )}
+              {isEditable && (
+                <NextLink href={`/flips/edit?id=${id}`}>
+                  <FlipCardMenuItem>
+                    <HStack spacing="2">
+                      <FlipCardMenuItemIcon icon={EditIcon} />
+                      <Text as="span">{t('Edit flip')}</Text>
+                    </HStack>
+                  </FlipCardMenuItem>
+                </NextLink>
+              )}
+              {(isSubmittable || isEditable) && isDeletable && (
+                <MenuDivider color="gray.300" my={2} width={rem(145)} />
+              )}
+
+              {isDeletable && (
+                <FlipCardMenuItem onClick={onDelete}>
                   <HStack spacing="2">
-                    <FlipCardMenuItemIcon icon={EditIcon} />
-                    <Text as="span">{t('Edit flip')}</Text>
+                    <FlipCardMenuItemIcon icon={DeleteIcon} color="red.500" />
+                    <Text as="span">{t('Delete flip')}</Text>
                   </HStack>
                 </FlipCardMenuItem>
-              </NextLink>
-            )}
-            {(isSubmittable || isEditable) && isDeletable && (
-              <MenuDivider color="gray.300" my={2} width={rem(145)} />
-            )}
-
-            {isDeletable && (
-              <FlipCardMenuItem onClick={onDelete}>
-                <HStack spacing="2">
-                  <FlipCardMenuItemIcon icon={DeleteIcon} color="red.500" />
-                  <Text as="span">{t('Delete flip')}</Text>
-                </HStack>
-              </FlipCardMenuItem>
-            )}
-          </FlipCardMenu>
-        )}
-      </Flex>
-    </Box>
+              )}
+            </FlipCardMenu>
+          )}
+        </Flex>
+      </Box>
+    </WrapItem>
   )
 }
 
@@ -263,6 +266,7 @@ export function FlipCardMenu(props) {
         rounded="lg"
         py="2"
         minWidth="145px"
+        zIndex="dropdown"
         {...props}
       />
     </Menu>
@@ -790,6 +794,7 @@ export function FlipProtectStep({
         <FlipImageList>
           {originalOrder.map((num, idx) => (
             <SelectableItem
+              key={num}
               isActive={idx === currentIndex}
               isFirst={idx === 0}
               isLast={idx === images.length - 1}

diff --git a/renderer/screens/flips/components/flip-editor.js b/renderer/screens/flips/components/flip-editor.js
@@ -973,6 +973,7 @@ export default function FlipEditor({
                       'ffa366dd',
                     ].map((color) => (
                       <FlipEditorMenuItem
+                        key={color}
                         justifyContent="center"
                         borderRadius="sm"
                         p={1}

diff --git a/renderer/screens/flips/machines.js b/renderer/screens/flips/machines.js
@@ -1248,7 +1248,8 @@ export const imageSearchMachine = createMachine({
     searching: {
       invoke: {
         // eslint-disable-next-line no-shadow
-        src: ({query}) => global.ipcRenderer.invoke('search-image', query),
+        src: ({query}, {query: queryParam}) =>
+          global.ipcRenderer.invoke('search-image', query || queryParam),
         onDone: {
           target: 'done',
           actions: [

diff --git a/renderer/screens/oracles/containers.js b/renderer/screens/oracles/containers.js
@@ -942,7 +942,7 @@ export function VotingDurationInput({
         value={String(value)}
         // eslint-disable-next-line no-shadow
         onChange={(value) => {
-          send('CHANGE', {id, value})
+          send({type: 'CHANGE', id, value})
         }}
       >
         <HStack spacing="3">
@@ -961,7 +961,8 @@ export function VotingDurationInput({
           id={id}
           value={value}
           onChange={({target}) => {
-            send('CHANGE', {
+            send({
+              type: 'CHANGE',
               id,
               value: Number(target.value),
             })
@@ -1307,9 +1308,9 @@ export function LaunchVotingDrawer({votingService}) {
       available={identity.balance}
       isLoading={current.matches(`mining.${VotingStatus.Starting}`)}
       onLaunch={(e) => {
-        send('START_VOTING', e)
+        send({type: 'START_VOTING', ...e})
       }}
-      onError={(e) => send('ERROR', e)}
+      onError={(e) => send({type: 'ERROR', ...e})}
     />
   )
 }