Merge pull request #2320 from DistributedCollective/development

Release 2022-07-11

.env.mainnet.local

@@ -3,6 +3,7 @@ EXTEND_ESLINT=true
 
 REACT_APP_NETWORK=mainnet
 REACT_APP_SENTRY_DSN=
+REACT_APP_STAGING=true
 
 REACT_APP_PORTIS_ID=469a25c8-1101-4c57-823d-c47cb328f788
 

docs/Netlify.md

@@ -0,0 +1 @@
+# Netlify Deployments

netlify.toml

@@ -0,0 +1,54 @@
+[dev]
+  command = "yarn start"
+  port = 8888
+  framework = "create-react-app"
+  autoLaunch = true
+
+# Shared config for build
+[build]
+  command = "yarn build"
+  [build.environment]
+    REACT_APP_INTERCOM_ID = "zxxit1rp"
+    REACT_APP_NETWORK = "testnet"
+    REACT_APP_PORTIS_ID = "469a25c8-1101-4c57-823d-c47cb328f788"
+    REACT_APP_TRANSAK_ENV = "STAGING"
+    REACT_APP_TRANSAK_API_KEY = "a2d23229-58f9-4ca5-a3d4-2c3d2b1b9a81"
+    REACT_APP_ESTIMATOR_URI = "https://simulator.sovryn.app/simulate"
+    REACT_APP_MAILCHIMP = "https://gmail.us17.list-manage.com/subscribe/post?u=e66850f0b51ebbdbe1f2c3e36&id=ef5d452839"
+    REACT_APP_GRAPH_RSK = "https://subgraph.test.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph"
+
+[context.production]
+  [context.production.environment]
+    REACT_APP_NETWORK = "mainnet"
+    REACT_APP_GOOGLE_ANALYTICS = "UA-192081564-1"
+    REACT_APP_GRAPH_RSK = "https://subgraph.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph"
+    REACT_APP_INFURA_KEY = "12b606df88b3420aad7828acd0f11902"
+    REACT_APP_TRANSAK_ENV = "PRODUCTION"
+    REACT_APP_TRANSAK_API_KEY = "fadc5140-4d8f-4eda-ab37-5999dfedf353"
+    REACT_APP_ESTIMATOR_URI = "/simulate"
+    BUILD_STORYBOOK = "true"
+
+# PR deployments (previews)
+[context.deploy-preview]
+  [context.deploy-preview.environment]
+    BUILD_STORYBOOK = "true"
+
+# Staging deployments (all branches)
+[context.branch-deploy]
+  [context.branch-deploy.environment]
+    REACT_APP_NETWORK = "mainnet"
+    REACT_APP_GOOGLE_ANALYTICS = "UA-192081564-1"
+    REACT_APP_GRAPH_RSK = "https://subgraph.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph"
+    REACT_APP_INFURA_KEY = "12b606df88b3420aad7828acd0f11902"
+    REACT_APP_TRANSAK_ENV = "PRODUCTION"
+    REACT_APP_TRANSAK_API_KEY = "fadc5140-4d8f-4eda-ab37-5999dfedf353"
+    REACT_APP_BYPASS_MAINTENANCE = "true"
+    REACT_APP_STAGING = "true"
+
+# Testnet deployment
+[context.development]
+  [context.development.environment]
+    REACT_APP_NETWORK = "testnet"
+    REACT_APP_GRAPH_RSK = "https://subgraph.test.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph"
+    BUILD_STORYBOOK = "true"
+    REACT_APP_STAGING = "false"

package.json

@@ -17,7 +17,7 @@
     "@reduxjs/toolkit": "1.5.1",
     "@rsksmart/rsk3": "0.3.4",
     "@sovryn/charting-library": "1.0.0",
-    "@sovryn/perpetual-swap": "3.0.5",
+    "@sovryn/perpetual-swap": "3.0.9",
     "@sovryn/react-wallet": "2.2.5",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "5.1.1",
@@ -181,7 +181,10 @@
     "changelog": "./bin/changelog"
   },
   "scripts": {
+    "prestart": "yarn generate:graphql",
     "start": "node scripts/start.js",
+    "prebuild": "yarn generate:graphql",
+    "dev": "netlify dev",
     "build": "if-env BUILD_STORYBOOK=true && yarn build:with-storybook || node scripts/build.js",
     "build:dev": "env-cmd -f .env.local yarn build",
     "build:testnet": "env-cmd -f .env.testnet yarn build",
@@ -320,6 +323,7 @@
     "@types/reactjs-localstorage": "1.0.0",
     "auto-changelog": "2.2.1",
     "git-revision-webpack-plugin": "3.0.6",
+    "netlify-cli": "10.5.1",
     "node-sass": "6.0.1",
     "postcss-import": "13",
     "postcss-nested": "5.0.6",

public/_redirects

@@ -0,0 +1 @@
+/*  /index.html  200

public/index.html

@@ -7,7 +7,7 @@
       href="%PUBLIC_URL%/safari-pinned-tab.svg"
       color="#ffffff"
     />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" id="favicon" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" id="favicon" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Crypto Margin Trading with Sovryn" />

src/app/components/ActiveUserLoanContainer/components/DisplayDate/index.tsx

@@ -1,42 +1,40 @@
 import React from 'react';
+import dayjs from 'dayjs';
 
 export enum SeparatorType {
   Dash = 'dash',
-  Break = 'break',
+  Auto = 'auto',
 }
 
 const getSeparator = (separator: SeparatorType) => {
   switch (separator) {
-    case SeparatorType.Break:
-      return <br />;
+    case SeparatorType.Auto:
+      return '';
     case SeparatorType.Dash:
-      return '-';
     default:
-      return '-';
+      return ' -';
   }
 };
 
-interface Props {
+interface IDisplayDateProps {
   timestamp: string;
-  timezoneOption?: string;
-  timezoneLabel?: string;
+  useUTC?: boolean;
   separator?: SeparatorType;
 }
 
-export function DisplayDate({
+export const DisplayDate: React.FC<IDisplayDateProps> = ({
   timestamp,
-  timezoneOption = 'GMT',
-  timezoneLabel = 'GMT',
-  separator = SeparatorType.Break,
-}: Props) {
-  const date = (timestamp: string) => new Date(Number(timestamp) * 1e3);
-  const formatDate = date(timestamp).toLocaleString('en-GB', {
-    timeZone: timezoneOption,
-  });
+  separator = SeparatorType.Auto,
+  useUTC = false,
+}) => {
+  const stamp = dayjs.tz(Number(timestamp) * 1e3, 'UTC');
   return (
     <span>
-      {formatDate.slice(0, 10)} {getSeparator(separator)}{' '}
-      {formatDate.slice(12, 17)} {timezoneLabel}
+      {useUTC
+        ? stamp.format(`YYYY/MM/DD${getSeparator(separator)} HH:mm [UTC]`)
+        : stamp
+            .tz(dayjs.tz.guess())
+            .format(`L${getSeparator(separator)} LT [UTC] Z`)}
     </span>
   );
-}
+};

src/app/components/HeaderLabs/index.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 
 import WalletConnector from '../../containers/WalletConnector';
-import { LanguageToggle } from '../LanguageToggle';
 import styles from './index.module.scss';
 import { ReactComponent as SovLogo } from 'assets/images/sovryn-logo-labs.svg';
 import { ReactComponent as ArrowBack } from 'assets/images/genesis/arrow_back.svg';
@@ -11,16 +10,24 @@ import { translations } from '../../../locales/i18n';
 
 export type HeaderLabsProps = {
   helpLink?: string;
+  menus?: React.ReactNode;
 };
 
-export const HeaderLabs: React.FC<HeaderLabsProps> = ({ helpLink }) => {
+export const HeaderLabs: React.FC<HeaderLabsProps> = ({ menus, helpLink }) => {
   const { t } = useTranslation();
+  const location = useLocation();
+
+  const linkBackUrl = useMemo(
+    () =>
+      location.pathname === '/perpetuals/competition' ? '/perpetuals' : '/',
+    [location.pathname],
+  );
 
   return (
     <header className={styles.header}>
       <div className="tw-container tw-flex tw-justify-between tw-items-center tw-py-1.5 tw-px-2 xl:tw-pr-8 tw-mx-auto tw-text-black">
         <div className="tw-w-12 xl:tw-w-1/4 tw-flex tw-items-start">
-          <Link to="/">
+          <Link to={linkBackUrl}>
             <ArrowBack className={styles.backArrow} />
           </Link>
         </div>
@@ -29,6 +36,7 @@ export const HeaderLabs: React.FC<HeaderLabsProps> = ({ helpLink }) => {
             <SovLogo className={styles.logo} />
           </div>
         </div>
+        <>{menus}</>
         <div className="tw-w-1/4 tw-flex tw-justify-end tw-items-center">
           {helpLink && (
             <a
@@ -40,9 +48,10 @@ export const HeaderLabs: React.FC<HeaderLabsProps> = ({ helpLink }) => {
               {t(translations.mainMenu.help)}
             </a>
           )}
-          <div className="xl:tw-mr-4">
+          {/* Hidden until we have translations */}
+          {/* <div className="xl:tw-mr-4">
             <LanguageToggle innerClasses="tw-text-black tw-h-8" />
-          </div>
+          </div> */}
           <WalletConnector lightMode hideConnectButton />
         </div>
       </div>

src/app/components/Input/index.tsx

@@ -12,10 +12,14 @@ export type InputProps = Omit<InputBaseProps, 'ref'> & {
   classNameInput?: string;
   invalid?: boolean;
   unit?: React.ReactNode;
+  dataActionId?: string;
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, classNameInput, type, invalid, unit, ...rest }, ref) => {
+  (
+    { className, classNameInput, type, invalid, unit, dataActionId, ...rest },
+    ref,
+  ) => {
     const inputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<
       HTMLInputElement
     >;
@@ -62,6 +66,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             )}
             type={type}
             {...rest}
+            dataActionId={dataActionId}
           />
           {type === 'number' && rest.step ? (
             <>

src/app/components/LinkToExplorer/index.tsx

@@ -10,6 +10,7 @@ interface LinkToExplorerProps {
   chainId?: number | ChainId;
   realBtc?: boolean;
   text?: string;
+  isAddress?: boolean;
 }
 
 export const LinkToExplorer: React.FC<LinkToExplorerProps> = ({
@@ -37,7 +38,11 @@ export const LinkToExplorer: React.FC<LinkToExplorerProps> = ({
   return (
     <a
       className={className}
-      href={`${url}/tx/${props.txHash}`}
+      href={
+        props.isAddress
+          ? `${url}/address/${props.txHash}`
+          : `${url}/tx/${props.txHash}`
+      }
       target="_blank"
       rel="noreferrer noopener"
     >

src/app/components/UserAssets/TxDialog/index.tsx

@@ -108,7 +108,7 @@ export const TxDialog: React.FC<ITxDialogProps> = ({ tx, onUserConfirmed }) => {
                       timestamp={new Date(txData?.customData?.date)
                         .getTime()
                         .toString()}
-                      timezoneLabel="UTC"
+                      useUTC
                     />
                   </div>