Merge pull request #159 from 1Hive/quest-detail-pimpup

Quest detail one scroll + creation time +display claim even if bounty…
1Hive · Feb 3, 2022 · b14a7f7 · b14a7f7 · vercel · Feb 3, 2022
2 parents ab5ed53 + 31ab20f
commit b14a7f7
Show file tree

Hide file tree

Showing 15 changed files with 210 additions and 125 deletions.
diff --git a/packages/react-app/src/collapsable-block.tsx b/packages/react-app/src/collapsable-block.tsx
@@ -66,40 +66,38 @@ export function CollapsableBlock(props: Props) {
   }, [props, props.children]);
 
   return (
-    <div>
-      <pre>
-        <LineStyled>
-          <CollapseButtonStyled onClick={() => setVisible(!isVisible)}>
-            <IconColumnStyled>
-              {isVisible ? (
-                <>
-                  <IconDown size="tiny" />
-                  <IconUp size="tiny" />
-                </>
-              ) : (
-                <>
-                  <IconUp size="tiny" />
-                  <IconDown size="tiny" />
-                </>
-              )}
-            </IconColumnStyled>
-            <LabelStyled>
-              {isVisible ? 'Hide ' : 'Show '}
-              {props.label}
-            </LabelStyled>
-          </CollapseButtonStyled>
-          {isVisible && (
-            <CopyButtonStyled
-              onClick={() => copyCode(content)}
-              icon={<IconCopy />}
-              size="small"
-              label="Copy"
-              display="icon"
-            />
-          )}
-        </LineStyled>
-        {isVisible && content ? <ContentWrapperStyled>{content}</ContentWrapperStyled> : <></>}
-      </pre>
-    </div>
+    <pre>
+      <LineStyled>
+        <CollapseButtonStyled onClick={() => setVisible(!isVisible)}>
+          <IconColumnStyled>
+            {isVisible ? (
+              <>
+                <IconDown size="tiny" />
+                <IconUp size="tiny" />
+              </>
+            ) : (
+              <>
+                <IconUp size="tiny" />
+                <IconDown size="tiny" />
+              </>
+            )}
+          </IconColumnStyled>
+          <LabelStyled>
+            {isVisible ? 'Hide ' : 'Show '}
+            {props.label}
+          </LabelStyled>
+        </CollapseButtonStyled>
+        {isVisible && (
+          <CopyButtonStyled
+            onClick={() => copyCode(content)}
+            icon={<IconCopy />}
+            size="small"
+            label="Copy"
+            display="icon"
+          />
+        )}
+      </LineStyled>
+      {isVisible && content ? <ContentWrapperStyled>{content}</ContentWrapperStyled> : <></>}
+    </pre>
   );
 }
diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx
@@ -43,7 +43,7 @@ type Props = {
   questData: QuestModel;
   newClaim: number;
   challengeDeposit: TokenAmountModel;
-  questTotalBounty?: TokenAmountModel;
+  questTotalBounty?: TokenAmountModel | null;
 };
 
 export default function ClaimList({
@@ -134,14 +134,7 @@ export default function ClaimList({
                         <AmountFieldInput
                           id="amount"
                           label="Claimed amount"
-                          isLoading={
-                            !claim.claimedAmount.parsedAmount && questTotalBounty === undefined
-                          }
-                          value={
-                            claim.claimedAmount.parsedAmount || !questTotalBounty
-                              ? claim.claimedAmount
-                              : questTotalBounty
-                          }
+                          value={claim.claimedAmount}
                         />
                       ) : (
                         <Field label="Claimed amount">All available</Field>

diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx
@@ -221,7 +221,7 @@ function AmountFieldInput({
   };
 
   const amountField = (
-    <FieldInput label={amountLabel} isLoading={isLoading} wide={wide} compact={compact}>
+    <FieldInput label={amountLabel} wide={wide} compact={compact}>
       <AmountTokenWrapperStyled isEdit={isEdit} wide={wide}>
         {amount !== undefined &&
           (isEdit ? (
@@ -245,7 +245,6 @@ function AmountFieldInput({
   const tokenField = (
     <FieldInput
       label={tokenLabel}
-      isLoading={isLoading}
       wide={wide}
       compact={compact}
       tooltip="Token"
@@ -291,7 +290,7 @@ function AmountFieldInput({
       label={label}
       tooltip={tooltip}
       tooltipDetail={tooltipDetail}
-      isLoading={false}
+      isLoading={isLoading}
       wide={wide}
       compact
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}

diff --git a/packages/react-app/src/components/field-input/field-input.tsx b/packages/react-app/src/components/field-input/field-input.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { IconTooltip } from './icon-tooltip';
 
 const FieldStyled = styled.div`
-  ${({ compact }: any) => (!compact ? `margin-bottom:${GUpx(2)}` : '')};
+  ${({ compact }: any) => (!compact ? `margin-bottom:${GUpx(1)}` : '')};
   ${({ isLoading, wide }: any) => (isLoading || wide ? `width: 100%;` : 'max-width: 100%;')};
 `;
 
@@ -30,14 +30,15 @@ const LineStyled = styled.div`
 
 const ContentWrapperStyled = styled.div`
   display: flex;
-  align-items: center;
+  align-items: ${({ align }: any) => align};
   ${(props: any) => (!props.compact ? 'min-height: 45px;' : '')}
   & > div {
     input {
       ${({ wide }: any) => (wide ? `max-width:none;` : '')}
     }
   }
   flex-direction: ${({ direction }: any) => direction};
+  padding-left: ${GUpx(0.5)};
 `;
 
 const SkeletonWrapperStyled = styled.div`
@@ -52,9 +53,10 @@ type Props = {
   tooltipDetail?: React.ReactNode;
   children: React.ReactNode;
   id?: string;
-  isLoading: boolean;
+  isLoading?: boolean;
   wide?: boolean;
   direction?: 'row' | 'column';
+  align?: 'center' | 'baseline' | 'flex-start' | 'flex-end' | 'unset';
 };
 
 export function FieldInput({
@@ -67,6 +69,7 @@ export function FieldInput({
   isLoading = false,
   wide = false,
   direction = 'row',
+  align = 'center',
 }: Props) {
   const theme = useTheme();
   const labelComponent = label && (
@@ -86,7 +89,7 @@ export function FieldInput({
             <Skeleton />
           </SkeletonWrapperStyled>
         ) : (
-          <ContentWrapperStyled compact={compact} wide={wide} direction={direction}>
+          <ContentWrapperStyled compact={compact} wide={wide} direction={direction} align={align}>
             {children}
           </ContentWrapperStyled>
         )}

diff --git a/packages/react-app/src/components/field-input/icon-tooltip.tsx b/packages/react-app/src/components/field-input/icon-tooltip.tsx
@@ -1,7 +1,7 @@
 import { Help, IconQuestion, useTheme } from '@1hive/1hive-ui';
 import { ReactNode } from 'react';
+import { GUpx } from 'src/utils/css.util';
 import styled from 'styled-components';
-import { Outset } from '../utils/spacer-util';
 
 // #region Styled
 
@@ -30,12 +30,15 @@ const TooltipWrapperStyled = styled.div`
 
 const HelpWrapperStyled = styled.div`
   width: 16px;
+  display: inline-block;
+  margin-left: ${GUpx()};
+  margin-right: ${GUpx(0.5)};
 `;
 
 // #endregion
 
 type Props = {
-  tooltip: string;
+  tooltip?: string;
   tooltipDetail?: ReactNode;
   icon?: ReactNode;
   children?: ReactNode;
@@ -44,18 +47,16 @@ type Props = {
 export const IconTooltip = ({ tooltip, tooltipDetail, icon, children }: Props) => {
   const theme = useTheme();
   return (
-    <Outset horizontal>
-      <HelpWrapperStyled className="btn-no-margin">
-        {tooltipDetail || children ? (
-          <Help hint={tooltip}>
-            <TooltipWrapperStyled color={theme.accentContent}>
-              {tooltipDetail ?? children}
-            </TooltipWrapperStyled>
-          </Help>
-        ) : (
-          <IconSpanStyled title={tooltip}>{icon ?? <IconQuestion size="tiny" />}</IconSpanStyled>
-        )}
-      </HelpWrapperStyled>
-    </Outset>
+    <HelpWrapperStyled className="btn-no-margin">
+      {tooltipDetail || children ? (
+        <Help hint={tooltip ?? tooltipDetail}>
+          <TooltipWrapperStyled color={theme.accentContent}>
+            {tooltipDetail ?? children}
+          </TooltipWrapperStyled>
+        </Help>
+      ) : (
+        <IconSpanStyled title={tooltip}>{icon ?? <IconQuestion size="tiny" />}</IconSpanStyled>
+      )}
+    </HelpWrapperStyled>
   );
 };
diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx
@@ -71,7 +71,12 @@ export default function TextFieldInput({
           content={value}
           markdownToJsxOptions={(o: any) => ({
             ...o,
+            wrapper: 'div',
+
             overrides: {
+              p: {
+                component: 'div',
+              },
               pre: {
                 component: CollapsableBlock,
                 props: {

diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -33,7 +33,7 @@ const OpenButtonWrapperStyled = styled.div`
 
 type Props = {
   claim: ClaimModel;
-  questTotalBounty?: TokenAmountModel;
+  questTotalBounty?: TokenAmountModel | null;
   onClose?: ModalCallback;
 };
 
@@ -135,6 +135,7 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
                   loading ||
                   !scheduleTimeout ||
                   claim.state === ENUM_CLAIM_STATE.Challenged ||
+                  questTotalBounty ||
                   !walletAddress
                 }
               />

diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -137,6 +137,12 @@ export default function FundModal({ quest, onClose = noop }: Props) {
         >
           <FormStyled id="form-fund" onSubmit={handleSubmit} ref={formRef}>
             <Outset gu16>
+              <AddressFieldInput
+                id="address"
+                label="Quest address"
+                value={quest.address}
+                isLoading={loading}
+              />
               <AmountFieldInputFormik
                 id="fundAmount"
                 isEdit
@@ -147,12 +153,6 @@ export default function FundModal({ quest, onClose = noop }: Props) {
                 isLoading={loading}
                 value={values.fundAmount}
               />
-              <AddressFieldInput
-                id="address"
-                label="Quest address"
-                value={quest.address}
-                isLoading={loading}
-              />
             </Outset>
           </FormStyled>
         </ModalBase>

diff --git a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
@@ -25,6 +25,7 @@ import * as QuestService from '../../services/quest.service';
 import { Outset } from '../utils/spacer-util';
 import { DisputeModel } from '../../models/dispute.model';
 import TextFieldInput from '../field-input/text-field-input';
+import { IconTooltip } from '../field-input/icon-tooltip';
 
 // #region StyledComponents
 
@@ -65,7 +66,7 @@ const RulingInfoStyled = styled(Info)`
   width: 100%;
 `;
 
-const OnlySHWarn = styled(Info)`
+const OnlyStackholderWarnStyled = styled(Info)`
   padding: ${GUpx()};
   display: flex;
   align-items: center;
@@ -198,9 +199,22 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
             ) : (
               <>
                 Ruling in progress, please come back later...
-                <LinkStyled href={`https://celeste.1hive.org/#/disputes/${dispute.id}`}>
-                  See dispute
-                </LinkStyled>
+                {process.env.NODE_ENV === 'production' ? (
+                  <LinkStyled
+                    external
+                    href={
+                      process.env.NODE_ENV === 'production' &&
+                      `https://celeste.1hive.org/#/disputes/${dispute.id}`
+                    }
+                  >
+                    See dispute
+                  </LinkStyled>
+                ) : (
+                  <IconTooltip
+                    tooltipDetail={`This is a mocked celeste dispute with id ${dispute.id}`}
+                    key={dispute.id}
+                  />
+                )}
               </>
             )}
           </FinalRulingStyled>
@@ -233,10 +247,10 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
       buttons={[
         <Fragment key="warnMessage">
           {isRuled && !isStackholder && (
-            <OnlySHWarn mode="warning">
+            <OnlyStackholderWarnStyled mode="warning">
               <IconCaution />
               <span> Only a stackholder of this challenge may resolve it</span>
-            </OnlySHWarn>
+            </OnlyStackholderWarnStyled>
           )}
         </Fragment>,
         <Button