Merge pull request #159 from DistributedCollective/develop

Develop

Author: Rickk137

packages/dev-frontend/package.json

@@ -9,6 +9,7 @@
     "@fortawesome/free-regular-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "@ledgerhq/devices": "^7.0.0",
     "@popperjs/core": "2.9.1",
     "@testing-library/dom": "7.30.0",
     "@testing-library/jest-dom": "5.11.9",
@@ -23,9 +24,12 @@
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/testing-library__react": "10.2.0",
     "@types/testing-library__user-event": "4.2.0",
-    "@web3-react/core": "6.1.9",
-    "@web3-react/injected-connector": "6.0.7",
-    "@web3-react/types": "6.0.7",
+    "@web3-onboard/core": "^2.5.0",
+    "@web3-onboard/injected-wallets": "^2.0.14",
+    "@web3-onboard/ledger": "^2.1.7",
+    "@web3-onboard/portis": "^2.0.7",
+    "@web3-onboard/trezor": "^2.1.7",
+    "@web3-onboard/walletconnect": "^2.0.8",
     "axios": "^0.26.1",
     "cross-env": "7.0.3",
     "ethereum-blockies": "^0.1.1",
@@ -43,7 +47,7 @@
     "source-map-explorer": "2.5.2",
     "swr": "^1.3.0",
     "theme-ui": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
-    "typescript": "4.1.5"
+    "typescript": "4.6.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

packages/dev-frontend/src/App.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import { Web3ReactProvider } from "@web3-react/core";
 import { Flex, Spinner, Heading, ThemeProvider, Paragraph, Link, Image } from "theme-ui";
 
-import { BatchedWebSocketAugmentedWeb3Provider } from "@sovryn-zero//providers";
 import { LiquityProvider } from "./hooks/LiquityContext";
 import { WalletConnector } from "./components/WalletConnector";
 import { TransactionProvider } from "./components/Transaction";
@@ -15,6 +13,7 @@ import { LiquityFrontend } from "./LiquityFrontend";
 import { BrowserRouter } from "react-router-dom";
 import { Header } from "./components/Header";
 import { isMainnet } from "./utils";
+import { ConnectorContextProvider } from "./components/Connector";
 
 if (window.ethereum) {
   // Silence MetaMask warning in console
@@ -37,14 +36,6 @@ getConfig().then(config => {
   Object.assign(window, { config });
 });
 
-const EthersWeb3ReactProvider: React.FC = ({ children }) => {
-  return (
-    <Web3ReactProvider getLibrary={provider => new BatchedWebSocketAugmentedWeb3Provider(provider)}>
-      {children}
-    </Web3ReactProvider>
-  );
-};
-
 const UnsupportedLayout: React.FC = ({ children }) => (
   <Flex sx={{ flexDirection: "column", minHeight: "100%" }}>
     <Header hideDetails />
@@ -80,8 +71,8 @@ const UnsupportedMainnetFallback: React.FC = () => (
     </Paragraph>
 
     <Paragraph>
-      If you'd like to use Zero on {isMainnet ? "mainnet" : "testnet"}, please go{" "}
-      <Link href={`https://${isMainnet ? "live" : "test"}.sovryn.app/zero`}>
+      If you'd like to use Zero on {!isMainnet ? "mainnet" : "testnet"}, please go{" "}
+      <Link href={`https://${!isMainnet ? "live" : "test"}.sovryn.app/zero`}>
         here <Icon name="external-link-alt" size="xs" />
       </Link>
       .
@@ -105,9 +96,9 @@ const App = () => {
   );
 
   return (
-    <EthersWeb3ReactProvider>
-      <ThemeProvider theme={theme}>
-        <BrowserRouter>
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <ConnectorContextProvider>
           <WalletConnector loader={loader}>
             <LiquityProvider
               loader={loader}
@@ -119,9 +110,9 @@ const App = () => {
               </TransactionProvider>
             </LiquityProvider>
           </WalletConnector>
-        </BrowserRouter>
-      </ThemeProvider>
-    </EthersWeb3ReactProvider>
+        </ConnectorContextProvider>
+      </BrowserRouter>
+    </ThemeProvider>
   );
 };
 

packages/dev-frontend/src/components/ActionDescription.tsx

@@ -1,4 +1,7 @@
-import { Box, Flex, Text } from "theme-ui";
+import { Decimal } from "@sovryn-zero/lib-base";
+import Tippy from "@tippyjs/react";
+import { useMemo } from "react";
+import { Box, Card, Flex, Text, ThemeUIStyleObject } from "theme-ui";
 
 import { Icon } from "./Icon";
 
@@ -34,6 +37,26 @@ export const ActionDescription: React.FC = ({ children }) => (
   </Box>
 );
 
-export const Amount: React.FC = ({ children }) => (
-  <Text sx={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{children}</Text>
-);
+interface AmountProps {
+  value?: Decimal;
+  sx?: ThemeUIStyleObject;
+}
+export const Amount: React.FC<AmountProps> = ({
+  children,
+  value,
+  sx = { fontWeight: "bold", whiteSpace: "nowrap" }
+}) => {
+  const showTilde = useMemo(() => value && !Decimal.from(value.toString(2)).eq(value), [value]);
+  return (
+    <Tippy
+      interactive={true}
+      disabled={!showTilde}
+      content={<Card variant="tooltip">{value?.toString()}</Card>}
+    >
+      <Text sx={sx}>
+        {showTilde && <Text sx={{ fontWeight: "light", opacity: 0.8, flexShrink: 0 }}>~&nbsp;</Text>}
+        {children}
+      </Text>
+    </Tippy>
+  );
+};

packages/dev-frontend/src/components/Aggregator/Convert.tsx

@@ -1,6 +1,5 @@
 import { Decimal, LiquityStoreState } from "@sovryn-zero/lib-base";
 import { useLiquitySelector } from "@sovryn-zero/lib-react";
-import { useWeb3React } from "@web3-react/core";
 import { parseUnits } from "ethers/lib/utils";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -11,6 +10,7 @@ import useZusdAggregator from "../../hooks/useZusdAggregator";
 import { COIN, XUSD } from "../../strings";
 import { parseBalance } from "../../utils";
 import { Card } from "../Card";
+import { useConnectorContext } from "../Connector";
 import { ErrorDescription } from "../ErrorDescription";
 import { EditableRow } from "../Trove/Editor";
 
@@ -19,14 +19,14 @@ const select = ({ zusdBalance }: LiquityStoreState) => ({
 });
 
 export const Convert: React.FC = () => {
-  const { account } = useWeb3React();
+  const { walletAddress } = useConnectorContext();
   const { zusdBalance } = useLiquitySelector(select);
-  const { data: xusd, decimals: decimalsXUSD } = useTokenBalance(account!, addresses.xusd);
+  const { data: xusd, decimals: decimalsXUSD } = useTokenBalance(walletAddress!, addresses.xusd);
   const { data: zusd, decimals: decimalsZUSD } = useTokenBalance(
     addresses.babelfish,
     addresses.zusd
   );
-  const { mint, redeem } = useZusdAggregator(account);
+  const { mint, redeem } = useZusdAggregator(walletAddress);
 
   const xusdBalance = useMemo(
     () => Decimal.from(parseBalance(xusd || 0, decimalsXUSD, decimalsXUSD)),
@@ -117,6 +117,7 @@ export const Convert: React.FC = () => {
               ml: 2,
               alignSelf: "self-start"
             }}
+            data-action-id="zero-convert-ZUSD"
           >
             Convert
           </Button>
@@ -153,6 +154,7 @@ export const Convert: React.FC = () => {
               ml: 2,
               alignSelf: "self-start"
             }}
+            data-action-id="zero-convert-XUSD"
           >
             Convert
           </Button>