feat(trezor): control for selecting account (#3048)

* chore: trezor setup * feat(trezor): sign and send transaction * feat(trezor): display approve tx error in modal * fix(trezor): use gas price for tx * feat(trezor): sign typed data * fix(trezor): display icon in pending tx modal * chore: fix trezor icon * fix(trezor): allow switching network * feat(trezor): selector for account index * refactor(trezor): extract sendTransactionHandler * refactor(trezor): extract TrezorConnector * chore: fix double activation * fix: fix metamask approving banner conditions * chore: fix gasPrice * feat(wallets): display connection error in modal * fix: dispose trezor on connection fail * fix: deactivate connector on trezor disconnect * chore: merge develop * chore: fix * chore: temp fix * chore: temp fix * refactor: address code review issues * chore: revert fix * fix: clean state on deactivate * chore: refactor * feat(trezor): load first 100 accounts * feat(trezor): select account index in one click * feat(trezor): hide the wallet under feature-flag * chore: hide Trezor by feature-flag * feat(trezor): display accounts balances * feat: add trezor account select functionality * chore: fix files location * refactor: integrate hardware wallet account selector * refactor: refactor AccountSelectorModal * fix: short addresses in list * fix: indicate account changes * feat(wallets): display snackbar on hardware wallet account changes * chore: deprecate old module * chore: docs * feat: display wallet name and icon * chore: fix tests for new jest * feat: add trezor account select functionality * feat: add trezor account select functionality --------- Co-authored-by: shoom3301 <[email protected]>
cowprotocol · Aug 21, 2023 · e391f96 · e391f96
1 parent 62eb3e0
commit e391f96
Show file tree

Hide file tree

Showing 58 changed files with 1,439 additions and 293 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,7 @@
   "recommendations": [
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner"
   ]
 }
diff --git a/...end/src/common/hooks/useCancelOrder/__snapshots__/useSendOnChainCancellation.test.ts.snap b/...end/src/common/hooks/useCancelOrder/__snapshots__/useSendOnChainCancellation.test.ts.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`useSendOnChainCancellation() + useGetOnChainCancellation() When a transaction is sent Then should change an order status, set a tx hash to order and add the transaction to store 1`] = `
-Array [
-  Object {
+[
+  {
     "hash": "0xcfwj23g4fwe111",
-    "onChainCancellation": Object {
+    "onChainCancellation": {
       "orderId": "xx1",
       "sellTokenSymbol": "COW",
     },
@@ -13,17 +13,17 @@ Array [
 `;
 
 exports[`useSendOnChainCancellation() + useGetOnChainCancellation() When a transaction is sent Then should change an order status, set a tx hash to order and add the transaction to store 2`] = `
-Array [
-  Object {
+[
+  {
     "chainId": 1,
     "id": "xx1",
   },
 ]
 `;
 
 exports[`useSendOnChainCancellation() + useGetOnChainCancellation() When a transaction is sent Then should change an order status, set a tx hash to order and add the transaction to store 3`] = `
-Array [
-  Object {
+[
+  {
     "chainId": 1,
     "hash": "0xcfwj23g4fwe111",
     "id": "xx1",
@@ -32,8 +32,8 @@ Array [
 `;
 
 exports[`useSendOnChainCancellation() + useGetOnChainCancellation() When is ETH-flow order, then should call eth-flow contract 1`] = `
-Array [
-  Object {
+[
+  {
     "appData": "0x001",
     "buyAmount": "2",
     "buyToken": "0xDEf1CA1fb7FBcDC777520aa7f396b4E015F497aB",
@@ -44,8 +44,8 @@ Array [
     "sellAmount": "1",
     "validTo": "34245345432",
   },
-  Object {
-    "gasLimit": Object {
+  {
+    "gasLimit": {
       "hex": "0x78",
       "type": "BigNumber",
     },
@@ -54,10 +54,10 @@ Array [
 `;
 
 exports[`useSendOnChainCancellation() + useGetOnChainCancellation() When is NOT ETH-flow order, then should call settlement contract 1`] = `
-Array [
+[
   "xx1",
-  Object {
-    "gasLimit": Object {
+  {
+    "gasLimit": {
       "hex": "0xf0",
       "type": "BigNumber",
     },

diff --git a/apps/cowswap-frontend/src/common/pure/ButtonSecondary/index.tsx b/apps/cowswap-frontend/src/common/pure/ButtonSecondary/index.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components/macro'
+
+export const ButtonSecondary = styled.button`
+  background: var(--cow-color-lightBlue-opacity-90);
+  color: var(--cow-color-lightBlue);
+  font-size: 12px;
+  font-weight: 600;
+  border: 0;
+  box-shadow: none;
+  border-radius: 12px;
+  position: relative;
+  transition: background 0.2s ease-in-out;
+  min-height: 35px;
+  padding: 0 12px;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--cow-color-lightBlue-opacity-80);
+  }
+`
diff --git a/apps/cowswap-frontend/src/common/pure/Modal/index.tsx b/apps/cowswap-frontend/src/common/pure/Modal/index.tsx
@@ -136,7 +136,7 @@ export const CowModal = styled(Modal)<{
 
     ${ContentWrapper} {
       ${({ theme }) => theme.mediaWidth.upToSmall`
-        margin: 62px auto 0;
+        margin: 82px auto 0;
       `}
     }
   }

diff --git a/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx b/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx
@@ -8,7 +8,7 @@ import styled, { css } from 'styled-components/macro'
 export const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;
-  font-weight: 500;
+  font-weight: 600;
   color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;

diff --git a/apps/cowswap-frontend/src/common/pure/SelectDropdown/index.tsx b/apps/cowswap-frontend/src/common/pure/SelectDropdown/index.tsx
@@ -0,0 +1,29 @@
+import styled from 'styled-components/macro'
+
+export const SelectDropdown = styled.select`
+  border-radius: 12px;
+  padding: 8px 34px 8px 8px;
+  border-radius: 12px;
+  appearance: none;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+  width: 100%;
+  outline: none;
+  border: 1px solid var(--cow-color-border);
+  color: var(--cow-color-text1);
+  background: linear-gradient(45deg, transparent 50%, var(--cow-color-lightBlue) 50%) calc(100% - 13px) calc(13px) / 5px
+      5px no-repeat,
+    linear-gradient(135deg, var(--cow-color-lightBlue) 50%, transparent 50%) calc(100% - 8px) calc(13px) / 5px 5px
+      no-repeat,
+    linear-gradient(to right, var(--cow-color-lightBlue-opacity-90), var(--cow-color-lightBlue-opacity-90)) 100% 0 /
+      26px 100% no-repeat;
+
+  &:hover {
+    background: linear-gradient(45deg, transparent 50%, var(--cow-color-lightBlue) 50%) calc(100% - 13px) calc(13px) /
+        5px 5px no-repeat,
+      linear-gradient(135deg, var(--cow-color-lightBlue) 50%, transparent 50%) calc(100% - 8px) calc(13px) / 5px 5px
+        no-repeat,
+      linear-gradient(to right, var(--cow-color-lightBlue-opacity-80), var(--cow-color-lightBlue-opacity-80)) 100% 0 /
+        26px 100% no-repeat;
+  }
+`
diff --git a/apps/cowswap-frontend/src/cosmos.decorator.tsx b/apps/cowswap-frontend/src/cosmos.decorator.tsx
@@ -1,4 +1,5 @@
 import '@reach/dialog/styles.css'
+import './polyfills'
 
 import React, { StrictMode, useCallback, useContext, ReactNode } from 'react'
 
@@ -22,6 +23,8 @@ import { injectedConnection } from 'modules/wallet/web3-react/connection/injecte
 
 import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
 
+import { WalletUpdater } from './modules/wallet'
+
 const DarkModeToggleButton = styled.button`
   display: flex;
   align-items: center;
@@ -102,6 +105,7 @@ const Fixture = ({ children }: { children: ReactNode }) => {
             <LanguageProvider>
               <Web3ReactProvider connectors={[[connector, hooks]]} network={chainId}>
                 <BlockNumberProvider>
+                  <WalletUpdater />
                   <Wrapper>
                     <DarkModeToggle>
                       <WrapperInner>{children}</WrapperInner>

diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx
@@ -6,6 +6,8 @@ import 'utils/sentry'
 import { Provider as AtomProvider } from 'jotai'
 import { StrictMode } from 'react'
 
+import { SnackbarsWidget } from '@cowswap/snackbars'
+
 import { LanguageProvider } from 'i18n'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
@@ -58,6 +60,7 @@ root.render(
                       <FortuneWidget />
                     </FeatureGuard>
                     <Popups />
+                    <SnackbarsWidget />
                     <AppziButton />
                     <App />
                   </WithLDProvider>

diff --git a/apps/cowswap-frontend/src/legacy/components/Popups/PopupItem.tsx b/apps/cowswap-frontend/src/legacy/components/Popups/PopupItem.tsx
@@ -11,6 +11,9 @@ import { PopupContent } from 'legacy/state/application/reducer'
 import { AnimatedFader, PopupWrapper, StyledClose } from './styled'
 import { TransactionPopup } from './TransactionPopup'
 
+/**
+ * @deprecated use @cowswap/snackbars instead
+ */
 export function PopupItem({
   removeAfterMs,
   content,

diff --git a/apps/cowswap-frontend/src/legacy/components/Popups/index.tsx b/apps/cowswap-frontend/src/legacy/components/Popups/index.tsx
@@ -74,6 +74,9 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding:
   }
 `
 
+/**
+ * @deprecated use @cowswap/snackbars instead
+ */
 export function Popups() {
   // get all popups
   const activePopups = useActivePopups()

diff --git a/apps/cowswap-frontend/src/legacy/state/application/hooks.ts b/apps/cowswap-frontend/src/legacy/state/application/hooks.ts
@@ -65,7 +65,9 @@ export function useTogglePrivacyPolicy(): () => void {
   return useToggleModal(ApplicationModal.PRIVACY_POLICY)
 }
 
-// returns a function that allows removing a popup via its key
+/**
+ * @deprecated use @cowswap/snackbars instead
+ */
 export function useRemovePopup(): (key: string) => void {
   const dispatch = useAppDispatch()
   return useCallback(
@@ -76,7 +78,9 @@ export function useRemovePopup(): (key: string) => void {
   )
 }
 
-// get the list of active popups
+/**
+ * @deprecated use @cowswap/snackbars instead
+ */
 export function useActivePopups(): AppState['application']['popupList'] {
   const list = useAppSelector((state: AppState) => state.application.popupList)
   return useMemo(() => list.filter((item) => item.show), [list])
@@ -97,8 +101,9 @@ export function useCloseModals(): () => void {
   return useCallback(() => dispatch(setOpenModal(null)), [dispatch])
 }
 
-// mod: add removeAfterMs change
-// returns a function that allows adding a popup
+/**
+ * @deprecated use @cowswap/snackbars instead
+ */
 export function useAddPopup(): (content: PopupContent, key?: string, removeAfterMs?: number | null) => void {
   const dispatch = useAppDispatch()
 

diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -385,6 +385,18 @@ export const UniFixedGlobalStyle = css`
 `
 
 export const UniThemedGlobalStyle = css`
+  :root {
+    // CSS Variables
+    --cow-color-text1: ${({ theme }) => theme.text1};
+    --cow-color-text1-opacity-25: ${({ theme }) => theme.text1 + '40'};
+    --cow-color-white: ${({ theme }) => theme.white};
+    --cow-color-blue: ${({ theme }) => theme.bg2};
+    --cow-color-border: ${({ theme }) => theme.grey1};
+    --cow-color-lightBlue: ${({ theme }) => theme.information};
+    --cow-color-lightBlue-opacity-90: ${({ theme }) => transparentize(0.9, theme.information)};
+    --cow-color-lightBlue-opacity-80: ${({ theme }) => transparentize(0.8, theme.information)};
+  }
+
   html {
     color: ${({ theme }) => theme.text1};
     background-color: ${({ theme }) => theme.bg2};

diff --git a/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/index.cosmos.tsx
@@ -0,0 +1,39 @@
+import { useSelect } from 'react-cosmos/client'
+import styled from 'styled-components/macro'
+
+import { AccountDetails } from './index'
+
+const defaultProps = {
+  pendingTransactions: [],
+  confirmedTransactions: [],
+  toggleWalletModal: () => void 0,
+  toggleAccountSelectorModal: () => void 0,
+  handleCloseOrdersPanel: () => void 0,
+}
+
+const Wrapper = styled.div`
+  width: 800px;
+  margin: 100px auto;
+  padding: 20px;
+`
+
+// const chainId = 5
+
+function Host() {
+  const [isHardWare] = useSelect('Is hardware wallet', {
+    options: ['true', 'false'],
+    defaultValue: 'false',
+  })
+
+  return (
+    <Wrapper>
+      <AccountDetails {...defaultProps} forceHardwareWallet={isHardWare === 'true'} />
+    </Wrapper>
+  )
+}
+
+const Fixtures = {
+  default: <Host />,
+}
+
+export default Fixtures