satoshipay · ebma · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020 · Nov 2, 2020
diff --git a/src/Account/components/AccountActions.tsx b/src/Account/components/AccountActions.tsx
@@ -67,6 +67,7 @@ function AccountActions(props: AccountActionsProps) {
         disabled={accountData.balances.length === 0}
         icon={<SendIcon style={{ fontSize: "110%" }} />}
         onClick={props.onCreatePayment}
+        testnet={props.account.testnet}
         type="primary"
       >
         {t("account.action.send")}

diff --git a/src/Account/components/AccountTitle.tsx b/src/Account/components/AccountTitle.tsx
@@ -14,7 +14,7 @@ import { Account } from "~App/contexts/accounts"
 import { useLiveAccountData } from "~Generic/hooks/stellar-subscriptions"
 import { useIsMobile, useRouter } from "~Generic/hooks/userinterface"
 import { containsThirdPartySigner, ThirdPartySecurityService } from "~Generic/lib/third-party-security"
-import { primaryBackgroundColor } from "~App/theme"
+import { testnetColor } from "~App/theme"
 import { HorizontalLayout } from "~Layout/components/Box"
 import MainTitle from "~Generic/components/MainTitle"
 
@@ -42,9 +42,9 @@ function TestnetBadge(props: { style?: React.CSSProperties }) {
     display: "inline-flex",
     alignItems: "center",
     padding: "5px",
-    background: "white",
+    background: testnetColor.main,
     borderRadius: 3,
-    color: primaryBackgroundColor,
+    color: "white",
     fontSize: "50%",
     fontWeight: "bold",
     lineHeight: "100%",

diff --git a/src/AccountCreation/components/AccountCreationActions.tsx b/src/AccountCreation/components/AccountCreationActions.tsx
@@ -46,6 +46,7 @@ function AccountCreationActions(props: AccountCreationActionsProps) {
               className={buttonClassName}
               icon={<CheckIcon style={{ fontSize: "120%" }} />}
               onClick={props.onActionButtonClick}
+              testnet={props.testnet}
               type="primary"
             >
               {t("create-account.action.create")}
@@ -57,6 +58,7 @@ function AccountCreationActions(props: AccountCreationActionsProps) {
               className={buttonClassName}
               icon={<CheckIcon style={{ fontSize: "120%" }} />}
               onClick={props.onActionButtonClick}
+              testnet={props.testnet}
               type="primary"
             >
               {t("create-account.action.import")}

diff --git a/src/AccountSettings/components/AccountDeletionDialog.tsx b/src/AccountSettings/components/AccountDeletionDialog.tsx
@@ -29,6 +29,7 @@ interface DeletionConfirmationDialogProps {
   onClose: () => void
   onConfirm: () => void
   open: boolean
+  testnet?: boolean
 }
 
 const DeletionConfirmationDialog = React.memo(function DeletionConfirmationDialog(
@@ -41,7 +42,7 @@ const DeletionConfirmationDialog = React.memo(function DeletionConfirmationDialo
         <ActionButton onClick={props.onCancel}>{t("account-settings.account-deletion.action.cancel")}</ActionButton>
       }
       confirmButton={
-        <ActionButton onClick={props.onConfirm} type="primary">
+        <ActionButton onClick={props.onConfirm} testnet={props.testnet} type="primary">
           {t("account-settings.account-deletion.action.confirm")}
         </ActionButton>
       }
@@ -220,14 +221,21 @@ function AccountDeletionDialog(props: AccountDeletionDialogProps) {
               disabled={!selectedMergeAccount}
               icon={<MergeIcon />}
               onClick={requestConfirmation}
+              testnet={props.account.testnet}
               type="primary"
             >
               {isTinyScreen
                 ? t("account-settings.account-deletion.action.merge.short")
                 : t("account-settings.account-deletion.action.merge.long")}
             </ActionButton>
           ) : (
-            <ActionButton autoFocus icon={<DeleteIcon />} onClick={requestConfirmation} type="primary">
+            <ActionButton
+              autoFocus
+              icon={<DeleteIcon />}
+              onClick={requestConfirmation}
+              testnet={props.account.testnet}
+              type="primary"
+            >
               {t("account-settings.account-deletion.action.delete")}
             </ActionButton>
           )}
@@ -250,6 +258,7 @@ function AccountDeletionDialog(props: AccountDeletionDialogProps) {
           onClose={cancelConfirmation}
           onConfirm={onConfirm}
           open={confirmationPending}
+          testnet={props.account.testnet}
         />
         <WarningDialog
           onClose={closeWarning}

diff --git a/src/AccountSettings/components/ChangePasswordDialog.tsx b/src/AccountSettings/components/ChangePasswordDialog.tsx
@@ -68,6 +68,7 @@ interface ActionsProps {
   removePassword: boolean
   onSubmit: () => void
   onToggleRemovePassword: () => void
+  testnet?: boolean
 }
 
 function Actions(props: ActionsProps) {
@@ -90,7 +91,7 @@ function Actions(props: ActionsProps) {
           />
         )
       ) : null}
-      <ActionButton icon={<LockIcon />} onClick={props.onSubmit} type="primary">
+      <ActionButton icon={<LockIcon />} onClick={props.onSubmit} testnet={props.testnet} type="primary">
         {isSmallScreen
           ? props.removePassword
             ? t("account-settings.set-password.action.remove-password.long")
@@ -201,6 +202,7 @@ function ChangePasswordDialog(props: Props) {
             onSubmit={removingPassword ? removePassword : changePassword}
             onToggleRemovePassword={toggleRemovePassword}
             removePassword={removingPassword}
+            testnet={props.account.testnet}
           />
         </DialogActions>
       }

diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -22,6 +22,7 @@ interface PromptToRevealProps {
   password: string
   passwordError: Error | null
   requiresPassword: boolean
+  testnet?: boolean
   title: React.ReactNode
   onReveal: (event: React.SyntheticEvent) => void
   updatePassword: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -39,7 +40,7 @@ function PromptToReveal(props: PromptToRevealProps) {
       top={props.title}
       actions={
         <DialogActionsBox desktopStyle={{ marginTop: 32 }} smallDialog>
-          <ActionButton icon={<LockOpenIcon />} onClick={props.onReveal} type="primary">
+          <ActionButton icon={<LockOpenIcon />} onClick={props.onReveal} testnet={props.testnet} type="primary">
             {isSmallScreen
               ? t("account-settings.export-key.action.reveal.short")
               : t("account-settings.export-key.action.reveal.long")}
@@ -80,6 +81,7 @@ function PromptToReveal(props: PromptToRevealProps) {
 interface ShowSecretKeyProps {
   export: string
   onConfirm?: () => void
+  testnet?: boolean
   title: React.ReactNode
   variant: Props["variant"]
 }
@@ -96,7 +98,7 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
       actions={
         props.onConfirm ? (
           <DialogActionsBox desktopStyle={{ marginTop: 32 }} smallDialog>
-            <ActionButton onClick={props.onConfirm} type="primary">
+            <ActionButton onClick={props.onConfirm} testnet={props.testnet} type="primary">
               {t("account-settings.export-key.action.confirm")}
             </ActionButton>
           </DialogActionsBox>
@@ -204,13 +206,20 @@ function ExportKeyDialog(props: Props) {
   )
 
   return isRevealed && secretKey ? (
-    <ShowSecretKey export={secretKey} onConfirm={props.onConfirm} title={titleContent} variant={props.variant} />
+    <ShowSecretKey
+      export={secretKey}
+      onConfirm={props.onConfirm}
+      testnet={props.account?.testnet}
+      title={titleContent}
+      variant={props.variant}
+    />
   ) : (
     <PromptToReveal
       onReveal={reveal}
       password={password}
       passwordError={passwordError ? new Error(getErrorTranslation(passwordError, t)) : null}
       requiresPassword={Boolean(props.account && props.account.requiresPassword)}
+      testnet={props.account?.testnet}
       title={titleContent}
       updatePassword={updatePassword}
     >

diff --git a/src/App/contexts/accounts.tsx b/src/App/contexts/accounts.tsx
@@ -86,7 +86,12 @@ async function createAccountInstance(keyStore: KeyStoreAPI, keyID: string) {
 }
 
 async function createAccountInKeyStore(accounts: Account[], accountData: NewAccountData) {
-  if (accounts.some(someAccount => someAccount.name.toLowerCase() === accountData.name.toLowerCase())) {
+  if (
+    accounts.some(
+      someAccount =>
+        someAccount.name.toLowerCase() === accountData.name.toLowerCase() && someAccount.testnet === accountData.testnet
+    )
+  ) {
     throw CustomError("ExistingAccountError", "An account with that name does already exist.")
   }
 

diff --git a/src/App/theme.ts b/src/App/theme.ts
@@ -15,6 +15,12 @@ export const brandColor = {
   light: "#72dbfe"
 }
 
+export const testnetColor = {
+  dark: "#d3356b",
+  main: "#fe4081",
+  light: "#fd5a92"
+}
+
 export const primaryBackground = "linear-gradient(to left bottom, #01B3F3, #0176DC)"
 export const primaryBackgroundColor = "#0194E7"
 
@@ -89,6 +95,19 @@ const theme = createMuiTheme({
           backgroundColor: "#02b2f2"
         }
       },
+      containedSecondary: {
+        backgroundColor: testnetColor.main,
+
+        "&$disabled": {
+          backgroundColor: testnetColor.main,
+          border: "none",
+          boxShadow: "none",
+          color: "rgba(255, 255, 255, 0.7)"
+        },
+        "&:hover": {
+          backgroundColor: testnetColor.light
+        }
+      },
       textPrimary: {
         color: brandColor.dark
       },

diff --git a/src/Assets/components/AssetDetailsActions.tsx b/src/Assets/components/AssetDetailsActions.tsx
@@ -84,7 +84,12 @@ function AssetDetailsActions(props: Props) {
             <ActionButton icon={<ClearIcon />} onClick={removeThisAsset} type="secondary">
               {t("account.add-asset.action.remove")}
             </ActionButton>
-            <ActionButton icon={<SwapHorizIcon />} onClick={tradeThisAsset} type="primary">
+            <ActionButton
+              icon={<SwapHorizIcon />}
+              onClick={tradeThisAsset}
+              testnet={props.account.testnet}
+              type="primary"
+            >
               {t("account.add-asset.action.trade")}
             </ActionButton>
           </>

diff --git a/src/Assets/components/CustomTrustline.tsx b/src/Assets/components/CustomTrustline.tsx
@@ -75,6 +75,7 @@ function CustomTrustlineDialog(props: Props) {
             icon={<VerifiedUserIcon />}
             loading={props.txCreationPending}
             onClick={addCustomAsset}
+            testnet={props.account.testnet}
             type="primary"
           >
             {isWidthMax450

diff --git a/src/Assets/components/RemoveTrustline.tsx b/src/Assets/components/RemoveTrustline.tsx
@@ -72,6 +72,7 @@ const RemoveTrustlineDialog = React.memo(function RemoveTrustlineDialog(props: P
               icon={<CloseIcon />}
               onClick={removeAsset}
               style={{ maxWidth: "none" }}
+              testnet={props.account.testnet}
               type="primary"
             >
               {t("account.remove-trustline.action.remove")}

diff --git a/src/Generic/components/DialogActions.tsx b/src/Generic/components/DialogActions.tsx
@@ -115,6 +115,7 @@ interface ActionButtonProps {
   loading?: boolean
   onClick?: (event: React.SyntheticEvent) => void
   style?: React.CSSProperties
+  testnet?: boolean
   variant?: ButtonProps["variant"]
   type?: "primary" | "secondary" | "submit"
 }
@@ -128,7 +129,7 @@ export function ActionButton(props: ActionButtonProps) {
   return (
     <Button
       autoFocus={props.autoFocus}
-      color={type === "primary" || type === "submit" ? "primary" : undefined}
+      color={type === "primary" || type === "submit" ? (props.testnet ? "secondary" : "primary") : undefined}
       className={`${classes.actionButton} ${props.className || ""}`}
       disabled={props.disabled}
       form={props.form}

diff --git a/src/Generic/components/TestnetBadge.tsx b/src/Generic/components/TestnetBadge.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { useTranslation } from "react-i18next"
-import grey from "@material-ui/core/colors/grey"
+import { testnetColor } from "~App/theme"
 
 const TestnetBadge = (props: { style?: React.CSSProperties }) => {
   const { t } = useTranslation()
@@ -10,7 +10,7 @@ const TestnetBadge = (props: { style?: React.CSSProperties }) => {
     display: "inline-block",
     top: -4,
     padding: "0.1rem 0.3rem",
-    background: grey[500],
+    background: testnetColor.main,
     borderRadius: 3,
     color: "white",
     fontSize: "10px",

diff --git a/src/ManageSigners/components/ManageSignersDialog.tsx b/src/ManageSigners/components/ManageSignersDialog.tsx
@@ -2,17 +2,17 @@ import React from "react"
 import { useTranslation } from "react-i18next"
 import { Operation, Server, Transaction } from "stellar-sdk"
 import useMediaQuery from "@material-ui/core/useMediaQuery"
-import Button from "@material-ui/core/Button"
 import PersonAddIcon from "@material-ui/icons/PersonAdd"
 import { Account } from "~App/contexts/accounts"
 import { trackError } from "~App/contexts/notifications"
 import { useLiveAccountData } from "~Generic/hooks/stellar-subscriptions"
 import { useIsMobile } from "~Generic/hooks/userinterface"
 import { AccountData } from "~Generic/lib/account"
 import { createTransaction } from "~Generic/lib/transaction"
-import TransactionSender from "~Transaction/components/TransactionSender"
+import { ActionButton } from "~Generic/components/DialogActions"
 import ButtonIconLabel from "~Generic/components/ButtonIconLabel"
 import MainTitle from "~Generic/components/MainTitle"
+import TransactionSender from "~Transaction/components/TransactionSender"
 import ManageSignersDialogContent, { SignerUpdate } from "./ManageSignersDialogContent"
 
 type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
@@ -92,7 +92,7 @@ function ManageSignersDialog(props: Props) {
         }
         actions={
           <>
-            <Button color="primary" onClick={() => setIsEditingNewSigner(true)} variant="contained">
+            <ActionButton testnet={props.account.testnet} type="primary" onClick={() => setIsEditingNewSigner(true)}>
               <ButtonIconLabel
                 label={
                   isWidthMax450
@@ -102,14 +102,14 @@ function ManageSignersDialog(props: Props) {
               >
                 <PersonAddIcon />
               </ButtonIconLabel>
-            </Button>
+            </ActionButton>
           </>
         }
         onBack={props.onClose}
         style={{ marginBottom: 24 }}
       />
     ),
-    [isSmallScreen, t, isWidthMax450, props.onClose]
+    [isSmallScreen, t, isWidthMax450, props.account, props.onClose]
   )
 
   return (

diff --git a/src/ManageSigners/components/ManageSignersDialogContent.tsx b/src/ManageSigners/components/ManageSignersDialogContent.tsx
@@ -199,7 +199,13 @@ function ManageSignersDialogContent(props: Props) {
       >
         <DialogActionsPortal>
           <DialogActionsBox desktopStyle={{ margin: 0 }}>
-            <ActionButton disabled={nothingEdited} icon={<CheckIcon />} onClick={submit} type="submit">
+            <ActionButton
+              disabled={nothingEdited}
+              icon={<CheckIcon />}
+              onClick={submit}
+              testnet={props.testnet}
+              type="submit"
+            >
               {isSmallScreen
                 ? t("account-settings.manage-signers.action.apply.short")
                 : t("account-settings.manage-signers.action.apply.long")}

diff --git a/src/Payment/components/PaymentForm.tsx b/src/Payment/components/PaymentForm.tsx
@@ -296,13 +296,14 @@ const PaymentForm = React.memo(function PaymentForm(props: PaymentFormProps) {
           icon={<SendIcon style={{ fontSize: 16 }} />}
           loading={props.txCreationPending}
           onClick={() => undefined}
+          testnet={props.testnet}
           type="submit"
         >
           {t("payment.actions.submit")}
         </ActionButton>
       </DialogActionsBox>
     ),
-    [formID, props.txCreationPending, t]
+    [formID, props.testnet, props.txCreationPending, t]
   )
 
   return (

diff --git a/src/Trading/components/TradingDialog.tsx b/src/Trading/components/TradingDialog.tsx
@@ -121,6 +121,7 @@ function TradingDialog(props: TradingDialogProps) {
             <ActionButton
               autoFocus
               onClick={() => router.history.push(routes.manageAccountAssets(props.account.id))}
+              testnet={props.account.testnet}
               type="primary"
             >
               {t("trading.action.add-asset")}

diff --git a/src/Trading/components/TradingForm.tsx b/src/Trading/components/TradingForm.tsx
@@ -391,7 +391,12 @@ function TradingForm(props: Props) {
         ) : null}
         <Portal target={props.dialogActionsRef.element}>
           <DialogActionsBox desktopStyle={{ marginTop: 32 }}>
-            <ActionButton icon={<GavelIcon />} onClick={form.handleSubmit(submitForm)} type="primary">
+            <ActionButton
+              icon={<GavelIcon />}
+              onClick={form.handleSubmit(submitForm)}
+              testnet={props.account.testnet}
+              type="primary"
+            >
               {t("trading.action.submit")}
             </ActionButton>
           </DialogActionsBox>

diff --git a/src/TransactionReview/components/ReviewForm.tsx b/src/TransactionReview/components/ReviewForm.tsx
@@ -168,6 +168,7 @@ function TxConfirmationForm(props: Props) {
               form={formID}
               loading={props.loading || loading}
               onClick={showLoadingIndicator}
+              testnet={props.account.testnet}
               type="submit"
             >
               {isOrderCancellation

diff --git a/src/TransferService/components/NoWithdrawableAssets.tsx b/src/TransferService/components/NoWithdrawableAssets.tsx
@@ -24,6 +24,7 @@ function NoWithdrawableAssets(props: Props) {
         <DialogActionsBox>
           <ActionButton
             onClick={() => router.history.push(routes.manageAccountAssets(props.account.id))}
+            testnet={props.account.testnet}
             type="primary"
           >
             {t("transfer-service.no-withdrawable-assets.action.add-asset")}