From 2e6f3a8d7fb409e0f845e6a49aabdbda4c23107c Mon Sep 17 00:00:00 2001
From: Janek Rahrt <janek.rahrt@me.com>
Date: Fri, 28 Jan 2022 12:18:19 +0100
Subject: [PATCH] fix: regression tests

fix AddTokenScreen
fix pending transactions duplicates
fix token dups
Co-authored-by: delaaxe <delaaxe@users.noreply.github.com>
---
 .../src/background/trackTransactions.ts       |  9 ++--
 packages/extension/src/manifest.json          |  2 +-
 .../extension/src/ui/components/Header.tsx    | 13 +++++-
 .../extension/src/ui/screens/ActionScreen.tsx |  1 +
 .../src/ui/screens/AddTokenScreen.tsx         | 43 ++++++++++---------
 packages/extension/src/ui/states/tokens.ts    |  5 ++-
 packages/extension/src/ui/utils/addresses.ts  |  2 +-
 7 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/packages/extension/src/background/trackTransactions.ts b/packages/extension/src/background/trackTransactions.ts
index 7156af2d9..1dba547de 100644
--- a/packages/extension/src/background/trackTransactions.ts
+++ b/packages/extension/src/background/trackTransactions.ts
@@ -94,13 +94,12 @@ export class TransactionTracker {
       // add transactions that were added while we were fetching
       this.transactions = [
         ...transactionStatuses,
-        ...this.transactions.filter((transactionStatus) => {
-          return Boolean(
-            transactionStatuses.find(
+        ...this.transactions.filter(
+          (transactionStatus) =>
+            !transactionStatuses.find(
               ({ hash }) => hash === transactionStatus.hash,
             ),
-          )
-        }),
+        ),
       ]
       this.listeners.forEach((listener) => {
         listener(this.transactions)
diff --git a/packages/extension/src/manifest.json b/packages/extension/src/manifest.json
index e40fb7e99..bb45ee905 100644
--- a/packages/extension/src/manifest.json
+++ b/packages/extension/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Argent X StarkNet Wallet",
   "description": "The security of Ethereum with the scale of StarkNet",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "manifest_version": 2,
   "browser_action": {
     "default_icon": {
diff --git a/packages/extension/src/ui/components/Header.tsx b/packages/extension/src/ui/components/Header.tsx
index 3f9c7d13c..3ee5811e2 100644
--- a/packages/extension/src/ui/components/Header.tsx
+++ b/packages/extension/src/ui/components/Header.tsx
@@ -1,8 +1,17 @@
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 
-export const Header = styled.header`
+export const Header = styled.header<{
+  hide?: boolean
+}>`
   display: flex;
   padding: 16px;
   align-items: center;
   justify-content: space-between;
+
+  ${({ hide }) =>
+    hide &&
+    css`
+      visibility: hidden;
+      user-select: none;
+    `}
 `
diff --git a/packages/extension/src/ui/screens/ActionScreen.tsx b/packages/extension/src/ui/screens/ActionScreen.tsx
index 1b2bef225..199277f10 100644
--- a/packages/extension/src/ui/screens/ActionScreen.tsx
+++ b/packages/extension/src/ui/screens/ActionScreen.tsx
@@ -44,6 +44,7 @@ export const ActionScreen: FC = () => {
       return (
         <AddTokenScreen
           defaultToken={action.payload}
+          hideBackButton
           onSubmit={async () => {
             await approve(action)
             if (isPopup && isLastAction) {
diff --git a/packages/extension/src/ui/screens/AddTokenScreen.tsx b/packages/extension/src/ui/screens/AddTokenScreen.tsx
index 0568a84a0..fc54e7401 100644
--- a/packages/extension/src/ui/screens/AddTokenScreen.tsx
+++ b/packages/extension/src/ui/screens/AddTokenScreen.tsx
@@ -11,7 +11,8 @@ import { Button, ButtonGroupVertical } from "../components/Button"
 import { Header } from "../components/Header"
 import { InputText } from "../components/Input"
 import { Spinner } from "../components/Spinner"
-import { H2 } from "../components/Typography"
+import { FormError, H2 } from "../components/Typography"
+import { routes } from "../routes"
 import { useAccount } from "../states/account"
 import { useAppState } from "../states/app"
 import { TokenDetails, addToken } from "../states/tokens"
@@ -53,12 +54,14 @@ function addressFormat64Byte(address: number.BigNumberish): string {
 
 interface AddTokenScreenProps {
   defaultToken?: AddToken
+  hideBackButton?: boolean
   onSubmit?: () => void
   onReject?: () => void
 }
 
 export const AddTokenScreen: FC<AddTokenScreenProps> = ({
   defaultToken,
+  hideBackButton,
   onSubmit,
   onReject,
 }) => {
@@ -72,6 +75,7 @@ export const AddTokenScreen: FC<AddTokenScreenProps> = ({
     defaultToken?.decimals || "0",
   )
   const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
   const [tokenDetails, setTokenDetails] = useState<TokenDetails>()
   const prevValidAddress = useRef("")
 
@@ -123,7 +127,7 @@ export const AddTokenScreen: FC<AddTokenScreenProps> = ({
 
   return (
     <>
-      <Header>
+      <Header hide={hideBackButton}>
         <BackButton />
       </Header>
 
@@ -133,16 +137,21 @@ export const AddTokenScreen: FC<AddTokenScreenProps> = ({
         <form
           onSubmit={(e: React.FormEvent) => {
             e.preventDefault()
+            compiledData.address = addressFormat64Byte(compiledData.address)
             if (isDataComplete(compiledData)) {
-              addToken({
-                address: compiledData.address,
-                decimals: compiledData.decimals,
-                name: compiledData.name,
-                symbol: compiledData.symbol,
-                networkId: compiledData.networkId,
-              })
-              onSubmit?.()
-              navigate(-1)
+              try {
+                addToken({
+                  address: compiledData.address,
+                  decimals: compiledData.decimals,
+                  name: compiledData.name,
+                  symbol: compiledData.symbol,
+                  networkId: compiledData.networkId,
+                })
+                onSubmit?.()
+                navigate(routes.account)
+              } catch (e) {
+                setError("Token already exists")
+              }
             }
           }}
         >
@@ -155,15 +164,6 @@ export const AddTokenScreen: FC<AddTokenScreenProps> = ({
             onChange={(e: any) => {
               setTokenAddress(e.target.value?.toLowerCase())
             }}
-            onBlur={() => {
-              try {
-                if (tokenAddress) {
-                  setTokenAddress(addressFormat64Byte(tokenAddress))
-                }
-              } catch {
-                // pass
-              }
-            }}
           />
           {!loading && (
             <>
@@ -197,6 +197,7 @@ export const AddTokenScreen: FC<AddTokenScreenProps> = ({
                   }
                 }}
               />
+              {error && <FormError>{error}</FormError>}
               <ButtonGroupVertical>
                 {onReject && (
                   <Button onClick={onReject} type="button">
@@ -209,7 +210,7 @@ export const AddTokenScreen: FC<AddTokenScreenProps> = ({
               </ButtonGroupVertical>
             </>
           )}
-          {loading && <Spinner size={64} />}
+          {loading && <Spinner size={64} style={{ marginTop: 50 }} />}
         </form>
       </AddTokenScreenWrapper>
     </>
diff --git a/packages/extension/src/ui/states/tokens.ts b/packages/extension/src/ui/states/tokens.ts
index c7c339e1c..ff6412e49 100644
--- a/packages/extension/src/ui/states/tokens.ts
+++ b/packages/extension/src/ui/states/tokens.ts
@@ -36,12 +36,15 @@ interface TokenState {
 
 export const useTokens = create<TokenState>(
   persist(
-    (set, _) => ({
+    (set, get) => ({
       tokens: parsedDefaultErc20Tokens,
       addToken: (token: TokenDetails) => {
         if (!isValidAddress(token.address)) {
           throw Error("token address malformed")
         }
+        if (get().tokens.find((t) => equalToken(t, token))) {
+          throw Error("token already added")
+        }
         set((state) => ({ tokens: [...state.tokens, token] }))
       },
       removeToken: (token: TokenDetails) => {
diff --git a/packages/extension/src/ui/utils/addresses.ts b/packages/extension/src/ui/utils/addresses.ts
index 072156a18..41d5ce45b 100644
--- a/packages/extension/src/ui/utils/addresses.ts
+++ b/packages/extension/src/ui/utils/addresses.ts
@@ -1,7 +1,7 @@
 import { encode } from "starknet"
 
 export const isValidAddress = (address: string): boolean =>
-  /^0x[0-9a-f]{64}$/.test(address)
+  /^0x[0-9a-f]{1,64}$/.test(address)
 
 export const formatAddress = (address: string) =>
   encode.addHexPrefix(encode.removeHexPrefix(address).padStart(64, "0"))