Orders Panel (main PR) (#1198)

* Orders panel component.

* Props update.

* Open ordersPanel on click connected wallet. (#1203)

* WIP - Orders panel part 3 (Add wallet + orders to the sidebar) (#1210)

* Open ordersPanel on click connected wallet.

* Orders in side bar WIP.

* Fix issue types

* Revert "Fix issue types"

This reverts commit cb95c89.

* Fix issue with types 2

* Account details inside orders sidebar.

* Fix import.

* Fix folder name.

Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>

* WIP - Orders panel part 4 (Re-style account details/activity/orders) (#1227)

* Open ordersPanel on click connected wallet.

* Orders in side bar WIP.

* Fix issue types

* Revert "Fix issue types"

This reverts commit cb95c89.

* Fix issue with types 2

* Account details inside orders sidebar.

* Fix import.

* Fix folder name.

* Re-style of account details/activity.

Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>

* WIP - Orders panel part 5 (More styling and tweaking) (#1234)

* Open ordersPanel on click connected wallet.

* Orders in side bar WIP.

* Fix issue types

* Revert "Fix issue types"

This reverts commit cb95c89.

* Fix issue with types 2

* Account details inside orders sidebar.

* Fix import.

* Fix folder name.

* Re-style of account details/activity.

* Orders sidebar styling.

* Orders sidebar styling.

* Orders sidebar styling.

* Orders sidebar styling.

* Orders sidebar styling.

* Transaction update.

* Transaction update.

Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>

* WIP - Orders panel part 6 (Address feedback an wallet issues) (#1249)

* Open ordersPanel on click connected wallet.

* Orders in side bar WIP.

* Fix issue types

* Revert "Fix issue types"

This reverts commit cb95c89.

* Fix issue with types 2

* Account details inside orders sidebar.

* Fix import.

* Fix folder name.

* Re-style of account details/activity.

* Orders sidebar styling.

* Orders sidebar styling.

* Orders sidebar styling.

* Orders sidebar styling.

* Orders sidebar styling.

* Transaction update.

* Transaction update.

* Fix wallet stuff.

* Fix wallet stuff.

* Mobile tx detail indent.

* WIP - Orders panel part 7 (TBD) (#1250)

* tablet size fix

* Fix 1238

Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>

* Rename prop.

* Orders Sidebar --> Slide in effect. (#1270)

* Sidebar slide in.

* Scroll fix.

* Orders Sidebar --> Click to copy move. (#1269)

* Click to copy move.

* Icon wrapper remove.

* Mobile header fixes.

* Re-factor Copy component.

* Cancelling label re-factor + Fix cancellation modal (#1293)

* Cancelling label re-factor.

* Fix close modal/sidebar click event.

* Shimmer effect OPEN orders.

* closeOrdersPanel for FAQ link.

* Refert passing prop, instead open link new tab.

* Update src/custom/components/AccountDetails/Transaction.tsx

Co-authored-by: David <david.sato64@gmail.com>

Co-authored-by: David <david.sato64@gmail.com>

* Orders Sidebar --> Show limit prices + valid to/filled on dates (#1279)

* Add limit price and valid to/filled date.

* Add limit price and valid to/filled date.

* Fixed type of getLimitPrice utils function

* Execution price WIP.

* Styled file for cleanup.

* Styled file for cleanup.

* Fix grid on mobile (Safari).

* comment out getExecutedPrice

* Expired order strike through.

* Unfillable faq link external.

* Price functions for Recent History (#1289)

* Add bignumber, so library matches our dex-js

* Add price utils

* Refactor transaction summary

* Change todo

* Rename variable to executionPrice.

* Delete comment

* Remove comments and improve doc

* Fix path and default value

* Add datatype for api additional data (#1290)

# Summary

Continues #1289, 

Augment the order datatype so we can have the executed volumes. 
Adds the datatype where we can save the API information

It also makes use of this data in the recent history. 

## Not included

Saving the actual data.

Co-authored-by: biocom <michel@gnosis.pm>

* Correction of buy/sell prices.

* Close walletModal on connection success

* Orders panel execution price (#1309)

* Fix decimals bug

* Moved additional info to BaseOrder, everything is serializable

* Added additional info to order fullfilment type

* Passing along additional info when fulfillig order

* Storing additional info on order obj

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>
Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>
Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com>

* Fix price format (#1310)

* Add limit price and valid to/filled date.

* Add limit price and valid to/filled date.

* Fixed type of getLimitPrice utils function

* Execution price WIP.

* Styled file for cleanup.

* Styled file for cleanup.

* Fix grid on mobile (Safari).

* comment out getExecutedPrice

* Expired order strike through.

* Unfillable faq link external.

* Price functions for Recent History (#1289)

* Add bignumber, so library matches our dex-js

* Add price utils

* Refactor transaction summary

* Change todo

* Rename variable to executionPrice.

* Delete comment

* Remove comments and improve doc

* Fix path and default value

* Add datatype for api additional data (#1290)

# Summary

Continues #1289, 

Augment the order datatype so we can have the executed volumes. 
Adds the datatype where we can save the API information

It also makes use of this data in the recent history. 

## Not included

Saving the actual data.

Co-authored-by: biocom <michel@gnosis.pm>

* Correction of buy/sell prices.

* Close walletModal on connection success

* fix price format

* Clean console.log

* Clean console.log

* Price invert fix.

* Orders panel execution price (#1309)

* Fix decimals bug

* Moved additional info to BaseOrder, everything is serializable

* Added additional info to order fullfilment type

* Passing along additional info when fulfillig order

* Storing additional info on order obj

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>

* Style execution price.

* Fix transaction style for longer digits.

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>
Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>
Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com>

* Price out of market iteration 2. (#1346)

* Fix Safari sidebar style issue.

Co-authored-by: Anxo Rodriguez <anxolin@gmail.com>
Co-authored-by: David <david.sato64@gmail.com>
Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>
Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com>

package.json

@@ -172,6 +172,7 @@
     "@sentry/tracing": "^6.11.0",
     "@uniswap/default-token-list": "^2.0.0",
     "@web3-react/walletconnect-connector": "^6.2.0",
+    "bignumber.js": "9.0.1",
     "fast-safe-stringify": "^2.0.8",
     "paraswap": "^4.18.0",
     "react-appzi": "^1.0.4",

src/components/AccountDetails/index.tsx

@@ -5,7 +5,7 @@ import { clearAllTransactions } from '../../state/transactions/actions'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 import { AutoRow } from '../Row'
-import Copy from './Copy'
+import Copy from 'components/Copy'
 import Transaction from 'components/AccountDetails/Transaction'
 
 import { SUPPORTED_WALLETS } from 'constants/index'

src/components/Loader/index.tsx

@@ -11,7 +11,7 @@ const rotate = keyframes`
   }
 `
 
-const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
+export const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
   animation: 2s ${rotate} linear infinite;
   height: ${({ size }) => size};
   width: ${({ size }) => size};

src/components/WalletModal/index.tsx

@@ -15,7 +15,7 @@ import usePrevious from '../../hooks/usePrevious'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from 'theme'
-import AccountDetails from 'components/AccountDetails'
+import AccountDetails from '@src/components/AccountDetails'
 import { Trans } from '@lingui/macro'
 
 import Modal from '../Modal'

src/custom/components/AccountDetails/AccountDetailsMod.tsx

@@ -216,13 +216,13 @@ export function renderTransactions(transactions: string[]) {
   )
 }
 
-export interface AccountDetailsProps {
-  toggleWalletModal: () => void
-  pendingTransactions: string[]
-  confirmedTransactions: string[]
-  ENSName?: string
-  openOptions: () => void
-}
+// export interface AccountDetailsProps {
+//   toggleWalletModal: () => void
+//   pendingTransactions: string[]
+//   confirmedTransactions: string[]
+//   ENSName?: string
+//   openOptions: () => void
+// }
 
 /* 
 export default function AccountDetails({