@aptos-labs/wallet-adapter-mui-design 0.0.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+

package/dist/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+
+// src/WalletConnector.tsx
+var import_react3 = require("react");
+
+// src/WalletButton.tsx
+var import_material2 = require("@mui/material");
+var import_react2 = require("react");
+var import_wallet_adapter_react2 = require("@aptos-labs/wallet-adapter-react");
+
+// src/WalletMenu.tsx
+var import_material = require("@mui/material");
+var import_wallet_adapter_react = require("@aptos-labs/wallet-adapter-react");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/WalletButton.tsx
+var import_AccountBalanceWalletOutlined = __toESM(require("@mui/icons-material/AccountBalanceWalletOutlined"));
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/WalletModel.tsx
+var import_material3 = require("@mui/material");
+var import_wallet_adapter_react3 = require("@aptos-labs/wallet-adapter-react");
+var import_WarningAmberOutlined = __toESM(require("@mui/icons-material/WarningAmberOutlined"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/WalletConnector.tsx
+var import_jsx_runtime = require("react/jsx-runtime");

package/dist/index.mjs

@@ -0,0 +1,47 @@
+// src/WalletConnector.tsx
+import { useState as useState3 } from "react";
+
+// src/WalletButton.tsx
+import { Avatar, Button, Typography } from "@mui/material";
+import { useState as useState2 } from "react";
+import { useWallet as useWallet2 } from "@aptos-labs/wallet-adapter-react";
+
+// src/WalletMenu.tsx
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Popover,
+  Tooltip
+} from "@mui/material";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/WalletButton.tsx
+import AccountBalanceWalletOutlinedIcon from "@mui/icons-material/AccountBalanceWalletOutlined";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/WalletModel.tsx
+import {
+  Box,
+  Button as Button2,
+  ListItem as ListItem2,
+  ListItemAvatar,
+  ListItemButton as ListItemButton2,
+  ListItemText as ListItemText2,
+  Typography as Typography2,
+  useTheme,
+  Grid,
+  IconButton,
+  Dialog,
+  Stack
+} from "@mui/material";
+import { useWallet as useWallet3 } from "@aptos-labs/wallet-adapter-react";
+import LanOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/WalletConnector.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@aptos-labs/wallet-adapter-mui-design",
+  "version": "0.0.0",
+  "description": "Aptos Wallet Adapter mui design",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aptos-labs/aptos-wallet-adapter.git"
+  },
+  "homepage": "https://github.com/aptos-labs/aptos-wallet-adapter",
+  "bugs": {
+    "url": "https://github.com/aptos-labs/aptos-wallet-adapter/issues"
+  },
+  "author": "aptoslabs.com",
+  "keywords": [
+    "Aptos",
+    "Aptos Labs",
+    "Wallet",
+    "Wallet Adapter",
+    "Wallet Adapter Provider",
+    "React"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "lint": "TIMING=1 eslint \"src/**/*.ts*\""
+  },
+  "devDependencies": {
+    "@aptos-labs/wallet-adapter-tsconfig": "workspace:*",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.15.0",
+    "tsup": "^5.10.1",
+    "typescript": "^4.5.3"
+  },
+  "dependencies": {
+    "@aptos-labs/wallet-adapter-react": "*",
+    "@babel/core": "^7.0.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.6",
+    "aptos": "^1.3.17",
+    "react": "^18",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0"
+  }
+}

package/src/WalletButton.tsx

@@ -0,0 +1,70 @@
+import { Avatar, Button, Typography } from "@mui/material";
+import { useState } from "react";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import WalletMenu from "./WalletMenu";
+import React from "react";
+import { truncateAddress } from "./utils";
+import AccountBalanceWalletOutlinedIcon from "@mui/icons-material/AccountBalanceWalletOutlined";
+
+type WalletButtonProps = {
+  handleModalOpen: () => void;
+  handleNavigate?: () => void;
+};
+
+export default function WalletButton({
+  handleModalOpen,
+  handleNavigate,
+}: WalletButtonProps): JSX.Element {
+  const { connected, account, wallet } = useWallet();
+
+  const [popoverAnchor, setPopoverAnchor] = useState<HTMLButtonElement | null>(
+    null
+  );
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setPopoverAnchor(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setPopoverAnchor(null);
+  };
+
+  const onConnectWalletClick = () => {
+    handlePopoverClose();
+    handleModalOpen();
+  };
+
+  return (
+    <>
+      <Button
+        size="large"
+        variant="contained"
+        onClick={connected ? handleClick : onConnectWalletClick}
+        className="wallet-button"
+        sx={{ borderRadius: "10px" }}
+      >
+        {connected ? (
+          <>
+            <Avatar
+              alt={wallet?.name}
+              src={wallet?.icon}
+              sx={{ width: 24, height: 24 }}
+            />
+            <Typography noWrap ml={2}>
+              {truncateAddress(account?.address!)}
+            </Typography>
+          </>
+        ) : (
+          <>
+            <AccountBalanceWalletOutlinedIcon sx={{ marginRight: 1 }} />
+            <Typography noWrap>Connect Wallet</Typography>
+          </>
+        )}
+      </Button>
+      <WalletMenu
+        popoverAnchor={popoverAnchor}
+        handlePopoverClose={handlePopoverClose}
+        handleNavigate={handleNavigate}
+      />
+    </>
+  );
+}

package/src/WalletConnector.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import WalletButton from "./WalletButton";
+import WalletsModal from "./WalletModel";
+
+type WalletConnectorProps = {
+  networkSupport?: string;
+  handleNavigate?: () => void;
+};
+
+export default function WalletConnector({
+  networkSupport,
+  handleNavigate,
+}: WalletConnectorProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const handleModalOpen = () => setModalOpen(true);
+  const handleClose = () => setModalOpen(false);
+
+  return (
+    <>
+      <WalletButton
+        handleModalOpen={handleModalOpen}
+        handleNavigate={handleNavigate}
+      />
+      <WalletsModal
+        handleClose={handleClose}
+        modalOpen={modalOpen}
+        networkSupport={networkSupport}
+      />
+    </>
+  );
+}

package/src/WalletMenu.tsx

@@ -0,0 +1,88 @@
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Popover,
+  Tooltip,
+} from "@mui/material";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import React, { useState } from "react";
+
+type WalletMenuProps = {
+  popoverAnchor: HTMLButtonElement | null;
+  handlePopoverClose: () => void;
+  handleNavigate?: () => void;
+};
+
+export default function WalletMenu({
+  popoverAnchor,
+  handlePopoverClose,
+  handleNavigate,
+}: WalletMenuProps): JSX.Element {
+  const { account, disconnect } = useWallet();
+  const popoverOpen = Boolean(popoverAnchor);
+  const id = popoverOpen ? "wallet-popover" : undefined;
+
+  const onAccountOptionClicked = () => {
+    handleNavigate && handleNavigate();
+    handlePopoverClose();
+  };
+
+  const handleLogout = () => {
+    disconnect();
+    handlePopoverClose();
+  };
+
+  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+
+  const copyAddress = async (event: React.MouseEvent<HTMLDivElement>) => {
+    await navigator.clipboard.writeText(account?.address!);
+
+    setTooltipOpen(true);
+
+    setTimeout(() => {
+      setTooltipOpen(false);
+    }, 2000);
+  };
+
+  return (
+    <Popover
+      id={id}
+      open={popoverOpen}
+      anchorEl={popoverAnchor}
+      onClose={handlePopoverClose}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left",
+      }}
+    >
+      <List>
+        <Tooltip
+          title="Copied"
+          placement="bottom-end"
+          open={tooltipOpen}
+          disableFocusListener
+          disableHoverListener
+          disableTouchListener
+        >
+          <ListItem disablePadding>
+            <ListItemButton onClick={copyAddress}>
+              <ListItemText primary="Copy Address" />
+            </ListItemButton>
+          </ListItem>
+        </Tooltip>
+        <ListItem disablePadding>
+          <ListItemButton onClick={onAccountOptionClicked}>
+            <ListItemText primary="Account" />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton onClick={handleLogout}>
+            <ListItemText primary="Logout" />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </Popover>
+  );
+}

package/src/WalletModel.tsx

@@ -0,0 +1,212 @@
+import {
+  Box,
+  Button,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  Typography,
+  useTheme,
+  Grid,
+  IconButton,
+  Dialog,
+  Stack,
+} from "@mui/material";
+import { useWallet, WalletName } from "@aptos-labs/wallet-adapter-react";
+import { grey } from "./aptosColorPalette";
+import LanOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+
+type WalletsModalProps = {
+  handleClose: () => void;
+  modalOpen: boolean;
+  networkSupport?: string;
+};
+
+export default function WalletsModal({
+  handleClose,
+  modalOpen,
+  networkSupport,
+}: WalletsModalProps): JSX.Element {
+  const { wallets, connect } = useWallet();
+
+  const theme = useTheme();
+
+  const onWalletSelect = (walletName: WalletName) => {
+    connect(walletName);
+    handleClose();
+  };
+
+  const renderWalletsList = () => {
+    return wallets.map((wallet) => {
+      const option = wallet;
+      const icon = option.icon;
+      return (
+        <Grid key={option.name} xs={12} paddingY={0.5} item>
+          {wallet.readyState === "Installed" ? (
+            <ListItem disablePadding>
+              <ListItemButton
+                alignItems="center"
+                disableGutters
+                onClick={() => onWalletSelect(option.name)}
+                sx={{
+                  background:
+                    theme.palette.mode === "dark" ? grey[700] : grey[200],
+                  padding: "1rem 3rem",
+                  borderRadius: "10px",
+                  display: "flex",
+                  gap: "1rem",
+                }}
+              >
+                <ListItemAvatar
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    width: "2rem",
+                    height: "2rem",
+                    minWidth: "0",
+                    color: `${theme.palette.text.primary}`,
+                  }}
+                >
+                  <Box
+                    component="img"
+                    src={icon}
+                    sx={{ width: "100%", height: "100%" }}
+                  />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={option.name}
+                  primaryTypographyProps={{
+                    fontSize: 18,
+                  }}
+                />
+                <Button
+                  variant="contained"
+                  size="small"
+                  className="wallet-connect-button"
+                >
+                  Connect
+                </Button>
+              </ListItemButton>
+            </ListItem>
+          ) : (
+            <ListItem
+              alignItems="center"
+              sx={{
+                borderRadius: `${theme.shape.borderRadius}px`,
+                background:
+                  theme.palette.mode === "dark" ? grey[700] : grey[200],
+                padding: "1rem 3rem",
+                gap: "1rem",
+              }}
+            >
+              <ListItemAvatar
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "2rem",
+                  height: "2rem",
+                  minWidth: "0",
+                  opacity: "0.25",
+                }}
+              >
+                <Box
+                  component="img"
+                  src={icon}
+                  sx={{ width: "100%", height: "100%" }}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                sx={{
+                  opacity: "0.25",
+                }}
+                primary={option.name}
+                primaryTypographyProps={{
+                  fontSize: 18,
+                }}
+              />
+              <Button
+                LinkComponent={"a"}
+                href={option.url}
+                target="_blank"
+                size="small"
+                className="wallet-connect-install"
+              >
+                Install
+              </Button>
+            </ListItem>
+          )}
+        </Grid>
+      );
+    });
+  };
+
+  return (
+    <Dialog
+      open={modalOpen}
+      onClose={handleClose}
+      aria-labelledby="wallet selector modal"
+      aria-describedby="select a wallet to connect"
+      sx={{ borderRadius: "5px" }}
+    >
+      <Stack
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          top: "50%",
+          left: "50%",
+          width: 500,
+          bgcolor: "background.paper",
+          boxShadow: 24,
+          p: 3,
+        }}
+      >
+        <IconButton
+          onClick={handleClose}
+          sx={{
+            position: "absolute",
+            right: 12,
+            top: 12,
+            color: grey[450],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+        <Typography align="center" variant="h5" pt={2}>
+          Connect Wallet
+        </Typography>
+        <Box
+          sx={{
+            display: "flex",
+            gap: 0.5,
+            alignItems: "center",
+            justifyContent: "center",
+            mb: 4,
+          }}
+        >
+          {networkSupport && (
+            <>
+              <LanOutlinedIcon
+                sx={{
+                  fontSize: "0.9rem",
+                  color: grey[400],
+                }}
+              />
+              <Typography
+                sx={{
+                  display: "inline-flex",
+                  fontSize: "0.9rem",
+                  color: grey[400],
+                }}
+                align="center"
+              >
+                {networkSupport} only
+              </Typography>
+            </>
+          )}
+        </Box>
+        <Box>{renderWalletsList()}</Box>
+      </Stack>
+    </Dialog>
+  );
+}

package/src/aptosColorPalette.ts

@@ -0,0 +1,14 @@
+// Grey Palette
+export const grey = {
+  50: "#fafafa",
+  100: "#f4f4f5",
+  200: "#e4e4e7",
+  300: "#d4d4d8",
+  400: "#a1a1aa",
+  450: "#909099",
+  500: "#4f5352",
+  600: "#363a39",
+  700: "#272b2a",
+  800: "#1b1f1e",
+  900: "#121615",
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export * from "./WalletConnector";

package/src/utils.tsx

@@ -0,0 +1,36 @@
+function truncate(
+  str: string,
+  frontLen: number,
+  backLen: number,
+  truncateStr: string
+) {
+  if (!str) {
+    return "";
+  }
+
+  if (!Number.isInteger(frontLen) || !Number.isInteger(backLen)) {
+    throw `${frontLen} and ${backLen} should be an Integer`;
+  }
+
+  var strLen = str.length;
+  // Setting default values
+  frontLen = frontLen;
+  backLen = backLen;
+  truncateStr = truncateStr || "…";
+  if (
+    (frontLen === 0 && backLen === 0) ||
+    frontLen >= strLen ||
+    backLen >= strLen ||
+    frontLen + backLen >= strLen
+  ) {
+    return str;
+  } else if (backLen === 0) {
+    return str.slice(0, frontLen) + truncateStr;
+  } else {
+    return str.slice(0, frontLen) + truncateStr + str.slice(strLen - backLen);
+  }
+}
+
+export function truncateAddress(accountAddress: string) {
+  return truncate(accountAddress, 6, 4, "…");
+}