WIP: All Beta Changes -> Master

RELEASE-NOTES.md

@@ -1,17 +1,33 @@
 # Release Notes
 
-- vitejs server replaces CRA
-- cypress + coverage reports now generating (see /coverage/lcov-report)
-- code cleanup for new Eslint rules
-- mobile styling of login page
-- login page complete, with mobile styling and tests
-- dashboard skeleton started
-- add address book/my contacts
-- send widget can prepare, sign, and lightly validate a tx
-- calls to the JUP API now working
-- tests now run in mobile and desktop sizes
-- improved mobile login styling
-- deduplicate seed words on generation
-- add "auth" mechanism to prevent page browsing without login
-- enhance test suites wrt viewport testing
-- add basic transactions widget
+## 0.0.1
+
+- Initial Beta test release version. This will be incremented as beta is updated, and release notes will start from this point forward.
+
+## 0.0.2
+
+- Fix addCommaSeparators() so it can handle values < 1
+- Fix blockWidget display precision and sendWidget sending precision
+
+## 0.0.3
+
+- Add ability to send JUP directly from the address book component
+- Displays the last block time on the Generators page in 24hr time format instead of 12hr
+- Remove My Accounts from gear menu
+
+## 0.0.4
+
+- Fix balance copy precision issue
+- Improves styling of Dex page (search component & asset details)
+- Adds loading indicator to search box on Dex page & Dex widget
+- Fixes Dex search box not displaying results after valid search
+- Fix asset precision/quantity issue by properly converting assets with different decimals params
+- Improve text on DEX page when no Asset is selected
+- Add icon and text to address book add button
+
+## 0.0.5
+
+- Fixed issue #156, buy/sell buttons are now full width
+- Add ability to display placeholder row inside JUPTable component when no row data is available (no transactions, no assets, etc...)
+- Upgrade JupTable sorting mechanisms; with room for extensions to more complex object types such as BigNumber and Date
+- Adds current page indicator to navigation drawer

cypress/suites/dashboard.suite.ts

@@ -79,6 +79,7 @@ import * as Constants from "support/utils/constants";
 // [x] Clicking it again expands it
 // [x] All internal navigation links should...navigate
 // [x] All external navication links should...navigate
+// [x] Currently selected nav element is highlighted as "selected", unselected should not have "selected"===true
 
 export default {
   name: __filename,
@@ -150,6 +151,18 @@ export default {
           cy.get(".MuiTableRow-root").should("contain.text", Constants.validAddress2);
           cy.get(".MuiTableRow-root").should("contain.text", Constants.validAddress3);
         });
+
+        it("should allow sending from the address book", () => {
+          cy.get("button").contains("+").click();
+          addAddressToAddressbook(Constants.validAddress);
+
+          cy.get("button").contains("Send JUP").click();
+          cy.get('input[placeholder*="Enter Quantity"]').type("100");
+          cy.get("button").contains("Next").click();
+          cy.get('input[placeholder*="Enter Seed Phrase"]').type(testnetSeedPhrase);
+          cy.get("button").contains("Confirm & Send").click();
+          cy.get("#notistack-snackbar").should("contain.text", messageText.transaction.success);
+        });
       });
 
       describe("send widget", () => {
@@ -490,6 +503,11 @@ export default {
           cy.get(".MuiDrawer-root > .MuiPaper-root").should("be.visible");
         });
 
+        it("should display the selected navigation element properly", () => {
+          cy.get('[data-cy="nav-/dashboard"]').should("have.class", "Mui-selected");
+          cy.get('[data-cy="nav-/exchange"]').should("not.have.class", "Mui-selected");
+        });
+
         it("dashboard navigation should work", () => {
           // navigate away first
           cy.get('[href="/portfolio"] > .MuiButtonBase-root').click();

cypress/suites/login.suite.ts

@@ -253,12 +253,16 @@ export default {
       });
 
       /* eslint-disable-next-line mocha-cleanup/asserts-limit */
-      it("should generate a warning on short seed phrases", () => {
+      it("should generate a warning on short seed phrases and still login", () => {
         expectClickExistingUserButton();
         clickSeedPhraseLoginButton();
 
         cy.get(".MuiAutocomplete-input").type(shortSecretPhrase);
         cy.get("#notistack-snackbar").contains(messageText.validation.secretLengthWarning);
+
+        // finish login
+        cy.get("button").contains("Login").click();
+        expectToBeOnDashboard();
       });
 
       //

docs/beta/README.md

@@ -0,0 +1,27 @@
+# Jovian Beta Release Docs
+
+This codebase has been in the works since April 2022. The original wireframes were sketched out by Sigwo on the Jupiter team in early March 2022, and Nathan Bowers from the Up North Coding team started exploring putting together a bid for the user interface at that time.
+
+The bid was submitted March 22, 2022 and code writing began in early April after a short design and specification review phase internally at Up North Coding.
+
+The project was written by Nathan Bowers as the Project Manager and Primary Software Developer, and Vance Walsh who subcontracted on some of the work as a Senior Software Engineer. The project currently consists of about `13,500` lines of code.
+
+It is built using the following software tools:
+
+- React (Primary Frontend Framework)
+- Vite (React Builder/Bundler)
+- Typescript
+- Material UI (Components Library)
+- Cypres (Automated Testing)
+
+Up North Coding is thrilled to present the project to the public in this limited beta phase. We are sure there are going to be some kinks to work out as there are with any major software project, but we're excited about winning the Jupiter Hackathon to bring this wallet to life and we look forward to ironing out any kinks as the wallet moves closer to the production ready frontend wallet for the project moving forward.
+
+## Feedback Reporting
+
+Nathan Bowers (@outragedhuman) will be monitoring the beta Discord channel and will be absorbing feedback. The initial stage of the beta will occur on the Jupiter Testnet so no funds will be at risk. While we don't anticipate any loss-of-funds based on the testing we've done so far, it's important to take a sane release process and that involves starting on testnet.
+
+Three types of feedback will be managed:
+
+1. Bugs - If a user finds a bug they should report it in the Discord wallet beta channel. If the bug is already known the user will be informed. If it's a new bug we will add it to the Github issue list and prioritize fixing it.
+1. UI Feedback - Any UI suggestions should be reported in the Discord wallet beta channel. We will consider each of these and write Github issues on them and prioritize.
+1. Security - Security suggestions should be DM'd to @outragedhuman so we can responsibly evaluate them. This allows us time to fix them before disclosing them publicly.

netlify.toml

@@ -0,0 +1,5 @@
+[[headers]]
+  # Define which paths this specific [[headers]] block will cover.
+  for = "/*"
+    [headers.values]
+    Access-Control-Allow-Origin = "*"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupiter-wallet",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "private": true,
   "scripts": {
     "proxy": "node proxy/server.js",

proxy/server.js

@@ -107,7 +107,7 @@ app.post("/nxt", async function (req, res) {
         "Sec-Fetch-Site": "same-site",
         "Sec-Fetch-Mode": "cors",
         "Sec-Fetch-Dest": "empty",
-        Referer: "https://nodes.jup.io/test",
+        Referer: BASEURL,
         "Accept-Encoding": "gzip, deflate",
         "Accept-Language": "en-US,en;q=0.9",
         Connection: "close",

src/App.tsx

@@ -63,8 +63,10 @@ const App: React.FC = () => {
               <Route path="/dashboard" element={<Private Component={Dashboard} />} />
               <Route path="/transactions" element={<Private Component={Transactions} />} />
               <Route path="/portfolio" element={<Private Component={Portfolio} />} />
+              <Route path="/blocks" element={<Private Component={Blocks} />} />
               <Route path="/peers" element={<Private Component={Peers} />} />
               <Route path="/exchange" element={<Private Component={DEX} />} />
+              <Route path="/generators" element={<Private Component={Generators} />} />
             </Routes>
           </MUIThemeProvider>
         </Router>

src/_headers

@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *

src/components/CollapsingPortfolioTable/CollapsingPortfolioTable.tsx

@@ -19,12 +19,13 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import JUPDialog from "components/JUPDialog";
 import AssetActionsStack from "components/AssetActionsStack";
 import JUPInput from "components/JUPInput";
-import { LedaNFTName } from "utils/common/constants";
+import { LedaNFTName, LongUnitPrecision } from "utils/common/constants";
 import { messageText } from "utils/common/messages";
-import { addCommaSeparators } from "utils/common/addCommaSeparators";
 import useAssets from "hooks/useAssets";
 import useAPIRouter from "hooks/useAPIRouter";
 import { useSnackbar } from "notistack";
+import { QNTtoNXT } from "utils/common/QNTtoNXT";
+import { BigNumber } from "bignumber.js";
 
 interface IPortfolioAssets {
   name: string;
@@ -176,7 +177,7 @@ const CollapsingPortfolioTable: React.FC = () => {
       return createData({
         name: asset.assetDetails.name,
         description: asset.assetDetails.description,
-        qtyOwned: addCommaSeparators(asset.quantityQNT),
+        qtyOwned: asset.quantityQNT,
         assetActions: (
           <AssetActionsStack
             handleSendAsset={handleSendAsset}
@@ -189,7 +190,7 @@ const CollapsingPortfolioTable: React.FC = () => {
           name: asset.assetDetails.name,
           description: asset.assetDetails.description,
           decimals: asset.assetDetails.decimals,
-          quantityQNT: `${asset.assetDetails.quantityQNT}`,
+          quantityQNT: asset.assetDetails.quantityQNT,
         },
       });
     });
@@ -263,14 +264,14 @@ function createData({ name, description, qtyOwned, assetActions, assetDetails }:
   return {
     name,
     description,
-    qtyOwned,
+    qtyOwned: QNTtoNXT(new BigNumber(qtyOwned), assetDetails.decimals, LongUnitPrecision),
     assetActions,
     assetDetails: [
       {
         name: assetDetails.name,
         description: assetDetails.description,
         decimals: assetDetails.decimals,
-        quantityQNT: addCommaSeparators(assetDetails.quantityQNT),
+        quantityQNT: assetDetails.quantityQNT,
       },
     ],
   };

src/components/Drawer/Drawer.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useMemo } from "react";
-import { Divider, Drawer, List, ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import { Divider, Drawer, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import {
   Dashboard as DashboardIcon, // alias to reduce confusion
   Restore as TransactionsIcon,
@@ -19,6 +19,7 @@ import UserInfo from "./components/UserInfo";
 import SLink from "components/SLink";
 import WalletDetails from "components/WalletDetails";
 import { JUPSidebarWidth } from "utils/common/constants";
+import { useLocation } from "react-router-dom";
 
 // Add items here to extend the navigation
 const internalNavItems = [
@@ -87,34 +88,38 @@ const externalNavItems = [
   },
 ];
 
-const DrawerContents = (
-  <div>
-    <WalletDetails />
-    <UserInfo />
-    <Divider />
-    <List>
-      {internalNavItems.map((item) => (
-        <SLink href={item.url} key={item.text}>
-          <ListItem button>
-            <ListItemIcon>{item.icon}</ListItemIcon>
-            <ListItemText primary={item.text} />
-          </ListItem>
-        </SLink>
-      ))}
-    </List>
-    <Divider />
-    <List>
-      {externalNavItems.map((item) => (
-        <SLink external href={item.url} key={item.text}>
-          <ListItem button>
-            <ListItemIcon>{item.icon}</ListItemIcon>
-            <ListItemText primary={item.text} />
-          </ListItem>
-        </SLink>
-      ))}
-    </List>
-  </div>
-);
+const DrawerContents = () => {
+  const path = useLocation();
+
+  return (
+    <div>
+      <WalletDetails />
+      <UserInfo />
+      <Divider />
+      <List>
+        {internalNavItems.map((item) => (
+          <SLink href={item.url} key={item.text}>
+            <ListItemButton selected={path.pathname === item.url} data-cy={`nav-${item.url}`}>
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </SLink>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {externalNavItems.map((item) => (
+          <SLink external href={item.url} key={item.text}>
+            <ListItemButton>
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </SLink>
+        ))}
+      </List>
+    </div>
+  );
+};
 
 interface INavDrawerProps {
   isSidebarExpanded: boolean;
@@ -131,7 +136,7 @@ const NavDrawer: React.FC<INavDrawerProps> = ({ isSidebarExpanded }) => {
           "& .MuiDrawer-paper": { boxSizing: "border-box", width: isSidebarExpanded ? JUPSidebarWidth : "0px", overflowX: "hidden" },
         }}
       >
-        {DrawerContents}
+        <DrawerContents />
       </Drawer>
     );
   }, [isSidebarExpanded]);

src/components/Drawer/components/UserInfo/UserInfo.tsx

@@ -124,7 +124,11 @@ const UserInfo: React.FC = () => {
       {DynamicChip}
       {/* TODO: Add tooltip explaining what an accountName is for */}
       <AccountNameChip size="small" label={accountName} onClick={() => displayAccountInfo()} />
-      <AccountBalanceChip size="small" label={NQTtoNXT(new BigNumber(balance), LongUnitPrecision) + " JUP"} onClick={() => handleCopy(balance)} />
+      <AccountBalanceChip
+        size="small"
+        label={NQTtoNXT(new BigNumber(balance), LongUnitPrecision) + " JUP"}
+        onClick={() => handleCopy(NQTtoNXT(new BigNumber(balance), LongUnitPrecision))}
+      />
     </>
   );
 };