WIP: Some UI fixes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bridge-v2",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "private": true,
   "dependencies": {
     "@davatar/react": "^1.9.0",
@@ -10,11 +10,13 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@netlify/functions": "^1.0.0",
+    "@project-serum/associated-token": "^0.1.1",
+    "@project-serum/borsh": "^0.2.5",
     "@reduxjs/toolkit": "^1.4.0",
-    "@renproject/chains": "3.4.0",
-    "@renproject/chains-bitcoin": "3.3.0",
-    "@renproject/chains-ethereum": "3.4.0",
-    "@renproject/chains-solana": "3.3.0",
+    "@renproject/chains": "3.4.2",
+    "@renproject/chains-bitcoin": "3.4.2",
+    "@renproject/chains-ethereum": "3.4.2",
+    "@renproject/chains-solana": "3.4.2",
     "@renproject/fonts": "^2.0.0-alpha.2",
     "@renproject/icons": "0.3.5",
     "@renproject/interfaces": "2.5.9",
@@ -28,7 +30,7 @@
     "@renproject/utils": "3.3.0",
     "@sentry/react": "^6.5.1",
     "@slack/web-api": "^6.7.1",
-    "@solana/web3.js": "^1.36.0",
+    "@solana/web3.js": "^1.47.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -47,6 +49,7 @@
     "buffer": "^6.0.3",
     "cancelable-promise": "^4.3.0",
     "classnames": "^2.2.6",
+    "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
     "dotenv": "^10.0.0",
     "ethers": "^5.6.8",
@@ -113,6 +116,7 @@
     "@babel/helper-call-delegate": "^7.12.1",
     "@babel/plugin-transform-modules-commonjs": "^7.13.0",
     "@babel/preset-env": "^7.15.8",
+    "cross-env": "^7.0.3",
     "netlify-cli": "^10",
     "prettier": "^2.5.1",
     "react-app-rewired": "^2.2.1"

src/components/formatting/NumberFormatText.tsx

@@ -1,22 +1,47 @@
+import { makeStyles } from "@material-ui/core/styles";
 import React, { FunctionComponent } from "react";
 import NumberFormat, { NumberFormatProps } from "react-number-format";
 import { numberFormatOptions } from "../../utils/formatters";
 
+const useNumberFormatStyles = makeStyles({
+  root: {
+    display: "flex",
+  },
+  rootInline: {
+    display: "inline-flex",
+  },
+  value: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    flexShrink: 1,
+  },
+  // suffix: {}
+});
+
 type NumberFormatTextProps = NumberFormatProps & {
+  flex?: boolean;
   spacedSuffix?: string;
 };
+
 export const NumberFormatText: FunctionComponent<NumberFormatTextProps> = ({
+  flex,
   spacedSuffix,
-  suffix,
+  value,
   ...props
 }) => {
-  const resolvedSuffix = spacedSuffix ? ` ${spacedSuffix}` : suffix;
+  const styles = useNumberFormatStyles();
+  // const resolvedSuffix = spacedSuffix ? ` ${spacedSuffix}` : suffix;
   return (
-    <NumberFormat
-      {...numberFormatOptions}
-      displayType="text"
-      suffix={resolvedSuffix}
-      {...props}
-    />
+    <span className={flex ? styles.root : styles.rootInline}>
+      <NumberFormat
+        className={styles.value}
+        {...numberFormatOptions}
+        displayType="text"
+        title={value ? value.toString() : undefined}
+        value={value}
+        {...props}
+      />
+      {Boolean(spacedSuffix) && <span>&nbsp;{spacedSuffix}</span>}
+    </span>
   );
 };

src/components/typography/TypographyHelpers.tsx

@@ -60,15 +60,17 @@ const useLabelWithValueStyles = makeStyles<
       verticalAlign: "middle",
     },
     valueWrapper: {
-      flexGrow: 1,
+      display: "flex",
       overflow: "hidden",
       textAlign: "right",
       color: (props) => getElementColor(props, black, grey),
     },
     value: {
       whiteSpace: "nowrap",
+      overflow: "hidden",
     },
     valueEquivalent: {
+      whiteSpace: "nowrap",
       marginLeft: 4,
       color: (props) => getElementColor(props, grey),
     },

src/constants/environmentVariables.ts

@@ -20,15 +20,10 @@ const BSC_MM_ENABLED = Boolean(process.env.REACT_APP_BSC_MM_ENABLED);
 const ENABLED_EXTRA_WALLETS =
   process.env.REACT_APP_ENABLED_EXTRA_WALLETS?.split(",") || ["*"];
 
-const ENABLED_ASSETS = process.env.REACT_APP_ENABLED_ASSETS?.split(",") || [
-  "*",
-];
-
 export const env = {
   DEV,
   NETWORK,
   INFURA_ID,
-  ENABLED_ASSETS,
   ENABLED_EXTRA_WALLETS,
   BSC_MM_ENABLED,
   MEWCONNECT_ENABLED,

src/constants/featureFlags.ts

@@ -15,6 +15,7 @@ export const featureFlags = {
   godMode:
     Boolean(queryString.parse(window.location.search).godMode) ||
     Boolean(localStorage.getItem("godMode")),
+  customRecipient: false
 };
 
 console.info(featureFlags);

src/features/chain/chainUtils.ts

@@ -132,7 +132,7 @@ export const getSolanaChain = (
       network,
       provider,
       signer,
-    }),
+    }) as any,
     connectionRequired: true,
     accounts: [],
   };
@@ -155,7 +155,7 @@ const getBitcoinBaseChain = <BTC extends BitcoinBaseChain>(ChainClass: BTC) => {
   };
 };
 
-const getDepositBaseChain = <DBC extends DepositChain>(ChainClass: DBC) => {
+const getDepositBaseChain = <DBC extends DepositChain<any, any>>(ChainClass: DBC) => {
   return {
     chain: ChainClass,
   };
@@ -217,7 +217,7 @@ export const alterContractChainProviderSigner = (
     console.info("Solana", provider);
     (window as any).solanaProvider = provider;
     alterSolanaChainProviderSigner(
-      chains[alteredChain] as ChainInstance<Solana>,
+      chains[alteredChain] as any as ChainInstance<Solana>,
       provider as SolanaConnector,
       false
     );

src/features/gateway/components/GatewayFees.tsx

@@ -75,6 +75,7 @@ export const GatewayFees: FunctionComponent<GatewayFeesProps> = ({
           value={
             renVMFeeAmount ? (
               <NumberFormatText
+                flex
                 value={renVMFeeAmount}
                 spacedSuffix={assetConfig.shortName}
                 decimalScale={8}
@@ -108,6 +109,7 @@ export const GatewayFees: FunctionComponent<GatewayFeesProps> = ({
           value={
             fromChainFeeAmount !== null && fromChainFeeAsset !== null ? (
               <NumberFormatText
+                flex
                 value={fromChainFeeAmount}
                 spacedSuffix={assetsConfig[fromChainFeeAsset].shortName}
               />
@@ -138,6 +140,7 @@ export const GatewayFees: FunctionComponent<GatewayFeesProps> = ({
           value={
             toChainFeeAmount !== null && toChainFeeAsset !== null ? (
               <NumberFormatText
+                flex
                 value={toChainFeeAmount}
                 spacedSuffix={assetsConfig[toChainFeeAsset].shortName}
               />

src/features/gateway/gatewayTransactionHooks.ts

@@ -42,7 +42,7 @@ export const useRenVMChainTransactionStatusUpdater = ({
   const [status, setStatus] = useState<ChainTransactionStatus | null>(null);
   const [target, setTarget] = useState<number | null>(null);
   const [txId, setTxId] = useState<string | null>(null);
-  const [txIdFormatted, setTxIdFormatted] = useState<string | null>(null);
+  const [txHash, setTxHash] = useState<string | null>(null);
   const [txIndex, setTxIndex] = useState<string | null>(null);
   const [amount, setAmount] = useState<string | null>(null);
 
@@ -60,7 +60,7 @@ export const useRenVMChainTransactionStatusUpdater = ({
 
       if (isDefined(progress.transaction)) {
         setTxId(progress.transaction.txid);
-        setTxIdFormatted(progress.transaction.txidFormatted);
+        setTxHash(progress.transaction.txHash);
         setTxIndex(progress.transaction.txindex);
         if (isDefined((progress.transaction as InputChainTransaction).amount)) {
           setAmount((progress.transaction as InputChainTransaction).amount);
@@ -101,7 +101,7 @@ export const useRenVMChainTransactionStatusUpdater = ({
     status,
     target,
     txId,
-    txIdFormatted,
+    txHash,
     txIndex,
     amount,
   };
@@ -127,7 +127,7 @@ export const useChainTransactionStatusUpdater = ({
   const [target, setTarget] = useState<number | null>(null);
   const [status, setStatus] = useState<ChainTransactionStatus | null>(null);
   const [txId, setTxId] = useState<string | null>(null);
-  const [txIdFormatted, setTxIdFormatted] = useState<string | null>(null);
+  const [txHash, setTxHash] = useState<string | null>(null);
   const [txIndex, setTxIndex] = useState<string | null>(null);
   const [amount, setAmount] = useState<string | null>(null);
   const [txUrl, setTxUrl] = useState<string | null>(null);
@@ -148,7 +148,7 @@ export const useChainTransactionStatusUpdater = ({
       }
       if (isDefined(progress.transaction)) {
         setTxId(progress.transaction.txid);
-        setTxIdFormatted(progress.transaction.txidFormatted);
+        setTxHash(progress.transaction.txHash);
         setTxIndex(progress.transaction.txindex);
         if (isDefined((progress.transaction as InputChainTransaction).amount)) {
           setAmount((progress.transaction as InputChainTransaction).amount);
@@ -193,7 +193,7 @@ export const useChainTransactionStatusUpdater = ({
     target,
     confirmations,
     txId,
-    txIdFormatted,
+    txHash,
     txIndex,
     txUrl,
     amount,

src/features/gateway/gatewayUtils.ts

@@ -79,7 +79,7 @@ export const createGateway = async (
       });
     }
   } else if (isSolanaBaseChain(gatewayParams.from)) {
-    const solana = fromChainInstance.chain as Solana;
+    const solana = fromChainInstance.chain as unknown as Solana;
     if (partialTx) {
       fromChain = solana.Transaction(partialTx);
     } else if (gatewayParams.fromAddress) {
@@ -114,7 +114,7 @@ export const createGateway = async (
       toChain = ethereumChain.Account({ convertUnit, anyoneCanSubmit });
     }
   } else if (isSolanaBaseChain(gatewayParams.to)) {
-    const solana = toChainInstance.chain as Solana;
+    const solana = toChainInstance.chain as unknown as Solana;
     if (gatewayParams.toAddress) {
       toChain = solana.Address(gatewayParams.toAddress);
     } else {

src/features/gateway/renJSHooks.ts

@@ -85,6 +85,7 @@ export const useWhitelist = () => {
       lockAndMint: {},
     };
     for (let selector of whitelist) {
+      // console.log(selector);
       const { asset, from, to, ioType } = decomposeSelector(selector);
       if (!supportedAssets.includes(asset) || ioType === null) {
         continue;

src/features/gateway/steps/GatewayFeesStep.tsx

@@ -66,6 +66,7 @@ import {
 } from "../gatewayHooks";
 import { useRedirectToGatewayFlow } from "../gatewayRoutingUtils";
 import { $gateway, setAmount } from "../gatewaySlice";
+import { WalletConnectionActionButtonGuard } from "./shared/WalletSwitchHelpers";
 import { GatewayStepProps } from "./stepUtils";
 
 export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
@@ -190,7 +191,10 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
       <>
         {Header}
         <PaperContent bottomPadding>
-          <span>Please connect a wallet to proceed</span>
+          <Typography variant="body1" align="center" paragraph>
+            Please connect a wallet to proceed
+          </Typography>
+          <WalletConnectionActionButtonGuard chain={activeChain} />
         </PaperContent>
       </>
     );
@@ -231,7 +235,7 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
                   <NumberFormatText
                     value={outputAmount}
                     spacedSuffix={assetLabel}
-                    decimalScale={feesDecimalImpact(amount, 3)}
+                    decimalScale={feesDecimalImpact(amount, 4)}
                   />
                 ) : (
                   <Skeleton variant="text" height={18} width={66} />

src/features/gateway/steps/flows/MintStandard.tsx

@@ -286,7 +286,7 @@ export const GatewayDepositProcessor: FunctionComponent<
     confirmations: lockConfirmations,
     target: lockTargetConfirmations,
     // txId: lockTxId,
-    txIdFormatted: lockTxIdFormatted,
+    txHash: lockTxHash,
     // txIndex: lockTxIndex,
     txUrl: lockTxUrl,
     amount: lockAmount,
@@ -363,7 +363,7 @@ export const GatewayDepositProcessor: FunctionComponent<
     confirmations: mintConfirmations,
     target: mintTargetConfirmations,
     // txId: mintTxId,
-    txIdFormatted: mintTxIdFormatted,
+    txHash: mintTxHash,
     // txIndex: mintTxIndex,
     txUrl: mintTxUrl,
   } = outTxMeta;
@@ -411,7 +411,7 @@ export const GatewayDepositProcessor: FunctionComponent<
             lockStatus={lockStatus}
             lockAssetDecimals={lockAssetDecimals}
             lockAmount={lockAmount}
-            lockTxId={lockTxIdFormatted}
+            lockTxId={lockTxHash}
             lockTxUrl={lockTxUrl}
           />
         );
@@ -435,7 +435,7 @@ export const GatewayDepositProcessor: FunctionComponent<
         lockTargetConfirmations={lockTargetConfirmations}
         lockAssetDecimals={lockAssetDecimals}
         lockAmount={lockAmount}
-        lockTxId={lockTxIdFormatted}
+        lockTxId={lockTxHash}
         lockTxUrl={lockTxUrl}
         onSubmit={handleSubmit}
         onReset={handleReset}
@@ -470,12 +470,12 @@ export const GatewayDepositProcessor: FunctionComponent<
         <MintCompletingStatus
           gateway={gateway}
           transaction={transaction}
-          lockTxId={lockTxIdFormatted}
+          lockTxId={lockTxHash}
           lockTxUrl={lockTxUrl}
           mintAmount={mintAmount}
           mintAssetDecimals={mintAssetDecimals}
           mintTxUrl={mintTxUrl}
-          mintTxHash={mintTxIdFormatted}
+          mintTxHash={mintTxHash}
           mintConfirmations={mintConfirmations}
           mintTargetConfirmations={mintTargetConfirmations}
         />