Merge branch 'dev' into whitelist_players

.gitignore

@@ -37,4 +37,10 @@ yarn-error.log*
 
 .vercel
 
-.yarn
+.yarn/
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

packages/hardhat/package.json

@@ -33,7 +33,7 @@
     "@nomiclabs/hardhat-etherscan": "^3.1.0",
     "@nomiclabs/hardhat-waffle": "^2.0.0",
     "@nomiclabs/hardhat-web3": "^2.0.0",
-    "@openzeppelin/contracts": "^4.7.3",
+    "@openzeppelin/contracts": "^4.9.2",
     "@tenderly/hardhat-tenderly": "1.0.10",
     "@typechain/ethers-v5": "^5.0.0",
     "chalk": "^4.1.0",

packages/react-app/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@1hive/1hive-ui": "^1.0.2",
     "@1hive/use-wallet": "npm:@1hive/[email protected]",
+    "@babel/runtime": "7.18.0",
     "@babel/types": "^7.15.6",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
@@ -49,11 +50,11 @@
     "node-sass": "^7.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-app-rewire-hot-loader": "^2.0.1",
     "react-app-rewired": "^2.1.8",
     "react-dev-utils": "^11.0.4",
     "react-device-detect": "^1.17.0",
+    "react-dom": "^17.0.2",
     "react-focus-within": "^2.0.2",
     "react-hot-loader": "^4.13.0",
     "react-icons": "^4.2.0",
@@ -109,7 +110,7 @@
     "rimraf": "^2.6.2",
     "sass": "^1.39.0",
     "sass-loader": "^11.0.1",
-    "semver": "^7.3.8",
+    "semver": "^7.5.2",
     "svgo": "^1.3.2",
     "ts-jest": "^27.1.4"
   },

packages/react-app/src/app.tsx

@@ -40,24 +40,24 @@ function App() {
   return (
     <AppStyled theme={currentTheme}>
       <PageContextProvider>
-        <WalletProvider>
-          <TransactionContextProvider>
-            <FilterContextProvider>
-              <Main
-                assetsUrl="/aragon-ui/"
-                layout={false}
-                scrollView={false}
-                theme={currentTheme ?? DEFAULT_THEME}
-              >
-                <BrowserRouter>
-                  <ErrorBoundary>
+        <TransactionContextProvider>
+          <FilterContextProvider>
+            <Main
+              assetsUrl="/aragon-ui/"
+              layout={false}
+              scrollView={false}
+              theme={currentTheme ?? DEFAULT_THEME}
+            >
+              <BrowserRouter>
+                <ErrorBoundary>
+                  <WalletProvider>
                     <Routes />
-                  </ErrorBoundary>
-                </BrowserRouter>
-              </Main>
-            </FilterContextProvider>
-          </TransactionContextProvider>
-        </WalletProvider>
+                  </WalletProvider>
+                </ErrorBoundary>
+              </BrowserRouter>
+            </Main>
+          </FilterContextProvider>
+        </TransactionContextProvider>
       </PageContextProvider>
     </AppStyled>
   );

packages/react-app/src/assets/piggy.tsx

@@ -12,9 +12,10 @@ export default function Piggy() {
   return (
     <WrapperStyled>
       <svg
-        width="237"
-        height="202"
-        viewBox="0 0 237 202"
+        width="100%"
+        height="100%"
+        // height="202"
+        // viewBox="0 0 237 202"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >

packages/react-app/src/components/account/account-module.tsx

@@ -158,7 +158,7 @@ function AccountModule({ compact = false }: Props) {
         <Button
           icon={<IconConnect />}
           label={`Switch wallet to ${name}`}
-          onClick={() => wallet.changeNetwork()}
+          onClick={() => wallet.changeNetwork(undefined, false)}
           display={compact ? 'icon' : 'all'}
           mode="strong"
         />

packages/react-app/src/components/back-to-top.tsx

@@ -6,7 +6,8 @@ import { useEffect, useState } from 'react';
 const TopRightCornerStyled = styled.div`
   position: absolute;
   bottom: ${GUpx(2)};
-  right: ${GUpx(2)};
+  right: calc(50vw - 10px);
+  width: 40px;
 `;
 
 export function BackToTop() {

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

@@ -74,7 +74,7 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
   const { walletAddress, walletConnected } = useWallet();
   const { transaction } = useTransactionContext();
   const [status, setStatus] = useState<ClaimStatus | undefined>(claim.state);
-  const { below } = useViewport();
+  const { below, width } = useViewport();
   const [waitForClose, setWaitForClose] = useState(false);
   const [actionButton, setActionButton] = useState<ReactNode>();
   const [challengeReason, setChallengeReason] = useState<string>();
@@ -92,6 +92,8 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
     );
   }, [claim.state, claimable]);
 
+  const isSmall = useMemo(() => below('medium'), [width]);
+
   const timer = useMemo(
     () =>
       !claimable &&
@@ -230,18 +232,18 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
           <div className="wide">
             <Outset>
               <ChildSpacer
-                size={below('medium') ? 0 : 16}
+                size={isSmall ? 0 : 16}
                 justify="start"
-                align={below('medium') ? 'start' : 'center'}
+                align={isSmall ? 'start' : 'center'}
                 buttonEnd
-                vertical={below('medium')}
+                vertical={isSmall}
               >
                 {status && (
                   <FieldInput label="Status" isLoading={isLoading || status === ClaimStatus.None}>
                     <StatusTag status={status} className="pl-0" />
                   </FieldInput>
                 )}
-                <AddressWrapperStyled isSmallScreen={below('medium')}>
+                <AddressWrapperStyled isSmallScreen={isSmall}>
                   <AddressFieldInput
                     id="playerAddress"
                     value={claim.playerAddress}

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

@@ -1,13 +1,15 @@
-import { Button, SearchInput, DropDown, useTheme, useViewport } from '@1hive/1hive-ui';
+import { Button, DropDown, useTheme, useViewport } from '@1hive/1hive-ui';
 import { useEffect, useState, useMemo } from 'react';
 import { useFilterContext } from 'src/contexts/filter.context';
 import { QuestStatus } from 'src/enums/quest-status.enum';
 import { ThemeInterface } from 'src/styles/theme';
 import { GUpx } from 'src/utils/style.util';
 import styled, { css } from 'styled-components';
+import { QuestPlayStatus } from 'src/enums/quest-play-status.enum';
 import { DEFAULT_FILTER } from '../constants';
 import DateFieldInput from './field-input/date-field-input';
 import { FieldInput } from './field-input/field-input';
+import TextFieldInput from './field-input/text-field-input';
 
 // #region StyledComponents
 
@@ -29,6 +31,8 @@ const FilterWrapperStyled = styled.div<{
 
   padding: 0 ${GUpx(2)};
 
+  column-gap: ${GUpx(4)};
+
   ${({ isSmallResolution }) =>
     isSmallResolution
       ? css`
@@ -72,14 +76,23 @@ const ButtonLineStyled = styled.div<{ isSmallResolution: boolean }>`
   }
 `;
 
+const SearchTextInputWrapperStyled = styled.div<{ wide: boolean }>`
+  flex-grow: 1;
+  ${({ wide }) => wide && 'width: 100%;'}
+`;
+
 // #endregion
 
 type Props = {
   compact?: boolean;
 };
 
 const QuestStatusOptions = [QuestStatus.Active, QuestStatus.Expired, QuestStatus.All];
-
+const QuestPlayStatusOptions = [
+  QuestPlayStatus.All,
+  QuestPlayStatus.Played,
+  QuestPlayStatus.Unplayed,
+];
 export function Filter({ compact }: Props) {
   const { filter, setFilter, toggleFilter } = useFilterContext();
   const theme = useTheme();
@@ -96,36 +109,19 @@ export function Filter({ compact }: Props) {
     <>
       {(isFilterShown || !isSmallResolution) && (
         <FilterWrapperStyled colDisplay={isSmallResolution} isSmallResolution={isSmallResolution}>
-          <FieldInput
-            className="flex-grow"
-            label={!compact ? 'Title' : ''}
-            wide={isSmallResolution}
-            id="filterTitle"
-          >
-            <SearchInput
-              id="filterTitle"
-              placeholder="Search by title"
-              value={filter.title}
-              onChange={(title: string) => setFilter({ ...filter, title })}
-              wide
-              compact={compact}
-            />
-          </FieldInput>
-          <FieldInput
-            className="flex-grow"
-            label={!compact ? 'Description' : ''}
-            wide={isSmallResolution}
-            id="filterDescription"
-          >
-            <SearchInput
-              id="filterDescription"
-              placeholder="Search by description"
-              value={filter.description}
-              onChange={(description: string) => setFilter({ ...filter, description })}
+          <SearchTextInputWrapperStyled wide={isSmallResolution}>
+            <TextFieldInput
+              id="filterSearch"
+              label={!compact ? 'Search' : ''}
               wide
+              placeHolder="Search by title, description, or address"
+              value={filter.search}
+              onChange={(e: any) => setFilter({ ...filter, search: e.currentTarget.value })}
               compact={compact}
+              tooltip="Search accross title, description, and address and return in rank order. There is support for & (AND) and | (OR) operators."
+              isEdit
             />
-          </FieldInput>
+          </SearchTextInputWrapperStyled>
           <DateFieldInput
             id="minExpireTime"
             value={filter.minExpireTime}
@@ -152,6 +148,23 @@ export function Filter({ compact }: Props) {
               compact={compact}
             />
           </FieldInput>
+          <FieldInput
+            label={!compact ? 'Play Status' : ''}
+            wide={isSmallResolution}
+            id="filterPlayStatus"
+          >
+            <StatusDropdownStyled
+              id="filterPlayStatus"
+              items={QuestPlayStatusOptions}
+              borderColor={theme.border}
+              selected={QuestPlayStatusOptions.indexOf(filter.playStatus)}
+              onChange={(i: number) =>
+                setFilter({ ...filter, playStatus: QuestPlayStatusOptions[i] })
+              }
+              wide
+              compact={compact}
+            />
+          </FieldInput>
           <ButtonLineStyled isSmallResolution={isSmallResolution}>
             <Button
               label="Reset"

packages/react-app/src/components/header/index.tsx

@@ -109,7 +109,6 @@ function Header({ children }: Props) {
                   Object.values(networks).find((network) => network.name === networkNames[i])!
                     .chainId!,
                 );
-                // window.location.reload();
               }}
             />
           )}

packages/react-app/src/components/main-view.tsx

@@ -11,6 +11,7 @@ import { Pages } from 'src/enums/pages.enum';
 import Header from './header';
 import Footer from './footer';
 import { BackToTop } from './back-to-top';
+import GuideModal from './modals/guide-modal';
 
 // #region StyledComponents
 
@@ -70,6 +71,7 @@ function MainView({ children }: Props) {
           {page ? children : <Skeleton /> /* TODO Put some spinner here */}
         </ContentWrapperStyled>
         <Footer />
+        <GuideModal />
       </ScrollViewStyled>
       <BackToTop />
     </Root.Provider>

packages/react-app/src/components/modals/challenge-modal.tsx

@@ -38,6 +38,11 @@ const FormStyled = styled(Form)`
 const OpenButtonStyled = styled(Button)`
   margin: ${GUpx(1)};
   width: fit-content;
+
+  &,
+  span {
+    color: #242424;
+  }
 `;
 
 const OpenButtonWrapperStyled = styled.div`
@@ -362,6 +367,7 @@ export default function ChallengeModal({
                 error={touched.reason && errors.reason}
                 onBlur={handleBlur}
                 wide
+                placeHolder="Explain with precision how this claim does not met the quest requirement..."
               />
             </Outset>
           </FormStyled>

packages/react-app/src/components/modals/execute-claim-modal.tsx

@@ -26,6 +26,11 @@ import ModalBase, { ModalCallback } from './modal-base';
 const OpenButtonStyled = styled(Button)`
   margin: ${GUpx(1)};
   width: fit-content;
+
+  &,
+  span {
+    color: #242424;
+  }
 `;
 
 const OpenButtonWrapperStyled = styled.div`

packages/react-app/src/components/modals/fund-modal.tsx

@@ -26,6 +26,10 @@ const FormStyled = styled(Form)`
 const OpenButtonStyled = styled(Button)`
   margin: 0 ${GUpx(1)};
   width: fit-content;
+  &,
+  span {
+    color: #242424;
+  }
 `;
 
 type Props = {