Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@metamask/sdk-react
Advanced tools
The MetaMask SDK React allows developer an easier integration to the MetaMask SDK on React-based apps.
Install the SDK:
yarn add @metamask/sdk-react
Wrap your application in the provider
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { MetaMaskProvider } from '@metamask/sdk-react';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<MetaMaskProvider debug={false} sdkOptions={{
logging:{
developerMode: false,
},
communicationServerUrl: process.env.REACT_APP_COMM_SERVER_URL,
checkInstallationImmediately: false, // This will automatically connect to MetaMask on page load
dappMetadata: {
name: "Demo React App",
url: window.location.host,
}
}}>
<App />
</MetaMaskProvider>
</React.StrictMode>
);
Use the SDK in your components:
import { useSDK } from '@metamask/sdk-react';
import React, { useState } from 'react';
export const App = () => {
const [account, setAccount] = useState<string>();
const { sdk, connected, connecting, provider, chainId } = useSDK();
const connect = async () => {
try {
const accounts = await sdk?.connect();
setAccount(accounts?.[0]);
} catch(err) {
console.warn(`failed to connect..`, err);
}
};
return (
<div className="App">
<button style={{ padding: 10, margin: 10 }} onClick={connect}>
Connect
</button>
{connected && (
<div>
<>
{chainId && `Connected chain: ${chainId}`}
<p></p>
{account && `Connected account: ${account}`}
</>
</div>
)}
</div>
);
};
Look for more examples at https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples
Contact the MetaMask SDK team for a complimentary design optimization workshop here
FAQs
A react component and react hooks to connect and use MetaMask
The npm package @metamask/sdk-react receives a total of 3,555 weekly downloads. As such, @metamask/sdk-react popularity was classified as popular.
We found that @metamask/sdk-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.