Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 266a770

Browse files
alexandratranvandan
alexandratran
and
vandan
authored
Update and restructure content (MetaMask#840)
* Update and restructure content * fix errors * Move SDK into connect section * update wallet homepage cards * Update contract page * fix apostrophes * Add more concepts * update arch diagram * Update architecture.md (MetaMask#850) Proposing some minor copy adjustments * Update arch diagram * Update README.md Co-authored-by: Vandan <[email protected]> * update sdk card styling * add icons * revert changes made in separate PRs * minor fix * link back to tutorial * revert contributing changes * minor fixes * fix link --------- Co-authored-by: Vandan <[email protected]>
1 parent a434faa commit 266a770

55 files changed

Lines changed: 749 additions & 656 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docusaurus.config.js‎

Lines changed: 122 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const config = {
9090
},
9191
{
9292
from: "/guide/getting-started",
93-
to: "/wallet/get-started/set-up-dev-environment",
93+
to: "/wallet/how-to/get-started-building/set-up-dev-environment",
9494
},
9595
{
9696
from: "/guide/common-terms",
@@ -102,7 +102,7 @@ const config = {
102102
},
103103
{
104104
from: "/guide/accessing-accounts",
105-
to: "/wallet/get-started/access-accounts",
105+
to: "/wallet/how-to/connect/access-accounts",
106106
},
107107
{
108108
from: "/guide/sending-transactions",
@@ -126,35 +126,35 @@ const config = {
126126
},
127127
{
128128
from: "/guide/registering-function-names",
129-
to: "/wallet/how-to/register-method-names",
129+
to: "/wallet/how-to/display/method-names",
130130
},
131131
{
132132
from: "/guide/registering-your-token",
133-
to: "/wallet/how-to/register-token",
133+
to: "/wallet/how-to/display/tokens",
134134
},
135135
{
136136
from: "/guide/defining-your-icon",
137-
to: "/wallet/how-to/set-icon",
137+
to: "/wallet/how-to/display/icon",
138138
},
139139
{
140140
from: "/guide/onboarding-library",
141-
to: "/wallet/how-to/use-onboarding-library",
141+
to: "/wallet/how-to/onboard-users",
142142
},
143143
{
144144
from: "/guide/metamask-extension-provider",
145145
to: "/wallet/how-to/access-provider",
146146
},
147147
{
148148
from: "/guide/mobile-getting-started",
149-
to: "/wallet/how-to/use-mobile",
149+
to: "/wallet/how-to/integrate-with-mobile",
150150
},
151151
{
152152
from: "/guide/site-compatibility-checklist",
153-
to: "/wallet/how-to/use-mobile",
153+
to: "/wallet/how-to/integrate-with-mobile",
154154
},
155155
{
156156
from: "/guide/mobile-best-practices",
157-
to: "/wallet/how-to/use-mobile",
157+
to: "/wallet/how-to/integrate-with-mobile",
158158
},
159159
{
160160
from: "/guide/snaps",
@@ -166,7 +166,7 @@ const config = {
166166
},
167167
{
168168
from: "/guide/snaps-concepts",
169-
to: "/snaps/category/concepts",
169+
to: "/snaps/concepts",
170170
},
171171
{
172172
from: "/guide/snaps-rpc-api",
@@ -186,7 +186,7 @@ const config = {
186186
},
187187
{
188188
from: "/guide/create-dapp",
189-
to: "/wallet/get-started/set-up-dev-environment",
189+
to: "/wallet/how-to/get-started-building/set-up-dev-environment",
190190
},
191191
{
192192
from: "/guide/contributors",
@@ -196,11 +196,107 @@ const config = {
196196
from: "/wallet/tutorials/simple-react-dapp",
197197
to: "/wallet/tutorials/react-dapp-local-state",
198198
},
199+
{
200+
from: "/wallet/category/how-to",
201+
to: "/wallet/how-to",
202+
},
203+
{
204+
from: "/wallet/category/concepts",
205+
to: "/wallet/concepts",
206+
},
207+
{
208+
from: "/wallet/category/tutorials",
209+
to: "/wallet/tutorials",
210+
},
211+
{
212+
from: "/wallet/category/reference",
213+
to: "/wallet/reference",
214+
},
215+
{
216+
from: "/snaps/category/get-started",
217+
to: "/snaps/get-started",
218+
},
219+
{
220+
from: "/snaps/category/how-to",
221+
to: "/snaps/how-to",
222+
},
223+
{
224+
from: "/snaps/category/concepts",
225+
to: "/snaps/concepts",
226+
},
227+
{
228+
from: "/snaps/category/tutorials",
229+
to: "/snaps/tutorials",
230+
},
231+
{
232+
from: "/snaps/category/reference",
233+
to: "/snaps/reference",
234+
},
235+
{
236+
from: "/wallet/category/get-started",
237+
to: "/wallet/how-to/get-started-building",
238+
},
239+
{
240+
from: "/wallet/get-started/set-up-dev-environment",
241+
to: "/wallet/how-to/get-started-building/set-up-dev-environment",
242+
},
243+
{
244+
from: "/wallet/get-started/run-development-network",
245+
to: "/wallet/how-to/get-started-building/run-devnet",
246+
},
247+
{
248+
from: "/wallet/how-to/secure-dapp",
249+
to: "/wallet/how-to/get-started-building/secure-dapp",
250+
},
251+
{
252+
from: "/wallet/get-started/detect-metamask",
253+
to: "/wallet/how-to/connect/detect-metamask",
254+
},
255+
{
256+
from: "/wallet/get-started/detect-network",
257+
to: "/wallet/how-to/connect/detect-network",
258+
},
259+
{
260+
from: "/wallet/get-started/access-accounts",
261+
to: "/wallet/how-to/connect/access-accounts",
262+
},
263+
{
264+
from: "/wallet/how-to/use-siwe",
265+
to: "/wallet/how-to/sign-data/siwe",
266+
},
267+
{
268+
from: "/wallet/how-to/use-mobile",
269+
to: "/wallet/how-to/integrate-with-mobile",
270+
},
271+
{
272+
from: "/wallet/how-to/use-onboarding-library",
273+
to: "/wallet/how-to/onboard-users",
274+
},
275+
{
276+
from: "/wallet/how-to/register-token",
277+
to: "/wallet/how-to/display/tokens",
278+
},
279+
{
280+
from: "/wallet/how-to/register-method-names",
281+
to: "/wallet/how-to/display/method-names",
282+
},
283+
{
284+
from: "/wallet/how-to/set-icon",
285+
to: "/wallet/how-to/display/icon",
286+
},
199287
].reduce((acc, item) => {
200288
acc.push(item);
201289
acc.push({ from: item.from + ".html", to: item.to });
202290
return acc;
203291
}, []),
292+
createRedirects(existingPath) {
293+
if (existingPath.includes("/connect/set-up-sdk")) {
294+
return [
295+
existingPath.replace("/connect/set-up-sdk", "/use-sdk"),
296+
];
297+
}
298+
return undefined;
299+
},
204300
},
205301
],
206302
],
@@ -226,6 +322,11 @@ const config = {
226322
},
227323
],
228324
},
325+
docs: {
326+
sidebar: {
327+
autoCollapseCategories: true,
328+
},
329+
},
229330
footer: {
230331
logo: {
231332
alt: "MetaMask logo",
@@ -242,21 +343,21 @@ const config = {
242343
label: "Introduction",
243344
to: "/wallet",
244345
},
245-
{
246-
label: "Get started",
247-
to: "/wallet/category/get-started",
248-
},
249346
{
250347
label: "How to guides",
251348
to: "/wallet/category/how-to",
252349
},
350+
{
351+
label: "Concepts",
352+
to: "/wallet/concepts",
353+
},
253354
{
254355
label: "Tutorials",
255-
to: "/wallet/category/tutorials",
356+
to: "/wallet/tutorials",
256357
},
257358
{
258359
label: "Reference",
259-
to: "/wallet/category/reference",
360+
to: "/wallet/reference",
260361
},
261362
],
262363
},
@@ -269,19 +370,19 @@ const config = {
269370
},
270371
{
271372
label: "Get started",
272-
to: "/snaps/category/get-started",
373+
to: "/snaps/get-started",
273374
},
274375
{
275376
label: "How to guides",
276-
to: "/snaps/category/how-to",
377+
to: "/snaps/how-to",
277378
},
278379
{
279380
label: "Tutorials",
280-
to: "/snaps/category/tutorials",
381+
to: "/snaps/tutorials",
281382
},
282383
{
283384
label: "Reference",
284-
to: "/snaps/category/reference",
385+
to: "/snaps/reference",
285386
},
286387
],
287388
},

‎snaps-sidebar.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,32 +20,32 @@ const sidebar = {
2020
{
2121
type: "category",
2222
label: "Get started",
23-
link: { type: "generated-index" },
23+
link: { type: "generated-index", slug: "/get-started" },
2424
collapsed: false,
2525
items: [{ type: "autogenerated", dirName: "get-started" }],
2626
},
2727
{
2828
type: "category",
2929
label: "How to",
30-
link: { type: "generated-index" },
30+
link: { type: "generated-index", slug: "/how-to" },
3131
items: [{ type: "autogenerated", dirName: "how-to" }],
3232
},
3333
{
3434
type: "category",
3535
label: "Concepts",
36-
link: { type: "generated-index" },
36+
link: { type: "generated-index", slug: "/concepts" },
3737
items: [{ type: "autogenerated", dirName: "concepts" }],
3838
},
3939
{
4040
type: "category",
4141
label: "Tutorials",
42-
link: { type: "generated-index" },
42+
link: { type: "generated-index", slug: "/tutorials" },
4343
items: [{ type: "autogenerated", dirName: "tutorials" }],
4444
},
4545
{
4646
type: "category",
4747
label: "Reference",
48-
link: { type: "generated-index" },
48+
link: { type: "generated-index", slug: "/reference" },
4949
items: [{ type: "autogenerated", dirName: "reference" }],
5050
},
5151
],

‎src/components/SnapsSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import Card, { type CardItem } from "@site/src/components/Card";
33

44
const CardList: CardItem[] = [
55
{
6-
title: "🏁 Snaps quickstart",
6+
title: "🏁 Get started with Snaps",
77
link: "/snaps/get-started/quickstart",
88
description: (<>
99
Get started quickly by creating and customizing a simple snap, using the Snaps template built
1010
with React and TypeScript.
1111
</>),
1212
},
1313
{
14-
title: "⚙️⛽ Snaps tutorials",
15-
link: "/snaps/category/tutorials",
14+
title: "⚙️ Snaps tutorials",
15+
link: "/snaps/tutorials",
1616
description: (<>
1717
Follow the step-by-step tutorials to create snaps that estimate gas fees and provide
1818
transaction insights with custom UI.

‎src/components/WalletSection.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ import Card, { type CardItem } from "@site/src/components/Card";
33

44
const CardList: CardItem[] = [
55
{
6-
title: "👨‍💻 Create a simple React dapp",
7-
link: "/wallet/tutorials/react-dapp-local-state",
6+
title: "🏁 Get started building a dapp",
7+
link: "/wallet/how-to/get-started-building",
88
description: (<>
9-
Get started quickly by creating a simple dapp, using Vite with React and TypeScript, to integrate with MetaMask.
9+
If you&apos;re new to dapp development, get started building a new dapp from scratch to integrate with MetaMask.
1010
</>),
1111
},
1212
{
13-
title: "💻📱 MetaMask SDK",
14-
link: "/wallet/how-to/use-sdk",
13+
title: "↔️ Connect your dapp to MetaMask",
14+
link: "/wallet/how-to/connect",
1515
description: (<>
16-
Enable your users to easily connect to a MetaMask wallet client from any platform using MetaMask SDK.
16+
Connect your dapp to MetaMask by setting up MetaMask SDK and accessing users&apos; Ethereum accounts.
1717
</>),
1818
},
1919
{
20-
title: "🌐 MetaMask APIs",
21-
link: "/wallet/reference/rpc-api",
20+
title: "🛠️ Use advanced MetaMask features",
21+
link: "/wallet/how-to",
2222
description: (<>
23-
Interact with the MetaMask wallet using the MetaMask Ethereum provider API and the MetaMask JSON-RPC API.
23+
Optimize your dapp for MetaMask by using MetaMask-specific API methods, such as signing typed data.
2424
</>),
2525
},
2626
];
@@ -30,9 +30,9 @@ export default function WalletSection(): JSX.Element {
3030
<section className="container margin-top--md">
3131
<h1>Integrate your dapp with the MetaMask wallet</h1>
3232
<p>
33-
Your dapp can use the MetaMask APIs to request users&apos; Ethereum accounts, read data from
33+
Your dapp can use MetaMask SDK and the MetaMask APIs to request users&apos; Ethereum accounts, read data from
3434
connected blockchains, suggest that the user sign messages and transactions,
35-
and perform other advanced functions.
35+
and perform other functions on MetaMask from multiple dapp platforms.
3636
</p>
3737
<div className="row">
3838
{CardList.map((props, idx) => (<Card key={idx} {...props} />))}

‎src/css/custom.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,13 @@ h4 {
9494
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
9595
grid-auto-rows: auto;
9696
grid-gap: 2rem;
97-
padding: 1rem 2rem 3rem;
97+
padding: 1rem 0rem 3rem;
98+
}
99+
100+
.card {
101+
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
102+
border: 1px solid var(--ifm-color-emphasis-200);
103+
padding: 10px;
98104
}
99105

100106
img {

0 commit comments

Comments
 (0)