Merge pull request #200 from Plex-Engineer/staging

Staging

package.json

@@ -23,7 +23,7 @@
     "@tharsis/provider": "^0.2.4",
     "@tharsis/transactions": "^0.2.6",
     "@usedapp/coingecko": "^1.1.5",
-    "@usedapp/core": "1.2.2",
+    "@usedapp/core": "1.2.7",
     "bignumber.js": "^9.0.2",
     "ethers": "^5.7.2",
     "mixpanel": "^0.16.0",

src/App.scss

@@ -21,6 +21,17 @@
   --dark-grey-color: #424242;
   --too-dark-color: #222222;
   --pitch-black-color: #111111;
+
+  //colors
+
+  --matrix-green: #06fc99;
+  --matrix-green10: rgba(6, 252, 153, 0.1);
+  --danger-red: #ef4444;
+  --danger-red10: #ef44441a;
+  --warning-yellow: #e8d211;
+  --warning-yellow10: #e8d2111a;
+  --almost-white: #efefef;
+  --input-black: #222222;
 }
 
 :root {
@@ -29,8 +40,10 @@
   --off-white-color: #efefef;
   //   --error-color: #fe4256;
 
-  scrollbar-color: var(--primary-color);
+  scrollbar-color: var(--primary-color) #222;
   scroll-behavior: smooth;
+  //   overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
@@ -44,35 +57,36 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-// /* Handle */
-::-webkit-scrollbar-thumb {
-  box-shadow: inset 2 2 5px var(--primary-color);
-  border-radius: 6px;
-  width: 6px;
-  background: var(--primary-color);
-}
 ::selection {
   color: black;
   background: var(--primary-color);
 }
-::-webkit-scrollbar {
+// ::-webkit-scrollbar {
+//   width: 3px;
+//   height: 6px;
+// }
+
+::-webkit-scrollbar:hover {
   width: 6px;
   height: 6px;
 }
-
 /* Track */
 ::-webkit-scrollbar-track {
   background: #151515;
 }
 
+// // /* Handle */
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  width: 2px;
+  background: #07e48c;
+}
+
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #07e48c;
 }
 
-:hover::-webkit-scrollbar-thumb {
-  background: var(--primary-color);
-}
 .App {
   background: repeating-linear-gradient(
     0deg,
@@ -93,6 +107,11 @@ input[type="number"] {
   }
 }
 
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;

src/App.tsx

@@ -11,7 +11,7 @@ import { PAGES } from "global/config/pageList";
 import Loading from "global/components/Loading";
 import PageNotFound from "global/components/pageNotFound";
 import ChangeLog from "pages/changelog/changeLog";
-import Walkthrough from "pages/bridge/walkthrough/Walkthrough";
+import Walkthrough from "pages/bridging/walkthrough/Walkthrough";
 
 //Styling
 const Container = styled.div`
@@ -21,13 +21,14 @@ const Container = styled.div`
   background-color: #111;
 `;
 //Lazy loading pages. will load in the required pages
-const Bridging = lazy(() => import("pages/bridge/Bridging"));
+const Bridging = lazy(() => import("pages/bridging/Bridging"));
 const Dex = lazy(() => import("./pages/dexLP/Dex"));
 const Staking = lazy(() => import("./pages/staking/Staking"));
 const LendingMarket = lazy(() => import("./pages/lending/LendingMarket"));
 const Governance = lazy(() => import("./pages/governance/governance"));
 const Proposal = lazy(() => import("./pages/governance/proposal"));
 const HomePage = lazy(() => import("./pages/home/homepage"));
+
 // const HomePage = lazy(() => import("./pages/landing/Landing"));
 
 function App() {

src/global/components/modals/enableModal.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const enableModal = () => {
+  return <div>enableModal</div>;
+};
+
+export default enableModal;

src/global/components/modals/loading2.tsx

@@ -0,0 +1,130 @@
+import styled from "@emotion/styled";
+import { OutlinedButton, Text } from "global/packages/src";
+import loadingGif from "assets/loading.gif";
+import completeIcon from "assets/complete.svg";
+import warningIcon from "assets/warning.svg";
+import {
+  getTransactionStatusString,
+  transactionStatusActions,
+} from "global/utils/utils";
+import {
+  CantoTransactionType,
+  TransactionState,
+} from "global/config/transactionTypes";
+import { ReactNode, useEffect, useState } from "react";
+import { Mixpanel } from "mixpanel";
+
+interface Props {
+  transactionType: CantoTransactionType;
+  status: TransactionState;
+  tokenName?: string;
+  customMessage?: string | ReactNode;
+  additionalMessage?: string | ReactNode;
+  txHash?: string;
+  onClose: () => void;
+  //used for mix panel
+  mixPanelEventInfo?: object;
+}
+
+const LoadingModal = (props: Props) => {
+  const [txLogged, setTxLogged] = useState(false);
+  const [txConfirmed, setTxConfirmed] = useState(false);
+  const actionObj = transactionStatusActions(
+    props.transactionType,
+    props.tokenName
+  );
+  const currentStatus = getTransactionStatusString(
+    actionObj.action,
+    actionObj.inAction,
+    actionObj.postAction,
+    props.status
+  );
+  useEffect(() => {
+    if (props.status == "PendingSignature" && !txLogged) {
+      setTxLogged(true);
+      Mixpanel.events.transactions.transactionStarted(
+        props.transactionType,
+        props.mixPanelEventInfo
+      );
+    }
+    if (props.status == "Success" && !txConfirmed) {
+      setTxConfirmed(true);
+      Mixpanel.events.transactions.transactionSuccess(
+        props.transactionType,
+        props.txHash,
+        props.mixPanelEventInfo
+      );
+    }
+    if (
+      (props.status == "Fail" || props.status == "Exception") &&
+      !txConfirmed
+    ) {
+      setTxConfirmed(true);
+      Mixpanel.events.transactions.transactionFailed(
+        props.transactionType,
+        props.txHash,
+        currentStatus,
+        props.mixPanelEventInfo
+      );
+    }
+  }, [props.status]);
+
+  return (
+    <Styled>
+      <img
+        src={
+          props.status == "Success"
+            ? completeIcon
+            : props.status == "Fail" || props.status == "Exception"
+            ? warningIcon
+            : loadingGif
+        }
+        style={{
+          marginBottom: "1rem",
+        }}
+        height={80}
+        width={80}
+      />
+      <Text size="title2" type="title" style={{ marginBottom: "2rem" }}>
+        {props.tokenName}
+      </Text>
+      <Text size="text1" type="text">
+        {props.customMessage ?? currentStatus}
+      </Text>
+      <br />
+      <Text size="text1" type="text">
+        {props.additionalMessage}
+      </Text>
+      {props.txHash ? (
+        <OutlinedButton
+          className="btn"
+          onClick={() => {
+            Mixpanel.events.loadingModal.blockExplorerOpened(props.txHash);
+            window.open(
+              "https://evm.explorer.canto.io/tx/" + props.txHash,
+              "_blank"
+            );
+          }}
+        >
+          open in block explorer
+        </OutlinedButton>
+      ) : null}
+    </Styled>
+  );
+};
+
+const Styled = styled.div`
+  display: flex;
+  background-color: black;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 2rem;
+  .btn {
+    margin-top: 2rem;
+  }
+`;
+export default LoadingModal;