Fix claim list order + Style pimpup

packages/react-app/src/components/claim-list.tsx

@@ -1,4 +1,4 @@
-import { AddressField, Field, Accordion, useTheme } from '@1hive/1hive-ui';
+import { Accordion } from '@1hive/1hive-ui';
 import { ClaimModel } from 'src/models/claim.model';
 import { useWallet } from 'src/contexts/wallet.context';
 import styled from 'styled-components';
@@ -17,13 +17,11 @@ import TextFieldInput from './field-input/text-field-input';
 import * as QuestService from '../services/quest.service';
 import ExecuteClaimModal from './modals/execute-claim-modal';
 import { StateTag } from './state-tag';
+import { AddressFieldInput } from './field-input/address-field-input';
+import { FieldInput } from './field-input/field-input';
 
 // #region StyledComponents
 
-const FieldStyled = styled(Field)`
-  color: ${({ color }: any) => color};
-`;
-
 const ClaimHeaderStyled = styled.div`
   display: flex;
   align-items: center;
@@ -57,7 +55,6 @@ export default function ClaimList({
   questTotalBounty,
 }: Props) {
   const { walletAddress } = useWallet();
-  const theme = useTheme();
   const [claims, setClaims] = useState<ClaimModel[]>();
 
   useEffect(() => {
@@ -127,23 +124,22 @@ export default function ClaimList({
                 <div className="wide">
                   <Outset>
                     <ChildSpacer size={16} justify="start" align="center" buttonEnd>
-                      <StateTag state={claim.state ?? ''} />
-                      <FieldStyled
-                        color={theme.content}
+                      <FieldInput label="Status">
+                        <StateTag state={claim.state ?? ''} className="pl-0" />
+                      </FieldInput>
+                      <AddressFieldInput
+                        id="playerAddress"
+                        value={claim.playerAddress}
                         label={walletAddress === claim.playerAddress ? 'You' : 'Claiming player'}
-                      >
-                        <AddressField address={claim.playerAddress} autofocus={false} />
-                      </FieldStyled>
+                      />
                       {claim.claimedAmount.parsedAmount ? (
                         <AmountFieldInput
                           id="amount"
                           label="Claimed amount"
                           value={claim.claimedAmount}
                         />
                       ) : (
-                        <FieldStyled color={theme.content} label="Claimed amount">
-                          All available
-                        </FieldStyled>
+                        <FieldInput label="Claimed amount">All available</FieldInput>
                       )}
                       {walletAddress && actionButton}
                     </ChildSpacer>

packages/react-app/src/components/field-input/address-field-input.tsx

@@ -1,5 +1,4 @@
 import { TextInput, EthIdenticon, AddressField } from '@1hive/1hive-ui';
-
 import { noop } from 'lodash-es';
 import React from 'react';
 import styled, { css } from 'styled-components';
@@ -8,31 +7,30 @@ import { FieldInput } from './field-input';
 // #region Styled
 
 const TextInputStyled = styled(TextInput)`
-  height: 40px;
-  width: 370px;
-  border-radius: 3px 0 0 3px;
+  border-radius: 8px;
+  padding-right: 42px;
 `;
 
 const EthIdenticonStyled = styled(EthIdenticon)`
-  border-radius: 0 3px 3px 0;
-  width: 38.4px;
-  height: 38.4px;
+  border-radius: 0 8px 8px 0;
+  padding: 0;
 `;
 
-const WrapperStyled = styled.div<{
-  wide?: boolean;
+const AddressWrapperStyled = styled.div<{
+  wide: boolean;
+  isEdit: boolean;
 }>`
   display: flex;
   flex-wrap: nowrap;
+  max-width: 400px;
   ${(props) =>
     props.wide &&
     css`
       width: 100%;
     `}
 
-  max-width: 100%;
   input {
-    cursor: default;
+    cursor: ${({ isEdit }: any) => (isEdit ? 'text' : 'default')};
   }
 `;
 
@@ -65,16 +63,22 @@ export function AddressFieldInput({
   error,
 }: Props) {
   const loadableContent = (
-    <WrapperStyled wide={wide}>
+    <AddressWrapperStyled isEdit={isEdit} wide={wide}>
       {isEdit ? (
-        <>
-          <TextInputStyled id={id} value={value} onChange={onChange} onBlur={onBlur} />
-          <EthIdenticonStyled address={value} scale={1.6} />
-        </>
+        <TextInputStyled
+          wide={wide}
+          id={id}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          adornment={<EthIdenticonStyled address={value} scale={1.66} />}
+          adornmentPosition="end"
+          adornmentSettings={{ padding: 0, width: 36 }}
+        />
       ) : (
         <AddressField address={value} wide={wide} autofocus={false} />
       )}
-    </WrapperStyled>
+    </AddressWrapperStyled>
   );
   return (
     <FieldInput
@@ -84,6 +88,7 @@ export function AddressFieldInput({
       compact={compact}
       error={error}
       isLoading={isLoading}
+      wide={wide}
     >
       {loadableContent}
     </FieldInput>

packages/react-app/src/components/field-input/amount-field-input.tsx

@@ -129,8 +129,8 @@ function AmountFieldInput({
   const [availableTokens, setAvailableTokens] = useState<TokenModel[]>([]);
   const [_hasFocused, _setHasFocused] = useState<boolean>();
   const { walletAddress } = useWallet();
-  const tokenInputId = `token-${id}`;
-  const amountInputId = `amount-${id}`;
+  const tokenInputId = tokenEditable ? id : `token-${id}`; // Handle label for
+  const amountInputId = !tokenEditable ? id : `amount-${id}`; // Handle label for
 
   // Needed since the access of state in event handlers is not working
   const hasFocusedRef = React.useRef(_hasFocused);

packages/react-app/src/components/quest.tsx

@@ -99,7 +99,7 @@ const FirstColStyled = styled.div`
 `;
 
 const SecondColStyled = styled.div`
-  margin: 0 ${GUpx()};
+  margin: 0 ${GUpx(3)};
   max-width: 90%;
   flex-grow: 0;
   display: flex;

packages/react-app/src/components/state-tag.tsx

@@ -19,6 +19,7 @@ type Props = {
   state: string;
   size?: 'normal' | 'small';
   wide?: boolean;
+  className?: string;
 };
 
 const VISIBLE_STATES = [
@@ -33,7 +34,7 @@ const VISIBLE_STATES = [
   ENUM_CLAIM_STATE.Vetoed,
 ];
 
-export function StateTag({ state, size = 'normal', wide = false }: Props) {
+export function StateTag({ state, size = 'normal', wide = false, className }: Props) {
   const [mode, setMode] = useState<string>();
   const [tooltip, setTooltip] = useState<string>();
   const [visible, setVisible] = useState<boolean>(false);
@@ -89,7 +90,7 @@ export function StateTag({ state, size = 'normal', wide = false }: Props) {
       <Tag mode="new">new</Tag>
       <Tag mode="activity">activity</Tag> */}
       {visible && (
-        <StateWrapperStyled>
+        <StateWrapperStyled className={className}>
           <StateTagStyled wide={wide} title={tooltip} label={state} mode={mode} size={size} />
         </StateWrapperStyled>
       )}

packages/react-app/src/services/quest.service.ts

@@ -24,7 +24,7 @@ import {
   fetchActiveQuestEntitiesLight,
   fetchQuestRewardTokens,
 } from 'src/queries/quests.query';
-import { DEFAULT_CLAIM_EXECUTION_DELAY_MS, ENUM_CLAIM_STATE, IS_DEV, TOKENS } from '../constants';
+import { DEFAULT_CLAIM_EXECUTION_DELAY_MS, IS_DEV, TOKENS } from '../constants';
 import { Logger } from '../utils/logger';
 import { fromBigNumber, toBigNumber } from '../utils/web3.utils';
 import {
@@ -270,11 +270,7 @@ export async function fetchQuestClaims(quest: QuestModel): Promise<ClaimModel[]>
         } as ClaimModel;
       }),
   ).then((claims) =>
-    claims.sort(
-      (a: ClaimModel, b: ClaimModel) =>
-        Object.values(ENUM_CLAIM_STATE).indexOf(a.state!) -
-        Object.values(ENUM_CLAIM_STATE).indexOf(b.state!),
-    ),
+    claims.sort((a: ClaimModel, b: ClaimModel) => b.executionTimeMs! - a.executionTimeMs!),
   );
 }