Update staging and preview build banner text

oasisprotocol · May 11, 2023 · c891f0f · c891f0f
1 parent a53a8ef
commit c891f0f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/src/app/components/BuildBanner/index.tsx b/src/app/components/BuildBanner/index.tsx
@@ -5,19 +5,20 @@ import { Box } from 'grommet/es6/components/Box'
 import { AlertBox } from 'app/components/AlertBox'
 import { buildBannerZIndex } from '../../../styles/theme/elementSizes'
 import { AnchorLink } from '../AnchorLink'
+import styled from 'styled-components'
+
+const StickyBanner = styled(Box)`
+  position: sticky;
+  top: 0;
+  z-index: ${buildBannerZIndex};
+`
 
 export const BuildBanner = () => {
   const { t } = useTranslation()
 
   if (window.location.host === 'wallet.oasis.io') {
     return (
-      <Box
-        style={{
-          position: 'sticky',
-          top: 0,
-          zIndex: buildBannerZIndex,
-        }}
-      >
+      <StickyBanner>
         <AlertBox status="ok" center icon={<Info size="20px" color="currentColor" />}>
           <Trans
             i18nKey="banner.domainMoved"
@@ -30,24 +31,31 @@ export const BuildBanner = () => {
             defaults="Oasis Wallet has a new home at <NewLink />."
           />
         </AlertBox>
-      </Box>
+      </StickyBanner>
+    )
+  }
+
+  if (window.location.host === 'wallet.stg.oasis.io') {
+    return (
+      <StickyBanner>
+        <AlertBox status="warning" center icon={<Alert size="20px" color="currentColor" />}>
+          {t(
+            'banner.buildStaging',
+            'Please note this is the staging deployment of Oasis Wallet. ONLY USE IT FOR TESTING.',
+          )}
+        </AlertBox>
+      </StickyBanner>
     )
   }
 
   return (
-    <Box
-      style={{
-        position: 'sticky',
-        top: 0,
-        zIndex: buildBannerZIndex,
-      }}
-    >
+    <StickyBanner>
       <AlertBox status="warning" center icon={<Alert size="20px" color="currentColor" />}>
         {t(
           'banner.buildPreview',
-          'Please note this is an experimental build of Oasis Wallet and that data that is shown might be incorrect.',
+          'Please note this is an experimental build of Oasis Wallet and your secrets are not safe. ONLY USE IT FOR TESTING.',
         )}
       </AlertBox>
-    </Box>
+    </StickyBanner>
   )
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -99,7 +99,8 @@
     "oasisscan": "Oasis Scan API"
   },
   "banner": {
-    "buildPreview": "Please note this is an experimental build of Oasis Wallet and that data that is shown might be incorrect.",
+    "buildPreview": "Please note this is an experimental build of Oasis Wallet and your secrets are not safe. ONLY USE IT FOR TESTING.",
+    "buildStaging": "Please note this is the staging deployment of Oasis Wallet. ONLY USE IT FOR TESTING.",
     "domainMoved": "Oasis Wallet has a new home at <NewLink />."
   },
   "common": {