@aptos-labs/wallet-adapter-mui-design 5.5.0 → 5.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/README.md +93 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @aptos-labs/wallet-adapter-mui-design
|
|
2
2
|
|
|
3
|
+
## 5.5.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- @aptos-labs/wallet-adapter-react@8.2.2
|
|
8
|
+
|
|
9
|
+
## 5.5.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [0379135]
|
|
14
|
+
- @aptos-labs/wallet-adapter-react@8.2.1
|
|
15
|
+
|
|
3
16
|
## 5.5.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Aptos Wallet Adapter Selector MUI Design
|
|
2
|
+
|
|
3
|
+
Package for wallet selector modal using [Material-UI (MUI)](https://mui.com/). Includes a `wallet connect` button when clicked, opens up a `wallet select modal`.
|
|
4
|
+
|
|
5
|
+
If wallet is already connected, the button would display the connected account address truncated (i.e `0x123...abc`), in that case, clicking the button would disconnect the wallet.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Make sure you have [@aptos-labs/wallet-adapter-react](../wallet-adapter-react/README.md) installed
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @aptos-labs/wallet-adapter-mui-design
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
On the page you want to include the `wallet connect` button, import the `WalletConnector` module.
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
|
|
21
|
+
|
|
22
|
+
// ...
|
|
23
|
+
|
|
24
|
+
return <WalletConnector />;
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
That would add a `Connect Wallet` button when clicked opens up a `wallet selector` modal.
|
|
28
|
+
|
|
29
|
+
### Full Example
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
|
|
33
|
+
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
|
|
34
|
+
import { Network } from "@aptos-labs/ts-sdk";
|
|
35
|
+
|
|
36
|
+
function App() {
|
|
37
|
+
return (
|
|
38
|
+
<AptosWalletAdapterProvider
|
|
39
|
+
dappConfig={{ network: Network.MAINNET }}
|
|
40
|
+
onError={(error) => console.error(error)}
|
|
41
|
+
>
|
|
42
|
+
<WalletConnector />
|
|
43
|
+
</AptosWalletAdapterProvider>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Components
|
|
49
|
+
|
|
50
|
+
### WalletConnector
|
|
51
|
+
|
|
52
|
+
The main component that provides the wallet connection button and modal.
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
|
|
56
|
+
|
|
57
|
+
<WalletConnector />
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Customization
|
|
61
|
+
|
|
62
|
+
The MUI components can be styled using the standard MUI theming system. Wrap your app with a `ThemeProvider` to customize colors, typography, and other design tokens.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
66
|
+
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
|
|
67
|
+
|
|
68
|
+
const theme = createTheme({
|
|
69
|
+
palette: {
|
|
70
|
+
primary: {
|
|
71
|
+
main: "#1976d2",
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
function App() {
|
|
77
|
+
return (
|
|
78
|
+
<ThemeProvider theme={theme}>
|
|
79
|
+
<WalletConnector />
|
|
80
|
+
</ThemeProvider>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Related Packages
|
|
86
|
+
|
|
87
|
+
- [@aptos-labs/wallet-adapter-react](../wallet-adapter-react/) - React provider and hooks
|
|
88
|
+
- [@aptos-labs/wallet-adapter-ant-design](../wallet-adapter-ant-design/) - Ant Design alternative
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
Apache-2.0
|
|
93
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aptos-labs/wallet-adapter-mui-design",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.2",
|
|
4
4
|
"description": "Aptos Wallet Adapter mui design",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@emotion/styled": "^11.10.5",
|
|
42
42
|
"@mui/icons-material": "^5.11.0",
|
|
43
43
|
"@mui/material": "^5.11.6",
|
|
44
|
-
"@aptos-labs/wallet-adapter-react": "8.2.
|
|
44
|
+
"@aptos-labs/wallet-adapter-react": "8.2.2"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "^18.0.0 || ^19.0.0",
|