@aptos-labs/wallet-adapter-mui-design 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @aptos-labs/wallet-adapter-mui-design
 
+## 2.7.0
+
+### Minor Changes
+
+- 5bcae5e: Added `sortDefaultWallets` and `sortMoreWallets` props to `WalletConnector`.
+- 5bcae5e: Exposed `WalletConnectorProps` interface.
+
+### Patch Changes
+
+- Updated dependencies [07ee265]
+  - @aptos-labs/wallet-adapter-react@3.3.0
+
 ## 2.6.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1,9 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AnyAptosWallet } from '@aptos-labs/wallet-adapter-react';
 
-type WalletConnectorProps = {
+interface WalletConnectorProps {
     networkSupport?: string;
     handleNavigate?: () => void;
-};
-declare function WalletConnector({ networkSupport, handleNavigate, }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
+    /**
+     * An optional function for sorting wallets that are currently installed or
+     * loadable in the wallet connector modal.
+     */
+    sortDefaultWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
+    /**
+     * An optional function for sorting wallets that are NOT currently installed or
+     * loadable in the wallet connector modal.
+     */
+    sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
+}
+declare function WalletConnector({ networkSupport, handleNavigate, sortDefaultWallets, sortMoreWallets, }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
 
-export { WalletConnector };
+export { WalletConnector, WalletConnectorProps };

package/dist/index.js

@@ -201,7 +201,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function WalletsModal({
   handleClose,
   modalOpen,
-  networkSupport
+  networkSupport,
+  sortDefaultWallets,
+  sortMoreWallets
 }) {
   const theme = (0, import_material3.useTheme)();
   const [expanded, setExpanded] = (0, import_react3.useState)(false);
@@ -214,6 +216,10 @@ function WalletsModal({
     defaultWallets,
     moreWallets
   } = (0, import_wallet_adapter_react3.partitionWallets)(otherWallets);
+  if (sortDefaultWallets)
+    defaultWallets.sort(sortDefaultWallets);
+  if (sortMoreWallets)
+    moreWallets.sort(sortMoreWallets);
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Dialog, {
     open: modalOpen,
@@ -424,7 +430,9 @@ function AptosConnectWalletRow({ wallet, onConnect }) {
 var import_jsx_runtime = require("react/jsx-runtime");
 function WalletConnector({
   networkSupport,
-  handleNavigate
+  handleNavigate,
+  sortDefaultWallets,
+  sortMoreWallets
 }) {
   const [modalOpen, setModalOpen] = (0, import_react4.useState)(false);
   const handleModalOpen = () => setModalOpen(true);
@@ -438,7 +446,9 @@ function WalletConnector({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletsModal, {
         handleClose,
         modalOpen,
-        networkSupport
+        networkSupport,
+        sortDefaultWallets,
+        sortMoreWallets
       })
     ]
   });

package/dist/index.mjs

@@ -204,7 +204,9 @@ import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-run
 function WalletsModal({
   handleClose,
   modalOpen,
-  networkSupport
+  networkSupport,
+  sortDefaultWallets,
+  sortMoreWallets
 }) {
   const theme = useTheme();
   const [expanded, setExpanded] = useState3(false);
@@ -217,6 +219,10 @@ function WalletsModal({
     defaultWallets,
     moreWallets
   } = partitionWallets(otherWallets);
+  if (sortDefaultWallets)
+    defaultWallets.sort(sortDefaultWallets);
+  if (sortMoreWallets)
+    moreWallets.sort(sortMoreWallets);
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
   return /* @__PURE__ */ jsx3(Dialog, {
     open: modalOpen,
@@ -427,7 +433,9 @@ function AptosConnectWalletRow({ wallet, onConnect }) {
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function WalletConnector({
   networkSupport,
-  handleNavigate
+  handleNavigate,
+  sortDefaultWallets,
+  sortMoreWallets
 }) {
   const [modalOpen, setModalOpen] = useState4(false);
   const handleModalOpen = () => setModalOpen(true);
@@ -441,7 +449,9 @@ function WalletConnector({
       /* @__PURE__ */ jsx4(WalletsModal, {
         handleClose,
         modalOpen,
-        networkSupport
+        networkSupport,
+        sortDefaultWallets,
+        sortMoreWallets
       })
     ]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptos-labs/wallet-adapter-mui-design",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Aptos Wallet Adapter mui design",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.6",
-    "@aptos-labs/wallet-adapter-react": "3.2.0"
+    "@aptos-labs/wallet-adapter-react": "3.3.0"
   },
   "peerDependencies": {
     "react": "^18",

package/src/WalletConnector.tsx

@@ -1,15 +1,28 @@
+import { AnyAptosWallet } from "@aptos-labs/wallet-adapter-react";
 import { useState } from "react";
 import WalletButton from "./WalletButton";
 import WalletsModal from "./WalletModel";
 
-type WalletConnectorProps = {
+export interface WalletConnectorProps {
   networkSupport?: string;
   handleNavigate?: () => void;
-};
+  /**
+   * An optional function for sorting wallets that are currently installed or
+   * loadable in the wallet connector modal.
+   */
+  sortDefaultWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
+  /**
+   * An optional function for sorting wallets that are NOT currently installed or
+   * loadable in the wallet connector modal.
+   */
+  sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
+}
 
 export function WalletConnector({
   networkSupport,
   handleNavigate,
+  sortDefaultWallets,
+  sortMoreWallets,
 }: WalletConnectorProps) {
   const [modalOpen, setModalOpen] = useState(false);
   const handleModalOpen = () => setModalOpen(true);
@@ -25,6 +38,8 @@ export function WalletConnector({
         handleClose={handleClose}
         modalOpen={modalOpen}
         networkSupport={networkSupport}
+        sortDefaultWallets={sortDefaultWallets}
+        sortMoreWallets={sortMoreWallets}
       />
     </>
   );

package/src/WalletModel.tsx

@@ -27,17 +27,23 @@ import {
   LanOutlined as LanOutlinedIcon,
 } from "@mui/icons-material";
 import { useState } from "react";
+import { WalletConnectorProps } from "./WalletConnector";
 
-type WalletsModalProps = {
+interface WalletsModalProps
+  extends Pick<
+    WalletConnectorProps,
+    "networkSupport" | "sortDefaultWallets" | "sortMoreWallets"
+  > {
   handleClose: () => void;
   modalOpen: boolean;
-  networkSupport?: string;
-};
+}
 
 export default function WalletsModal({
   handleClose,
   modalOpen,
   networkSupport,
+  sortDefaultWallets,
+  sortMoreWallets,
 }: WalletsModalProps): JSX.Element {
   const theme = useTheme();
   const [expanded, setExpanded] = useState(false);
@@ -58,6 +64,9 @@ export default function WalletsModal({
     moreWallets,
   } = partitionWallets(otherWallets);
 
+  if (sortDefaultWallets) defaultWallets.sort(sortDefaultWallets);
+  if (sortMoreWallets) moreWallets.sort(sortMoreWallets);
+
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
 
   return (