Merge pull request #33 from burrowHQ/add-a-ledger-wallet

Add a ledger wallet

next.config.js

@@ -14,6 +14,16 @@ module.exports = {
       issuer: /\.[jt]sx?$/,
       use: ["@svgr/webpack"],
     });
+    config.module.rules.push({
+      test: /.js$/,
+      use: {
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-env"],
+        },
+      },
+      // exclude: /node_modules/,
+    });
 
     if (!isServer) {
       config.resolve.fallback.fs = false;

package.json

@@ -28,6 +28,7 @@
     "@mui/utils": "^5.10.6",
     "@near-wallet-selector/core": "^8.5.4",
     "@near-wallet-selector/here-wallet": "^8.5.4",
+    "@near-wallet-selector/ledger": "^8.5.4",
     "@near-wallet-selector/meteor-wallet": "^8.5.4",
     "@near-wallet-selector/modal-ui": "^8.5.4",
     "@near-wallet-selector/my-near-wallet": "^8.5.4",
@@ -50,6 +51,7 @@
     "@types/react-virtualized": "^9.21.21",
     "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.15",
+    "babel-loader": "^9.1.3",
     "better-sqlite3": "^7.6.2",
     "bn.js": "^5.2.1",
     "borsh": "^0.7.0",

screens/Dashboard/index.tsx

@@ -21,6 +21,7 @@ import DashboardOverview from "./dashboardOverview";
 import { ConnectWalletButton } from "../../components/Header/WalletButton";
 import SupplyBorrowListMobile from "./supplyBorrowListMobile";
 import { AdjustButton, WithdrawButton, RepayButton, MarketButton } from "./supplyBorrowButtons";
+import { hiddenAssets } from "../../utils/config";
 
 const Index = () => {
   const accountId = useAccountId();
@@ -194,7 +195,9 @@ const YourSupplied = ({ suppliedRows, accountId, total }) => {
         selectedRowIndex={selected?.index}
         actionRow={
           <div className="flex gap-2 pb-6 table-action-row">
-            <MarketButton tokenId={selected?.data?.tokenId} />
+            {hiddenAssets.includes(selected?.data?.tokenId || "") ? null : (
+              <MarketButton tokenId={selected?.data?.tokenId} />
+            )}
             <WithdrawButton tokenId={selected?.data?.tokenId} />
             {canUseAsCollateral && <AdjustButton tokenId={selected?.data?.tokenId} />}
           </div>

screens/Dashboard/supplyBorrowListMobile.tsx

@@ -7,6 +7,7 @@ import DashboardReward from "./dashboardReward";
 import { formatTokenValue, formatUSDValue, millifyNumber } from "../../helpers/helpers";
 import { AdjustButton, MarketButton, RepayButton, WithdrawButton } from "./supplyBorrowButtons";
 import { NoDataMascot } from "../../components/Icons/Icons";
+import { hiddenAssets } from "../../utils/config";
 
 const SupplyBorrowListMobile = ({ suppliedRows, borrowedRows, accountId }) => {
   const [tabIndex, setTabIndex] = useState(0);
@@ -135,14 +136,16 @@ const SupplyItem = ({ data }) => {
           <img src={data?.icon} width={26} height={26} alt="token" className="rounded-full" />
           <div className="flex flex-col">
             <div className="truncate h4b">{data?.symbol}</div>
-            <MarketButton
-              tokenId={data?.tokenId}
-              style={{
-                border: 0,
-                padding: 0,
-                fontSize: 12,
-              }}
-            />
+            {hiddenAssets.includes(data?.tokenId || "") ? null : (
+              <MarketButton
+                tokenId={data?.tokenId}
+                style={{
+                  border: 0,
+                  padding: 0,
+                  fontSize: 12,
+                }}
+              />
+            )}
           </div>
         </div>
 

styles/global.css

@@ -730,6 +730,47 @@ options-list::-webkit-scrollbar {
 .nws-modal-wrapper .nws-modal .connecting-details span {
   color: #fff;
 }
+.nws-form-control .account label {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nws-form-control .account br {
+  display: none;
+}
+.nws-modal-wrapper
+  .nws-modal
+  .choose-ledger-account-form-wrapper
+  .nws-form-control
+  .account {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid #42525c;
+}
+.nws-modal-wrapper
+  .nws-modal
+  .choose-ledger-account-form-wrapper
+  .nws-form-control
+  .account
+  input[type='checkbox'] {
+  transform: scale(1.2);
+}
+.nws-modal-wrapper .nws-modal .overview-wrapper .account {
+  border-bottom: 1px solid #42525c;
+}
+.nws-modal-wrapper .nws-modal .overview-wrapper .account span {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nws-modal-wrapper .nws-modal .modal-right::-webkit-scrollbar {
+  width: 2px;
+}
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */

utils/config.ts

@@ -3,7 +3,7 @@ import { ConnectConfig } from "near-api-js";
 export const LOGIC_CONTRACT_NAME = process.env.NEXT_PUBLIC_CONTRACT_NAME as string;
 export const DUST_THRESHOLD = 0.001;
 
-export const hiddenAssets = ["meta-token.near"];
+export const hiddenAssets = ["meta-token.near", "usn"];
 
 export const defaultNetwork = (process.env.NEXT_PUBLIC_DEFAULT_NETWORK ||
   process.env.NODE_ENV ||

utils/wallet-selector-compat.ts

@@ -10,6 +10,7 @@ import { setupWalletConnect } from "@near-wallet-selector/wallet-connect";
 import { setupNeth } from "@near-wallet-selector/neth";
 import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet";
 import { setupModal } from "@near-wallet-selector/modal-ui";
+import { setupLedger } from "@near-wallet-selector/ledger";
 import type { WalletSelectorModal } from "@near-wallet-selector/modal-ui";
 import { Near } from "near-api-js/lib/near";
 import { Account } from "near-api-js/lib/account";
@@ -90,6 +91,7 @@ export const getWalletSelector = async ({ onAccountChange }: GetWalletSelectorAr
           name: "NEAR Wallet Selector",
         },
       }),
+      setupLedger(),
     ],
     network: defaultNetwork,
     debug: !!isTestnet,