1334/activity orders from api rebased (#1639)

* Added /account/<address>/orders api endpoint * Added helper function to get explorer address link * Requiring needed properties instead of concrete types on utils fns * Added addOrUpdateOrdersBatch to orders/actions * Added useAddOrUpdateOrdersBatch to orders/hooks * Added addOrUpdateOrdersBatch to orders/reducer * Added APIOrdersUpdater that checks for orders from API on connection * Adjusted displayed orders: - At most 10 regular orders and as much pending as there are - Show only connected account orders - Sort orders by creation date descending * Show only txs for connected account * Refactoring * Don't actually need a helper fn... * Added comment to make sort more explicit * Using 'Link to Explorer' instead of 'Clear activities' * Refactoring * Refactor: cache tokens loaded const * Refactor: removed duplicated css property * Refactor: removed duplicated CSS property * Refactor: extracted function transformApiOrderToStoreOrder * Refactor: renamed _orders to apiOrders * Refactor: removed duplicated CSS property * Adjusting `View all orders` link size * Added `View all orders` to the bottom of account activity * Refactored computeOrderSummary to deal with pending orders * Computing order summary for orders loaded from API * Setting isCancelling state if order is pending and cancelled on API * Actually syncing `isCancelling` flag for existing orders * Refactor: created const for magic number MAXIMUM_ORDERS_TO_DISPLAY * Refactor: simplified addOrUpdateOrdersBatch reducer * Refactor: renamed API -> Api on file name * Refactor: replaced magic number with AMOUNT_OF_ORDERS_TO_FETCH * Refactor: converted classifyLocalStatus fn to a map * Refactor: removed `Batch` from addOrUpdateOrders * Refactor: moved error exit condition up * 1334/load new tokens not yet loaded (#1504) * Added non-hook methods for dealing with contracts * New hook useTokensLazy * Exporting stuff from original codebase * Added getMultipleCallsResults under custom/state/multicall/utils Non-hook way of fetching multiple onchain queries through multicall * Refactor ApiOrdersUpdater to load tokens not yet in the UI * Typo fix * 1334/do not refetch when token added (#1536) * Removing annoying log * No longer re-fetching orders when a token is added to the list Co-authored-by: Leandro Boscariol <[email protected]> * Refactored useTokensLazy: - Added contracts cache - Improved comments * Improved doc string on multicall utils Co-authored-by: Leandro Boscariol <[email protected]> * Fix new Erc20 import path * Adjust to new multicall interface and fetchChunk changes * Adapt to renamed of ApiOrderStatus to OrderTransitionStatus * Adjusting (again) styles for `view all activity` * Handling presignaturePending state from backend * The order is concrete at this point, no need for `?.` * 1334/only update connected wallet (#1684) * Only update cancelled orders for connected wallet * Only check for unfillable orders for connected wallet * Only check pending orders for connected wallet * Always create a new state object when adding an order (#1686) Co-authored-by: Leandro Boscariol <[email protected]> * Refactor: comparing account with order.owner lowercased for safety Co-authored-by: Leandro Boscariol <[email protected]> * Added new hook useTokenLazyNoMulticall to fetch token data one by one * Using new hook to fetch tokens instead of multicall * Removed multicall/utils * Removed useTokensLazy hook * Renamed file useTokensLazy to useTokenLazy * Renamed useTokenLazyNoMulticall to useTokenLazy * Removed unused import * Updated debug log messages * Small refactor in #1639 (#1857) * Only init bytes32Contract if we really need to * Fixing build error: only proceed if library is set Co-authored-by: Leandro Boscariol <[email protected]> * 1334/with swr (#1906) * Refactor: removed unnecessary variable * Added SWR as dev dependency * Added hook useApiOrders using useSWR hook * Using new hook for fetching api orders * Removed unused imports... Co-authored-by: Leandro Boscariol <[email protected]> Co-authored-by: Leandro Boscariol <[email protected]> Co-authored-by: Anxo Rodriguez <[email protected]>
gnosis · Nov 29, 2021 · 2fc6c81 · 2fc6c81
1 parent 8663505
commit 2fc6c81
Show file tree

Hide file tree

Showing 29 changed files with 673 additions and 125 deletions.
diff --git a/package.json b/package.json
@@ -128,6 +128,7 @@
     "start-server-and-test": "^1.11.0",
     "styled-components": "^5.3.0",
     "styled-system": "^5.1.5",
+    "swr": "^1.0.1",
     "typechain": "^5.0.0",
     "typescript": "^4.4.2",
     "ua-parser-js": "^0.7.28",

diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx
@@ -134,7 +134,6 @@ const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>`
   font-size: 0.825rem;
   color: ${({ theme }) => theme.text3};
   margin-left: 1rem;
-  font-size: 0.825rem;
   display: flex;
   :hover {
     color: ${({ theme }) => theme.text2};

diff --git a/src/custom/abis/types/index.ts b/src/custom/abis/types/index.ts
@@ -4,3 +4,5 @@
 export type { GPv2Settlement } from './GPv2Settlement'
 
 export { GPv2Settlement__factory } from './factories/GPv2Settlement__factory'
+
+export * from '@src/abis/types'
diff --git a/src/custom/api/gnosisProtocol/api.ts b/src/custom/api/gnosisProtocol/api.ts
@@ -68,7 +68,7 @@ const API_NAME = 'Gnosis Protocol'
 const ENABLED = process.env.REACT_APP_PRICE_FEED_GP_ENABLED !== 'false'
 /**
  * Unique identifier for the order, calculated by keccak256(orderDigest, ownerAddress, validTo),
-   where orderDigest = keccak256(orderStruct). bytes32.
+ * where orderDigest = keccak256(orderStruct). bytes32.
  */
 export type OrderID = string
 export type ApiOrderStatus = 'fulfilled' | 'expired' | 'cancelled' | 'presignaturePending' | 'open'
@@ -95,6 +95,7 @@ export interface OrderMetaData {
   signature: string
   signingScheme: SigningSchemeValue
   status: ApiOrderStatus
+  receiver: string
 }
 
 export interface TradeMetaData {
@@ -330,6 +331,26 @@ export async function getOrder(chainId: ChainId, orderId: string): Promise<Order
   }
 }
 
+export async function getOrders(chainId: ChainId, owner: string, limit = 1000, offset = 0): Promise<OrderMetaData[]> {
+  console.log(`[api:${API_NAME}] Get orders for `, chainId, owner, limit, offset)
+
+  const queryString = stringify({ limit, offset }, { addQueryPrefix: true })
+
+  try {
+    const response = await _get(chainId, `/account/${owner}/orders/${queryString}`)
+
+    if (!response.ok) {
+      const errorResponse: ApiErrorObject = await response.json()
+      throw new OperatorError(errorResponse)
+    } else {
+      return response.json()
+    }
+  } catch (error) {
+    console.error('Error getting orders information:', error)
+    throw new OperatorError(UNHANDLED_ORDER_ERROR)
+  }
+}
+
 type GetTradesParams = {
   chainId: ChainId
   owner: string

diff --git a/src/custom/api/gnosisProtocol/hooks.ts b/src/custom/api/gnosisProtocol/hooks.ts
@@ -0,0 +1,15 @@
+import useSWR from 'swr'
+
+import { useActiveWeb3React } from 'hooks/web3'
+import { getOrders, OrderMetaData } from 'api/gnosisProtocol/api'
+import { AMOUNT_OF_ORDERS_TO_FETCH } from 'constants/index'
+
+export function useApiOrders(account?: string | null): OrderMetaData[] | undefined {
+  const { chainId } = useActiveWeb3React()
+
+  const { data } = useSWR<OrderMetaData[]>(['orders', account, chainId], () =>
+    chainId && account ? getOrders(chainId, account, AMOUNT_OF_ORDERS_TO_FETCH) : []
+  )
+
+  return data
+}
diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
@@ -1,9 +1,6 @@
-import React, { useCallback, Fragment } from 'react'
-import { batch, useDispatch } from 'react-redux'
+import React, { Fragment } from 'react'
 
 import { useActiveWeb3React } from 'hooks/web3'
-import { AppDispatch } from 'state'
-import { clearAllTransactions } from 'state/enhancedTransactions/actions'
 import { getExplorerLabel, shortenAddress } from 'utils'
 
 import Copy from 'components/Copy'
@@ -17,8 +14,6 @@ import WalletConnectIcon from 'assets/images/walletConnectIcon.svg'
 import FortmaticIcon from 'assets/images/fortmaticIcon.png'
 import PortisIcon from 'assets/images/portisIcon.png'
 import Identicon from 'components/Identicon'
-import { LinkStyledButton } from 'theme'
-import { clearOrders } from 'state/orders/actions'
 import { NETWORK_LABELS } from 'components/Header'
 import {
   WalletName,
@@ -46,6 +41,8 @@ import { MouseoverTooltip } from 'components/Tooltip'
 import { supportedChainId } from 'utils/supportedChainId'
 import { groupActivitiesByDay, useMultipleActivityDescriptors } from 'hooks/useRecentActivity'
 import { CreationDateText } from 'components/AccountDetails/Transaction/styled'
+import { ExternalLink } from 'theme'
+import { getExplorerAddressLink } from 'utils/explorer'
 
 const DATE_FORMAT_OPTION: Intl.DateTimeFormatOptions = {
   dateStyle: 'long',
@@ -153,17 +150,8 @@ export default function AccountDetails({
   const { account, connector, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
   const walletInfo = useWalletInfo()
-  // const theme = useContext(ThemeContext)
-  const dispatch = useDispatch<AppDispatch>()
 
-  const clearAllActivityCallback = useCallback(() => {
-    if (chainId) {
-      batch(() => {
-        dispatch(clearAllTransactions({ chainId }))
-        dispatch(clearOrders({ chainId }))
-      })
-    }
-  }, [dispatch, chainId])
+  const explorerOrdersLink = account && connectedChainId && getExplorerAddressLink(connectedChainId, account)
   const explorerLabel = chainId && account ? getExplorerLabel(chainId, account, 'address') : undefined
 
   const activities =
@@ -216,7 +204,7 @@ export default function AccountDetails({
               {chainId && account && (
                 <AddressLink
                   hasENS={!!ENSName}
-                  isENS={ENSName ? true : false}
+                  isENS={!!ENSName}
                   href={getEtherscanLink(chainId, ENSName ? ENSName : account, 'address')}
                 >
                   {explorerLabel} ↗
@@ -234,7 +222,7 @@ export default function AccountDetails({
             <h5>
               Recent Activity <span>{`(${activityTotalCount})`}</span>
             </h5>
-            <LinkStyledButton onClick={clearAllActivityCallback}>Clear activity</LinkStyledButton>
+            {explorerOrdersLink && <ExternalLink href={explorerOrdersLink}>View all orders</ExternalLink>}
           </span>
 
           <div>
@@ -245,6 +233,7 @@ export default function AccountDetails({
                 {renderActivities(activities)}
               </Fragment>
             ))}
+            {explorerOrdersLink && <ExternalLink href={explorerOrdersLink}>View all orders</ExternalLink>}
           </div>
         </LowerSection>
       ) : (

diff --git a/src/custom/components/AccountDetails/styled.ts b/src/custom/components/AccountDetails/styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components/macro'
 import { CopyIcon, TransactionStatusText } from 'components/Copy'
-import { LinkStyledButton } from 'theme'
+import { LinkStyledButton, StyledLink } from 'theme'
 import {
   WalletName,
   AccountSection as AccountSectionMod,
@@ -208,10 +208,14 @@ export const LowerSection = styled.div`
   > div {
     display: flex;
     flex-flow: column wrap;
-    padding: 0;
     width: 100%;
     background-color: inherit;
     padding: 0 0 48px;
+
+    ${StyledLink} {
+      align-self: center;
+      margin: 20px 0;
+    }
   }
 
   h5 {
@@ -227,14 +231,16 @@ export const LowerSection = styled.div`
     }
   }
 
-  ${LinkStyledButton} {
+  ${LinkStyledButton},${StyledLink} {
     opacity: 0.7;
     color: ${({ theme }) => theme.text1};
 
+    text-decoration: underline;
+    font-size: 14px;
+
     &:hover {
       opacity: 1;
     }
-  }
 `
 
 const NetworkCardUni = styled(YellowCard)`

diff --git a/src/custom/components/SearchModal/ImportRow/ImportRowMod.tsx b/src/custom/components/SearchModal/ImportRow/ImportRowMod.tsx
@@ -35,7 +35,6 @@ const NameOverflow = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  text-overflow: ellipsis;
   max-width: 140px;
   font-size: 12px;
 `

diff --git a/src/custom/constants/index.ts b/src/custom/constants/index.ts
@@ -106,5 +106,8 @@ export const FEE_SIZE_THRESHOLD = new Fraction(10, 100) // 30%
 // default value provided as userAddress to Paraswap API if the user wallet is not connected
 export const SOLVER_ADDRESS = '0xa6ddbd0de6b310819b49f680f65871bee85f517e'
 
+export const MAXIMUM_ORDERS_TO_DISPLAY = 10
+export const AMOUNT_OF_ORDERS_TO_FETCH = 100
+
 // last wallet provider key used in local storage
 export const STORAGE_KEY_LAST_PROVIDER = 'lastProvider'
diff --git a/src/custom/hooks/useContract.ts b/src/custom/hooks/useContract.ts
@@ -1,4 +1,5 @@
 import { Contract } from '@ethersproject/contracts'
+import { Web3Provider } from '@ethersproject/providers'
 import { useActiveWeb3React } from 'hooks/web3'
 
 import { useContract } from '@src/hooks/useContract'
@@ -7,8 +8,11 @@ import { GP_SETTLEMENT_CONTRACT_ADDRESS } from 'constants/index'
 import { SupportedChainId as ChainId } from 'constants/chains'
 
 import ENS_ABI from 'abis/ens-registrar.json'
+import { getContract } from 'utils'
+import ERC20_ABI from 'abis/erc20.json'
+import ERC20_BYTES32_ABI from 'abis/erc20_bytes32.json'
 
-import { GPv2Settlement } from 'abis/types'
+import { GPv2Settlement, Erc20 } from 'abis/types'
 import GPv2_SETTLEMENT_ABI from 'abis/GPv2Settlement.json'
 
 export * from '@src/hooks/useContract'
@@ -40,3 +44,53 @@ export function useENSRegistrarContract(withSignerIfPossible?: boolean): Contrac
   }
   return useContract(address, ENS_ABI, withSignerIfPossible)
 }
+
+/**
+ * Non-hook version of useContract
+ */
+function _getContract<T extends Contract = Contract>(
+  addressOrAddressMap: string | { [chainId: number]: string } | undefined,
+  ABI: any,
+  withSignerIfPossible = true,
+  library?: Web3Provider,
+  account?: string,
+  chainId?: ChainId
+): T | null {
+  if (!addressOrAddressMap || !ABI || !library || !chainId) return null
+  let address: string | undefined
+  if (typeof addressOrAddressMap === 'string') address = addressOrAddressMap
+  else address = addressOrAddressMap[chainId]
+  if (!address) return null
+  try {
+    return getContract(address, ABI, library, withSignerIfPossible && account ? account : undefined) as T
+  } catch (error) {
+    console.error('Failed to get contract', error)
+    return null
+  }
+}
+
+/**
+ * Non-hook version of useTokenContract
+ */
+export function getTokenContract(
+  tokenAddress?: string,
+  withSignerIfPossible?: boolean,
+  library?: Web3Provider,
+  account?: string,
+  chainId?: ChainId
+): Erc20 | null {
+  return _getContract<Erc20>(tokenAddress, ERC20_ABI, withSignerIfPossible, library, account, chainId)
+}
+
+/**
+ * Non-hook version of useBytes32TokenContract
+ */
+export function getBytes32TokenContract(
+  tokenAddress?: string,
+  withSignerIfPossible?: boolean,
+  library?: Web3Provider,
+  account?: string,
+  chainId?: ChainId
+): Contract | null {
+  return _getContract(tokenAddress, ERC20_BYTES32_ABI, withSignerIfPossible, library, account, chainId)
+}