From f0001dca06442b482a540c9e240af4dfcb2563b6 Mon Sep 17 00:00:00 2001 From: TrofimovAnton85 <98453427+TrofimovAnton85@users.noreply.github.com> Date: Tue, 9 Jul 2024 09:47:00 +0200 Subject: [PATCH 1/6] feat(reference): act-1447 - added capture events to reference pages (#1394) --- src/components/CodeTerminal/CodeTerminal.jsx | 10 ---- src/components/ParserOpenRPC/index.tsx | 32 ++++++++++++- src/lib/segmentAnalytics.js | 50 ++++++++++++++------ 3 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/components/CodeTerminal/CodeTerminal.jsx b/src/components/CodeTerminal/CodeTerminal.jsx index 875af4e667e..bf3efe77205 100644 --- a/src/components/CodeTerminal/CodeTerminal.jsx +++ b/src/components/CodeTerminal/CodeTerminal.jsx @@ -4,11 +4,7 @@ import TerminalViewBox from "./TerminalViewBox"; import ControlPanel from "./ControlPanel"; import { INFO_MSG } from "./AlertMsg"; import MessageBox from "@site/src/components/MessageBox/MessageBox"; -import Select from 'react-dropdown-select'; import { INIT_REQ_SET } from "@site/src/lib/constants"; -import { - trackClickForSegmentAnalytics -} from "@site/src/lib/segmentAnalytics"; import Heading from '@theme/Heading' const CodeTerminal = () => { @@ -96,12 +92,6 @@ const CodeTerminal = () => { method: "GET" }; } - trackClickForSegmentAnalytics({ - type: "Submit Button", - clickText: "Send Request", - location: "https://docs.infura.io/", - userId: user.id, - }); try { const res = await fetch(URL, params); if (res.ok) { diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx index 7bcdad5729b..7cd7d9f61a8 100644 --- a/src/components/ParserOpenRPC/index.tsx +++ b/src/components/ParserOpenRPC/index.tsx @@ -11,6 +11,12 @@ import global from "./global.module.css"; import modalDrawerStyles from "./ModalDrawer/styles.module.css"; import clsx from "clsx"; import { useColorMode } from "@docusaurus/theme-common"; +import { + trackPageViewForSegment, + trackClickForSegment, + trackInputChangeForSegment +} from "@site/src/lib/segmentAnalytics"; +import { useLocation } from "@docusaurus/router"; interface ParserProps { network: NETWORK_NAMES; @@ -36,7 +42,14 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { const [drawerLabel, setDrawerLabel] = useState(null); const [isComplexTypeView, setIsComplexTypeView] = useState(false); const { colorMode } = useColorMode(); - const openModal = () => setModalOpen(true); + const openModal = () => { + setModalOpen(true); + trackClickForSegment({ + eventName: "Customize Request", + clickType: "Customize Request", + userExperience: "new" + }) + }; const closeModal = () => setModalOpen(false); const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] }; @@ -75,9 +88,16 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { if (currentMethodData === null) return null; + const location = useLocation(); + useEffect(() => { const installed = !!(window as any)?.ethereum; setMetamaskInstalled(installed); + trackPageViewForSegment({ + name: "Reference page", + path: location.pathname, + userExperience: "new" + }) }, []); const onParamsChangeHandle = (data) => { @@ -85,6 +105,10 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { setParamsData([]); } setParamsData(Object.values(data)); + trackInputChangeForSegment({ + eventName: "Request Configuration Started", + userExperience: "new" + }) } const onSubmitRequestHandle = async () => { @@ -94,6 +118,12 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { params: paramsData }) setReqResult(response); + trackClickForSegment({ + eventName: "Request Sent", + clickType: "Request Sent", + userExperience: "new", + ...(response?.code && { responseStatus: response.code }) + }) } catch (e) { setReqResult(e); } diff --git a/src/lib/segmentAnalytics.js b/src/lib/segmentAnalytics.js index 798c5f85907..fc47a9323e9 100644 --- a/src/lib/segmentAnalytics.js +++ b/src/lib/segmentAnalytics.js @@ -1,25 +1,45 @@ -export const trackClickForSegmentAnalytics = ({ - type, - clickUrl, - clickText, - location, - userId, +export const trackPageViewForSegment = ({ + name, + path, + userExperience }) => { if (window.analytics) { - window.analytics.track(`CTA ${type} Clicked`, { - ...(clickUrl && { click_url: clickUrl }), - ...(clickText && { click_text: clickText }), - ...(location && { location }), - ...(userId && { user_id: userId }), + window.analytics.page("Page viewed", name, { + ...(path && { path: path }), + ...(userExperience && { user_experience: userExperience }) }); } }; -export const trackPageForSegmentAnalytics = ({ name, path, userId }) => { +export const trackClickForSegment = ({ + eventName, + clickType, + userExperience, + responseStatus, + responseMsg, + timestamp, +}) => { if (window.analytics) { - window.analytics.page("Page view", name, { - ...(path && { path: path }), - ...(userId && { userId: userId }), + window.analytics.track(`CTA ${clickType} Clicked`, { + ...(eventName && { event_name: eventName }), + ...(userExperience && { user_experience: userExperience }), + ...(responseStatus && { response_status: responseStatus }), + ...(responseMsg && { response_msg: responseMsg }), + ...(timestamp && { timestamp: timestamp }), }); } }; + +export const trackInputChangeForSegment = ({ + eventName, + userExperience, + timestamp, +}) => { + if (window.analytics) { + window.analytics.track(`Input changed`, { + ...(eventName && { event_name: eventName }), + ...(userExperience && { user_experience: userExperience }), + ...(timestamp && { timestamp: timestamp }), + }); + } +}; \ No newline at end of file From 2e3163ce1246c5fe09fea571fa93644ab095bfd2 Mon Sep 17 00:00:00 2001 From: Denys Nikanov <91739319+aednikanov@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:23:44 +0300 Subject: [PATCH 2/6] added fixes and improvements (#1395) --- .../InteractiveBox/fields/ConditionalField.tsx | 6 +++--- .../ParserOpenRPC/InteractiveBox/styles.module.css | 7 +++++++ .../InteractiveBox/templates/ArrayFieldTemplate.tsx | 12 ++++++++++-- .../InteractiveBox/widgets/DropdownWidget.tsx | 4 ++-- .../InteractiveBox/widgets/SelectWidget.tsx | 4 ++-- .../ParserOpenRPC/ModalDrawer/styles.module.css | 3 +-- src/css/custom.css | 6 ++++++ 7 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx index 70aa82fce1c..b008d7c4151 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx @@ -63,8 +63,8 @@ export const ConditionalField = (props: FieldTemplateProps) => {
{formData === undefined ? "" : String(formData)} - - { setIsOpened(!isOpened); }}> + { setIsOpened(!isOpened); }}> + {schema?.anyOf ? "anyOf" : "oneOf"} @@ -77,7 +77,7 @@ export const ConditionalField = (props: FieldTemplateProps) => { onClick={onDropdownOptionClick} data-value={listItem.title} > - {`${listItem.title}: ${listItem?.enum ? "enum" : listItem.type}`} + {listItem.title} ))} diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css index 5627e664e24..0d3820def48 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css +++ b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css @@ -61,6 +61,13 @@ line-height: 24px; font-size: 14px; } +.tableColumnTypeDropdown { + width: 100%; + justify-content: flex-end; +} +.tableColumnTypeDropdown:hover { + cursor: pointer; +} .tableLabelIconError { width: 11px; height: 11px; diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx index b0e18bf64b7..018e7928bf2 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx @@ -6,7 +6,7 @@ import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.mod import clsx from "clsx"; import { ParserOpenRPCContext } from "@site/src/components/ParserOpenRPC"; -export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData, formContext }: ArrayFieldTemplateProps) => { +export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData }: ArrayFieldTemplateProps) => { const [isComplexArrayEditView, setIsComplexArrayEditView] = useState(false); const { setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView } = useContext(ParserOpenRPCContext); const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true }); @@ -19,6 +19,12 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f setIsComplexArrayEditView(true); setIsComplexTypeView(true); } + const addSimpleArray = () => { + toggleCollapsed(); + if(collapsed && formData?.length === 0) { + onAddClick(); + } + } return (
@@ -31,7 +37,9 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
{JSON.stringify(formData, null, " ")}
- + {schema.type}
{value === undefined ? "" : String(value)} - - { setIsOpened(!isOpened); }}> + { setIsOpened(!isOpened); }}> + {schema.type} diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx index 029e6b3e912..7ce49d2f520 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx @@ -15,8 +15,8 @@ export const SelectWidget = ({ value, onChange, schema, options, label }: Widget
{emptyValue ? "" : String(value)} - - { setIsOpened(!isOpened); }}> + { setIsOpened(!isOpened); }}> + {schema?.enum ? 'enum' : schema?.type} diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css index 4fcd5412374..6453f9c8355 100644 --- a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css +++ b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css @@ -12,7 +12,6 @@ transition-property: 'transform', 'opacity'; transition-duration: .4s; transition-timing-function: ease; - box-shadow: 0 2px 40px 0 rgba(0, 0, 0, .1); overflow: hidden; background-color: #292A36; } @@ -97,7 +96,7 @@ overflow-y: hidden; } -@media (width <= 996px) { +@media (width <= 1200px) { .modalContainer { position: fixed; left: 0; diff --git a/src/css/custom.css b/src/css/custom.css index 7307122adda..ff726cc9b93 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -328,3 +328,9 @@ button:hover { [data-theme="dark"] .tippy-popper[x-placement^=top] [x-arrow] { border-top-color: rgba(255, 255, 255, 1); } + +@media (max-width: 1200px) { + .navbar__item { + font-size: 14px; + } +} From f624894cb9a5172dede3bb443ecab590616251ad Mon Sep 17 00:00:00 2001 From: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> Date: Tue, 9 Jul 2024 16:35:58 -0700 Subject: [PATCH 3/6] Update homepage (#1397) --- developer-tools/dashboard/index.md | 2 +- docusaurus.config.js | 23 ++++++++++------ snaps/index.mdx | 4 +++ src/components/Card.tsx | 2 +- src/components/CardSection.tsx | 43 +++++++++++++++++++++++++++++ src/components/SnapsSection.tsx | 44 ------------------------------ src/components/WalletSection.tsx | 42 ---------------------------- src/pages/index.tsx | 6 ++-- wallet/index.mdx | 4 +++ 9 files changed, 69 insertions(+), 101 deletions(-) create mode 100644 src/components/CardSection.tsx delete mode 100644 src/components/SnapsSection.tsx delete mode 100644 src/components/WalletSection.tsx diff --git a/developer-tools/dashboard/index.md b/developer-tools/dashboard/index.md index 19fe7fd7c75..9b407b34e3c 100644 --- a/developer-tools/dashboard/index.md +++ b/developer-tools/dashboard/index.md @@ -9,7 +9,7 @@ import Banner from '@site/src/components/Banner' # Infura dashboard documentation -The Infura dashboard provides users with a comprehensive overview and control of their blockchain infrastructure. It serves +The Infura dashboard provides developers with a comprehensive overview and control of their blockchain infrastructure. It serves as a central hub for managing API keys and access, monitoring usage, and accessing account and billing information. diff --git a/docusaurus.config.js b/docusaurus.config.js index 59e8155a04d..cf683e6c010 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -190,6 +190,11 @@ const config = { label: "What's new?", position: "right", }, + { + href: "https://support.metamask.io/", + label: "User support", + position: "right", + }, /* Language drop down { type: "localeDropdown", @@ -216,17 +221,9 @@ const config = { title: "Documentation", items: [ { - label: "Home", - to: "/", - }, - { - label: "MetaMask wallet", + label: "Wallet", to: "/wallet", }, - { - label: "MetaMask SDK", - to: "/wallet/how-to/use-sdk", - }, { label: "Snaps", to: "/snaps", @@ -235,6 +232,10 @@ const config = { label: "Services", to: "/services", }, + { + label: "Infura dashboard", + to: "/developer-tools/dashboard", + }, ], }, { @@ -273,6 +274,10 @@ const config = { label: "Contribute to the docs", href: "https://github.com/MetaMask/metamask-docs/blob/main/CONTRIBUTING.md", }, + { + label: "MetaMask user support", + href: "https://support.metamask.io/", + }, ], }, { diff --git a/snaps/index.mdx b/snaps/index.mdx index 187b96a6c1b..5f29e53b93c 100644 --- a/snaps/index.mdx +++ b/snaps/index.mdx @@ -176,3 +176,7 @@ MetaMask Snaps team and community on [GitHub discussions](https://github.com/Met and the **mm-snaps-dev** channel on [Consensys Discord](https://discord.gg/consensys). See the full list of [Snaps resources](learn/resources.md) for more information. + +:::info MetaMask user support +If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/). +::: diff --git a/src/components/Card.tsx b/src/components/Card.tsx index ea6fbda0192..2758499236e 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -11,7 +11,7 @@ export type CardItem = { export default function Card({ title, link, description }: CardItem) { return ( -
+

{title}

{description}
diff --git a/src/components/CardSection.tsx b/src/components/CardSection.tsx new file mode 100644 index 00000000000..e22b4972ae6 --- /dev/null +++ b/src/components/CardSection.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import Card, { type CardItem } from "@site/src/components/Card"; + +const CardList: CardItem[] = [ + { + title: "Wallet", + link: "/wallet", + description: (<> + Integrate your dapp with MetaMask using the Wallet API. You can interact with your users' Ethereum accounts from multiple dapp platforms. + ), + }, + { + title: "Snaps", + link: "/snaps", + description: (<> + Extend the functionality of MetaMask using Snaps. You can create a Snap to add support for custom networks, account types, APIs, and more. + ), + }, + { + title: "Services", + link: "/services", + description: (<> + Power your dapp or Snap using services provided by MetaMask and Infura. This includes APIs aimed at optimizing essential development tasks. + ), + }, + { + title: "Infura dashboard", + link: "/developer-tools/dashboard", + description: (<> + Use the Infura dashboard as a central hub for managing your Infura API keys, monitoring usage, and accessing account and billing information. + ), + }, +]; + +export default function CardSection(): JSX.Element { + return ( +
+
+ {CardList.map((props, idx) => ())} +
+
+ ); +} diff --git a/src/components/SnapsSection.tsx b/src/components/SnapsSection.tsx deleted file mode 100644 index 003accc89dd..00000000000 --- a/src/components/SnapsSection.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import Card, { type CardItem } from "@site/src/components/Card"; - -const CardList: CardItem[] = [ - { - title: "🏁 Snaps quickstart", - link: "/snaps/get-started/quickstart", - description: (<> - Get started quickly by creating and customizing a simple Snap, using the Snaps template built - with React and TypeScript. - ), - }, - { - title: "⚙️ Snaps tutorials", - link: "/snaps/learn/tutorials", - description: (<> - Follow the step-by-step tutorials to create Snaps that estimate gas fees, provide - transaction insights with custom UI, and more. - ), - }, - { - title: "🌐 Snaps API", - link: "/snaps/reference/snaps-api", - description: (<> - Use the Snaps API to modify the functionality of MetaMask and communicate between dapps and Snaps. - ), - }, -]; - -export default function SnapsSection(): JSX.Element { - return ( -
-

Extend the functionality of MetaMask using Snaps

-

- A Snap is a JavaScript program run in an isolated environment that customizes the MetaMask - wallet experience. You can create a Snap that adds new API methods, adds support for - different blockchain protocols, or modifies existing functionalities. -

-
- {CardList.map((props, idx) => ())} -
-
- ); -} diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx deleted file mode 100644 index ea9413c4dec..00000000000 --- a/src/components/WalletSection.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import Card, { type CardItem } from "@site/src/components/Card"; - -const CardList: CardItem[] = [ - { - title: "🏁 Wallet quickstart", - link: "/wallet/how-to/connect", - description: (<> - Get started quickly by connecting your React dapp to MetaMask and other wallets in your users' browsers. - ), - }, - { - title: "⚙️ Wallet tutorials", - link: "/wallet/tutorials", - description: (<> - Follow the step-by-step tutorials to create a simple React dapp and integrate it with MetaMask. - ), - }, - { - title: "🌐 Wallet API", - link: "/wallet/reference/json-rpc-api", - description: (<> - Use the JSON-RPC methods of MetaMask's Wallet API to interact with your users' Ethereum accounts. - ), - }, -]; - -export default function WalletSection(): JSX.Element { - return ( -
-

Integrate your dapp with the MetaMask wallet

-

- Your dapp can use the Wallet API to request users' Ethereum accounts, read data from - connected blockchains, suggest that the user sign messages and transactions, - and perform other functions on MetaMask from multiple dapp platforms. -

-
- {CardList.map((props, idx) => ())} -
-
- ); -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fb66a4c5bee..cec632cbd8b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,8 +3,7 @@ import clsx from "clsx"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import WalletSection from "@site/src/components/WalletSection"; -import SnapsSection from "@site/src/components/SnapsSection"; +import CardSection from "@site/src/components/CardSection"; import styles from "./index.module.css"; function HomepageHeader() { @@ -51,8 +50,7 @@ export default function Home(): JSX.Element { title={"Home"}>
- - +
diff --git a/wallet/index.mdx b/wallet/index.mdx index 57a53f8d0bd..07cf3ac6d16 100644 --- a/wallet/index.mdx +++ b/wallet/index.mdx @@ -72,3 +72,7 @@ If you're new to integrating dapps with MetaMask, check out the following topics If you have questions about integrating your dapp with MetaMask, you can interact with the MetaMask team and community on the MetaMask channels on [Consensys Discord](https://discord.gg/consensys). + +:::info MetaMask user support +If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/). +::: From c3a9e47a33deb484e9d8051a0cde07610f81ffa1 Mon Sep 17 00:00:00 2001 From: TrofimovAnton85 <98453427+TrofimovAnton85@users.noreply.github.com> Date: Wed, 10 Jul 2024 10:18:25 +0200 Subject: [PATCH 4/6] feat(reference): act-1327 - added support eip-6963 (#1389) * feat(reference): act-1327 - added support eip-6963 * feat(reference): remove selecte wallets --- .../ParserOpenRPC/AuthBox/index.tsx | 36 ++++++++++++-- .../ParserOpenRPC/AuthBox/styles.module.css | 34 +++++++++++++ src/components/ParserOpenRPC/index.tsx | 31 +++++++++--- src/hooks/store.ts | 49 +++++++++++++++++++ src/hooks/useSyncProviders.ts | 4 ++ wallet/reference/new-reference.mdx | 2 +- 6 files changed, 144 insertions(+), 12 deletions(-) create mode 100644 src/hooks/store.ts create mode 100644 src/hooks/useSyncProviders.ts diff --git a/src/components/ParserOpenRPC/AuthBox/index.tsx b/src/components/ParserOpenRPC/AuthBox/index.tsx index 37ed0492e3b..fd0eebde152 100644 --- a/src/components/ParserOpenRPC/AuthBox/index.tsx +++ b/src/components/ParserOpenRPC/AuthBox/index.tsx @@ -2,9 +2,12 @@ import React from "react"; import Link from "@docusaurus/Link"; import styles from "./styles.module.css"; import global from "../global.module.css"; +import { EIP6963ProviderDetail } from "@site/src/hooks/store.ts" interface AuthBoxProps { - isMetamaskInstalled: boolean; + metamaskProviders: any; + handleConnect: (i) => void; + selectedProvider?: number; } const MetamaskInstallMessage = () => ( @@ -15,10 +18,33 @@ const MetamaskInstallMessage = () => (
); -export const AuthBox = ({ isMetamaskInstalled }: AuthBoxProps) => { +export const AuthBox = ({ metamaskProviders = [], selectedProvider, handleConnect }: AuthBoxProps) => { + if (metamaskProviders.length === 0) { + return + } + + if (metamaskProviders.length > 0) { + return null + } + return ( - <> - {!isMetamaskInstalled ? : null} - +
+

Select a MetaMask provider to use interactive features:

+
+ {metamaskProviders.map((provider: EIP6963ProviderDetail, i) => ( +
+ +
+ ))} +
+
); }; diff --git a/src/components/ParserOpenRPC/AuthBox/styles.module.css b/src/components/ParserOpenRPC/AuthBox/styles.module.css index c8562f6d322..d7d2a8e8eff 100644 --- a/src/components/ParserOpenRPC/AuthBox/styles.module.css +++ b/src/components/ParserOpenRPC/AuthBox/styles.module.css @@ -17,3 +17,37 @@ font-size: 14px; line-height: 22px; } + +.mmBtnRow { + display: flex; + flex-wrap: wrap; +} + +.mmBtnCol { + width: 100%; + margin-bottom: 10px; +} + +.mmBtn { + position: relative; + display: flex; + align-items: center; + padding: 16px 30px 16px 20px; + width: 100%; + background: none; + border-radius: 10px; + outline: none; + font-size: 16px; + font-weight: 500; + line-height: 22px; + border: 1px solid rgba(3, 118, 201, 1); + color: rgba(3, 118, 201, 1); +} + +.mmBtnCheck { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 15px; + font-size: 16px; +} diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx index 7cd7d9f61a8..20bf5c87c40 100644 --- a/src/components/ParserOpenRPC/index.tsx +++ b/src/components/ParserOpenRPC/index.tsx @@ -17,6 +17,7 @@ import { trackInputChangeForSegment } from "@site/src/lib/segmentAnalytics"; import { useLocation } from "@docusaurus/router"; +import { useSyncProviders } from "@site/src/hooks/useSyncProviders.ts" interface ParserProps { network: NETWORK_NAMES; @@ -34,7 +35,6 @@ export const ParserOpenRPCContext = createContext { + setSelectedWallet(i); + } + useEffect(() => { - const installed = !!(window as any)?.ethereum; - setMetamaskInstalled(installed); trackPageViewForSegment({ name: "Reference page", path: location.pathname, @@ -100,6 +105,15 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { }) }, []); + const metamaskProviders = useMemo(() => { + const isMetamasks = providers.filter(pr => pr?.info?.name?.includes("MetaMask")); + if (isMetamasks.length > 1) { + const indexWallet = isMetamasks.findIndex(item => item.info.name === "MetaMask"); + setSelectedWallet(indexWallet); + } + return isMetamasks; + }, [providers]); + const onParamsChangeHandle = (data) => { if (typeof data !== 'object' || data === null || Object.keys(data).length === 0) { setParamsData([]); @@ -112,8 +126,9 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { } const onSubmitRequestHandle = async () => { + if (metamaskProviders.length === 0) return try { - const response = await (window as any).ethereum.request({ + const response = await metamaskProviders[selectedWallet].provider.request({ method: method, params: paramsData }) @@ -188,9 +203,13 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
- + 0} method={method} params={currentMethodData.params} paramsData={paramsData} diff --git a/src/hooks/store.ts b/src/hooks/store.ts new file mode 100644 index 00000000000..2556b9d107b --- /dev/null +++ b/src/hooks/store.ts @@ -0,0 +1,49 @@ +declare global{ + interface WindowEventMap { + "eip6963:announceProvider": CustomEvent + } +} + +export interface EIP6963ProviderInfo { + walletId: string; + uuid: string; + name: string; + icon: string; +} + +export interface EIP1193Provider { + isStatus?: boolean; + host?: string; + path?: string; + sendAsync?: (request: { method: string, params?: Array }, callback: (error: Error | null, response: unknown) => void) => void; + send?: (request: { method: string, params?: Array }, callback: (error: Error | null, response: unknown) => void) => void; + request: (request: { method: string, params?: Array }) => Promise; +} + +export interface EIP6963ProviderDetail { + info: EIP6963ProviderInfo; + provider: EIP1193Provider; +} + +type EIP6963AnnounceProviderEvent = { + detail: { + info: EIP6963ProviderInfo; + provider: EIP1193Provider; + } +} + +let providers: EIP6963ProviderDetail[] = [] +export const store = { + value: ()=> providers, + subscribe: (callback: ()=> void) => { + function onAnnouncement(event: EIP6963AnnounceProviderEvent){ + if(providers.map(p => p.info.uuid).includes(event.detail.info.uuid)) return + providers = [...providers, event.detail] + callback() + } + window.addEventListener("eip6963:announceProvider", onAnnouncement); + window.dispatchEvent(new Event("eip6963:requestProvider")); + + return () => window.removeEventListener("eip6963:announceProvider", onAnnouncement) + } +} \ No newline at end of file diff --git a/src/hooks/useSyncProviders.ts b/src/hooks/useSyncProviders.ts new file mode 100644 index 00000000000..b9db3eff98f --- /dev/null +++ b/src/hooks/useSyncProviders.ts @@ -0,0 +1,4 @@ +import { useSyncExternalStore } from "react"; +import { store } from "./store"; + +export const useSyncProviders = ()=> useSyncExternalStore(store.subscribe, store.value, store.value) \ No newline at end of file diff --git a/wallet/reference/new-reference.mdx b/wallet/reference/new-reference.mdx index cbbf4f7a0c6..5d209868a06 100644 --- a/wallet/reference/new-reference.mdx +++ b/wallet/reference/new-reference.mdx @@ -8,4 +8,4 @@ sidebar_class_name: "hidden" import ParserOpenRPC from "@site/src/components/ParserOpenRPC"; import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc"; - \ No newline at end of file + \ No newline at end of file From e9c488a0cea248716866675aee55aaab7dacfcfa Mon Sep 17 00:00:00 2001 From: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> Date: Wed, 10 Jul 2024 10:10:21 -0700 Subject: [PATCH 5/6] redirect URLs with trailing slash (#1407) --- vercel.json | 1 + 1 file changed, 1 insertion(+) diff --git a/vercel.json b/vercel.json index 39a85aaaf10..2d6684b8aaf 100644 --- a/vercel.json +++ b/vercel.json @@ -1,5 +1,6 @@ { "cleanUrls": true, + "trailingSlash": false, "redirects": [ { "source": "/guide", From a630c5eaf448c88f7ef7fa7c34bbec21c6c0eb66 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 10 Jul 2024 10:27:19 -0700 Subject: [PATCH 6/6] Bump fast-loops from 1.1.3 to 1.1.4 in the npm_and_yarn group (#1406) Bumps the npm_and_yarn group with 1 update: [fast-loops](https://github.com/robinweser/fast-loops). Updates `fast-loops` from 1.1.3 to 1.1.4 - [Commits](https://github.com/robinweser/fast-loops/commits) --- updated-dependencies: - dependency-name: fast-loops dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 5a2c985e001..cc1da083303 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8658,9 +8658,9 @@ __metadata: linkType: hard "fast-loops@npm:^1.1.3": - version: 1.1.3 - resolution: "fast-loops@npm:1.1.3" - checksum: b674378ba2ed8364ca1a00768636e88b22201c8d010fa62a8588a4cace04f90bac46714c13cf638be82b03438d2fe813600da32291fb47297a1bd7fa6cef0cee + version: 1.1.4 + resolution: "fast-loops@npm:1.1.4" + checksum: 8031a20f465ef35ac4ad98258470250636112d34f7e4efcb4ef21f3ced99df95a1ef1f0d6943df729a1e3e12a9df9319f3019df8cc1a0e0ed5a118bd72e505f9 languageName: node linkType: hard