Skip to content

Commit

Permalink
feat(docs): act-1448 - added sentry plugin (#1408)
Browse files Browse the repository at this point in the history
* feat(docs): act-1448 - added sentry plugin

* feat(docs): act-1448 - fix client key

* feat(docs): act-1448 - changed config settings

* feat(docs): act-1448 - added user id as name for sentry

* feat(docs): act-1448 - added user id

* feat(docs): added mm sdk

* feat(docs): fix for auth

* feat(docs): fix for sentry config

* feat(docs): disabled traces rates

* feat(docs): removed console

* fixed bug with input value for array children

* removed console log

---------

Co-authored-by: aednikanov <[email protected]>
  • Loading branch information
TrofimovAnton85 and aednikanov authored Jul 17, 2024
1 parent 83276d0 commit 5638ccd
Show file tree
Hide file tree
Showing 8 changed files with 1,219 additions and 108 deletions.
16 changes: 16 additions & 0 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,22 @@ const config = {
]
: null,
"./src/plugins/launchdarkly",
[
"docusaurus-plugin-sentry",
{
DSN: "d3220b0812610810ddb5a911b3d97790",
configuration: {
sentry: {
init: {
replaysOnErrorSampleRate: isProd ? 1.0 : 0,
replaysSessionSampleRate: isProd ? 0.25 : 0,
sampleRate: isProd ? 0.25 : 0,
tracesSampleRate: 0,
},
},
},
},
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
Expand Down
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@
"@mdx-js/react": "^3.0.0",
"@metamask/design-tokens": "^1.11.1",
"@metamask/docusaurus-openrpc": "^0.4.1",
"@metamask/sdk-react": "^0.26.5",
"@rjsf/core": "^5.18.4",
"@rjsf/utils": "^5.18.4",
"@rjsf/validator-ajv8": "^5.18.4",
"clsx": "^1.2.1",
"docusaurus-plugin-segment": "^1.0.4",
"docusaurus-plugin-sentry": "^2.0.0",
"dotenv": "^16.4.5",
"launchdarkly-js-client-sdk": "^3.3.0",
"lodash.debounce": "^4.0.8",
Expand Down Expand Up @@ -102,7 +104,8 @@
"@metamask/docusaurus-openrpc>@metamask/open-rpc-docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core>@fortawesome/fontawesome-common-types": false,
"@docusaurus/core>webpack-dev-server>ws>bufferutil": false,
"@docusaurus/core>webpack-dev-server>ws>utf-8-validate": false,
"$root$": false
"$root$": false,
"@metamask/sdk-react>@metamask/sdk>eciesjs>secp256k1": false
}
}
}
54 changes: 6 additions & 48 deletions src/components/ParserOpenRPC/AuthBox/index.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,18 @@
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 {
metamaskProviders: any;
handleConnect: (i) => void;
selectedProvider?: number;
handleConnect: () => void;
}

const MetamaskInstallMessage = () => (
<div className={styles.msgWrapper}>
<strong className={styles.msgHeading}>Install MetaMask</strong>
<p className={styles.msgText}>
Install MetaMask for your browser to enable interactive features
</p>
<Link className={global.primaryBtn} href="https://metamask.io/download/">
Install MetaMask
</Link>
</div>
);

export const AuthBox = ({
metamaskProviders = [],
selectedProvider,
handleConnect,
}: AuthBoxProps) => {
if (metamaskProviders.length === 0) {
return <MetamaskInstallMessage />;
}

if (metamaskProviders.length > 0) {
return null;
}

export const AuthBox = ({ handleConnect }: AuthBoxProps) => {
return (
<div className={styles.msgWrapper}>
<p>Select a MetaMask provider to use interactive features:</p>
<div className={styles.mmBtnRow}>
{metamaskProviders.map((provider: EIP6963ProviderDetail, i) => (
<div key={provider.info.uuid} className={styles.mmBtnCol}>
<button className={styles.mmBtn} onClick={() => handleConnect(i)}>
<img
src={provider.info.icon}
alt={provider.info.name}
width="30"
/>
<div className="padding-left--md">{provider.info.name}</div>
{selectedProvider === i && (
<span className={styles.mmBtnCheck}>&#10003;</span>
)}
</button>
</div>
))}
</div>
<p className={styles.msgText}>Connect MetaMask to test requests using your wallet</p>
<button className={global.primaryBtn} onClick={() => handleConnect()}>
Connect MetaMask
</button>
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,11 @@ export const BaseInputTemplate = ({
};

useEffect(() => {
setInputValue(value);
if (!isArray) {
setInputValue(value);
}
}, [value, isFormReseted]);

useEffect(() => {
setInputValue(value);
}, []);

return (
<div className={isArray ? styles.arrayItemRow : styles.tableRow}>
{!isArray && (
Expand Down
62 changes: 25 additions & 37 deletions src/components/ParserOpenRPC/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { createContext, useMemo, useState } from "react";
import React, { createContext, useMemo, useState, useEffect } from "react";
import { useSDK } from "@metamask/sdk-react";
import { usePluginData } from "@docusaurus/useGlobalData";
import { ResponseItem, NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
import DetailsBox from "@site/src/components/ParserOpenRPC/DetailsBox";
Expand All @@ -11,12 +12,7 @@ import global from "./global.module.css";
import modalDrawerStyles from "./ModalDrawer/styles.module.css";
import clsx from "clsx";
import { useColorMode } from "@docusaurus/theme-common";
import {
trackClickForSegment,
trackInputChangeForSegment,
} from "@site/src/lib/segmentAnalytics";
import { useLocation } from "@docusaurus/router";
import { useSyncProviders } from "@site/src/hooks/useSyncProviders.ts";
import { trackClickForSegment, trackInputChangeForSegment } from "@site/src/lib/segmentAnalytics";

interface ParserProps {
network: NETWORK_NAMES;
Expand Down Expand Up @@ -104,27 +100,25 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {

if (currentMethodData === null) return null;

const location = useLocation();
const { sdk, ready, connected, provider, account } = useSDK();

const [selectedWallet, setSelectedWallet] = useState(0);
const providers = useSyncProviders();
const isConnected = useMemo(() => {
return ready && connected && !!account
}, [ready, connected, account]);

const handleConnect = (i: number) => {
setSelectedWallet(i);
};
useEffect(() => {
if ((window as any)?.Sentry) {
(window as any)?.Sentry?.setUser({ name: account, id: account, username: account })
}
}, [account]);

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);
const connectSDKHandler = async () => {
try {
const accounts = await sdk?.connect();
} catch (err) {
console.warn("failed to connect..", err);
}
return isMetamasks;
}, [providers]);
};

const onParamsChangeHandle = (data) => {
if (
Expand All @@ -142,14 +136,12 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
};

const onSubmitRequestHandle = async () => {
if (metamaskProviders.length === 0) return;
if (!provider || !connected) return
try {
const response = await metamaskProviders[selectedWallet].provider.request(
{
method: method,
params: paramsData,
}
);
const response = await provider?.request({
method: method,
params: paramsData
})
setReqResult(response);
trackClickForSegment({
eventName: "Request Sent",
Expand Down Expand Up @@ -237,13 +229,9 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
</div>
<div className={global.colRight}>
<div className={global.stickyCol}>
<AuthBox
metamaskProviders={metamaskProviders}
selectedProvider={selectedWallet}
handleConnect={handleConnect}
/>
{!isConnected && <AuthBox handleConnect={connectSDKHandler} />}
<RequestBox
isMetamaskInstalled={metamaskProviders.length > 0}
isMetamaskInstalled={connected}
method={method}
params={currentMethodData.params}
paramsData={paramsData}
Expand Down
3 changes: 3 additions & 0 deletions src/theme/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ export default function LayoutWrapper({ children }) {
return (
<BrowserOnly>
{() => {
if (!ldReady) {
return null
}
return (
<>
{newReferenceEnabled && ldReady && referencePageName ? (
Expand Down
29 changes: 29 additions & 0 deletions src/theme/Root.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { ReactChild } from "react";
import { MetaMaskProvider } from '@metamask/sdk-react';
import BrowserOnly from '@docusaurus/BrowserOnly';

export default function Root({ children }: { children: ReactChild}) {
return (
<BrowserOnly fallback={<div>Loading...</div>}>
{
() => {
return (
<MetaMaskProvider debug={false} sdkOptions={{
logging:{
developerMode: false,
},
checkInstallationImmediately: false,
dappMetadata: {
name: "New mm app",
url: "https://docs.metamask.io/",
},
preferDesktop: true
}}>
{children}
</MetaMaskProvider>
)
}
}
</BrowserOnly>
);
}
Loading

0 comments on commit 5638ccd

Please sign in to comment.