Skip to content

Commit 40077d5

Browse files
hardsettinghardsetting
committed
[mui] Using new submodule
1 parent dd62554 commit 40077d5

18 files changed

+755
-168
lines changed

‎packages/wallet-adapter-mui-design/package.json‎

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@
22
"name": "@aptos-labs/wallet-adapter-mui-design",
33
"version": "3.1.0",
44
"description": "Aptos Wallet Adapter mui design",
5-
"main": "./dist/index.js",
6-
"module": "./dist/index.mjs",
7-
"types": "./dist/index.d.ts",
5+
"main": "./dist/cjs/index.js",
6+
"module": "./dist/esm/index.mjs",
7+
"types": "./dist/types/index.d.ts",
88
"license": "Apache-2.0",
99
"exports": {
10-
"require": "./dist/index.js",
11-
"import": "./dist/index.mjs",
12-
"types": "./dist/index.d.ts"
10+
".": {
11+
"types": "./dist/types/index.d.ts",
12+
"require": "./dist/cjs/index.js",
13+
"import": "./dist/esm/index.mjs"
14+
},
15+
"./new": {
16+
"types": "./dist/types/new/index.d.ts",
17+
"require": "./dist/cjs/new/index.js",
18+
"import": "./dist/esm/new/index.mjs"
19+
}
1320
},
1421
"repository": {
1522
"type": "git",
@@ -29,11 +36,33 @@
2936
"React"
3037
],
3138
"scripts": {
32-
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
33-
"dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
39+
"build": "tsup --onSuccess 'tsc'",
40+
"dev": "tsup --watch & tsc --watch",
3441
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
3542
"lint": "TIMING=1 eslint \"src/**/*.ts*\""
3643
},
44+
"tsup": [
45+
{
46+
"clean": true,
47+
"sourcemap": true,
48+
"entryPoints": [
49+
"src/index.tsx",
50+
"src/new/index.ts"
51+
],
52+
"format": ["esm"],
53+
"outDir": "dist/esm"
54+
},
55+
{
56+
"clean": true,
57+
"sourcemap": true,
58+
"entryPoints": [
59+
"src/index.tsx",
60+
"src/new/index.ts"
61+
],
62+
"format": ["cjs"],
63+
"outDir": "dist/cjs"
64+
}
65+
],
3766
"devDependencies": {
3867
"@aptos-labs/wallet-adapter-tsconfig": "workspace:*",
3968
"@types/react": "^18.3.3",
@@ -43,6 +72,7 @@
4372
"typescript": "^5.4.5"
4473
},
4574
"dependencies": {
75+
"@aptos-labs/wallet-adapter-core": "workspace:*",
4676
"@aptos-labs/wallet-adapter-react": "workspace:*",
4777
"@emotion/react": "^11.10.5",
4878
"@emotion/styled": "^11.10.5",
@@ -53,5 +83,6 @@
5383
"react": "^18",
5484
"react-dom": "^18",
5585
"react-router-dom": "^6.8.0"
56-
}
86+
},
87+
"sideEffects": false
5788
}

‎packages/wallet-adapter-mui-design/src/AptosConnectEducationScreen.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { AboutAptosConnectEducationScreen } from '@aptos-labs/wallet-adapter-react';
2+
import { ArrowBack, ArrowForward } from '@mui/icons-material';
3+
import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
4+
5+
export function AptosConnectEducationScreen(screen: AboutAptosConnectEducationScreen) {
6+
return (
7+
<>
8+
<Box
9+
sx={{
10+
display: "grid",
11+
gridTemplateColumns: "1fr 4fr 1fr",
12+
alignItems: "center",
13+
justifyItems: "start",
14+
}}
15+
>
16+
<IconButton onClick={screen.cancel}>
17+
<ArrowBack />
18+
</IconButton>
19+
<Typography variant="body1" component="h2" width="100%" align="center">
20+
About Aptos Connect
21+
</Typography>
22+
</Box>
23+
24+
<Box
25+
sx={{
26+
display: "flex",
27+
pb: 1.5,
28+
alignItems: "end",
29+
justifyContent: "center",
30+
height: "162px",
31+
}}
32+
>
33+
<screen.Graphic />
34+
</Box>
35+
<Stack sx={{ gap: 1, textAlign: "center", pb: 2 }}>
36+
<Typography component={screen.Title} variant="h6" />
37+
<Typography
38+
component={screen.Description}
39+
variant="body2"
40+
color={(theme) => theme.palette.text.secondary}
41+
sx={{
42+
"&>a": {
43+
color: (theme) => theme.palette.text.primary,
44+
textDecoration: "underline",
45+
textUnderlineOffset: "4px",
46+
},
47+
}}
48+
/>
49+
</Stack>
50+
51+
<Box
52+
sx={{
53+
display: "grid",
54+
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
55+
alignItems: "center",
56+
}}
57+
>
58+
<Button
59+
size="small"
60+
variant="text"
61+
onClick={screen.back}
62+
sx={{ justifySelf: "start" }}
63+
>
64+
Back
65+
</Button>
66+
<Box
67+
sx={{
68+
display: "flex",
69+
alignItems: "center",
70+
gap: 1,
71+
placeSelf: "center",
72+
}}
73+
>
74+
{screen.screenIndicators.map((ScreenIndicator, i) => (
75+
<Box
76+
key={i}
77+
component={ScreenIndicator}
78+
sx={{
79+
px: 0,
80+
py: 2,
81+
background: "none",
82+
border: "none",
83+
cursor: "pointer",
84+
}}
85+
>
86+
<Box
87+
sx={{
88+
height: "2px",
89+
width: "24px",
90+
bgcolor: (theme) => theme.palette.text.disabled,
91+
"[data-active]>&": {
92+
bgcolor: (theme) => theme.palette.text.primary,
93+
},
94+
}}
95+
/>
96+
</Box>
97+
))}
98+
</Box>
99+
<Button
100+
size="small"
101+
variant="text"
102+
onClick={screen.next}
103+
sx={{ justifySelf: "end" }}
104+
endIcon={<ArrowForward sx={{ height: 16, width: 16 }} />}
105+
>
106+
{screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"}
107+
</Button>
108+
</Box>
109+
</>
110+
);
111+
}

‎packages/wallet-adapter-mui-design/src/WalletButton.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { truncateAddress, useActiveWallet } from "@aptos-labs/wallet-adapter-react";
1+
import { truncateAddress, useWallet } from "@aptos-labs/wallet-adapter-react";
22
import { AccountBalanceWalletOutlined as AccountBalanceWalletOutlinedIcon } from "@mui/icons-material";
33
import { Avatar, Button, Typography } from "@mui/material";
44
import React, { useState } from "react";
@@ -13,7 +13,7 @@ export default function WalletButton({
1313
handleModalOpen,
1414
handleNavigate,
1515
}: WalletButtonProps): JSX.Element {
16-
const wallet = useActiveWallet();
16+
const { connected, account, wallet } = useWallet();
1717

1818
const [popoverAnchor, setPopoverAnchor] = useState<HTMLButtonElement | null>(
1919
null,
@@ -36,19 +36,21 @@ export default function WalletButton({
3636
<Button
3737
size="large"
3838
variant="contained"
39-
onClick={wallet.isConnected ? handleClick : onConnectWalletClick}
39+
onClick={connected ? handleClick : onConnectWalletClick}
4040
className="wallet-button"
4141
sx={{ borderRadius: "10px" }}
4242
>
43-
{wallet.isConnected ? (
43+
{connected ? (
4444
<>
4545
<Avatar
46-
alt={wallet.name}
47-
src={wallet.icon}
46+
alt={wallet?.name}
47+
src={wallet?.icon}
4848
sx={{ width: 24, height: 24 }}
4949
/>
5050
<Typography noWrap ml={2}>
51-
{truncateAddress(wallet.activeAccount.address.toString())}
51+
{account?.ansName ||
52+
truncateAddress(account?.address) ||
53+
"Unknown"}
5254
</Typography>
5355
</>
5456
) : (
@@ -58,12 +60,11 @@ export default function WalletButton({
5860
</>
5961
)}
6062
</Button>
61-
{wallet.isConnected ? <WalletMenu
62-
wallet={wallet}
63+
<WalletMenu
6364
popoverAnchor={popoverAnchor}
6465
handlePopoverClose={handlePopoverClose}
6566
handleNavigate={handleNavigate}
66-
/> : null}
67+
/>
6768
</>
6869
);
6970
}

‎packages/wallet-adapter-mui-design/src/WalletMenu.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ConnectedWallet, useWallet } from "@aptos-labs/wallet-adapter-react";
1+
import { useWallet } from "@aptos-labs/wallet-adapter-react";
22
import {
33
List,
44
ListItem,
@@ -13,15 +13,14 @@ type WalletMenuProps = {
1313
popoverAnchor: HTMLButtonElement | null;
1414
handlePopoverClose: () => void;
1515
handleNavigate?: () => void;
16-
wallet: ConnectedWallet;
1716
};
1817

1918
export default function WalletMenu({
2019
popoverAnchor,
2120
handlePopoverClose,
2221
handleNavigate,
23-
wallet,
2422
}: WalletMenuProps): JSX.Element {
23+
const { account, disconnect } = useWallet();
2524
const popoverOpen = Boolean(popoverAnchor);
2625
const id = popoverOpen ? "wallet-popover" : undefined;
2726

@@ -30,15 +29,15 @@ export default function WalletMenu({
3029
handlePopoverClose();
3130
};
3231

33-
const handleLogout = async () => {
34-
await wallet.disconnect();
32+
const handleLogout = () => {
33+
disconnect();
3534
handlePopoverClose();
3635
};
3736

3837
const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
3938

4039
const copyAddress = async () => {
41-
await navigator.clipboard.writeText(wallet.activeAccount.address.toString());
40+
await navigator.clipboard.writeText(account?.address!);
4241

4342
setTooltipOpen(true);
4443

0 commit comments

Comments
 (0)