add Diffie-Hellman

src/App.js

@@ -157,6 +157,7 @@ function WalletSuggestionDialog({ open, onClose, onIgnore }) {
             >
               <div>
                 <img
+                  alt=""
                   style={{ height: '39px' }}
                   src="https://raw.githubusercontent.com/solana-labs/wallet-adapter/master/packages/wallets/icons/phantom.svg"
                 />
@@ -187,6 +188,7 @@ function WalletSuggestionDialog({ open, onClose, onIgnore }) {
             >
               <div>
                 <img
+                  alt=""
                   style={{ height: '39px' }}
                   src="https://raw.githubusercontent.com/solana-labs/wallet-adapter/master/packages/wallets/icons/solflare.svg"
                 />

src/components/NavigationFrame.js

@@ -4,7 +4,12 @@ import AppBar from '@material-ui/core/AppBar';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { useConnectionConfig } from '../utils/connection';
-import {CLUSTERS, clusterForEndpoint, getClusters, addCustomCluster, customClusterExists} from '../utils/clusters';
+import {
+  clusterForEndpoint,
+  getClusters,
+  addCustomCluster,
+  customClusterExists,
+} from '../utils/clusters';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -36,7 +41,7 @@ import { Badge } from '@material-ui/core';
 import { useConnectedWallets } from '../utils/connected-wallets';
 import { usePage } from '../utils/page';
 import { MonetizationOn, OpenInNew } from '@material-ui/icons';
-import AddCustomClusterDialog from "./AddCustomClusterDialog";
+import AddCustomClusterDialog from './AddCustomClusterDialog';
 
 const useStyles = makeStyles((theme) => ({
   content: {
@@ -267,9 +272,10 @@ function NetworkSelector() {
             setCustomNetworkOpen(true);
           }}
         >
-          <ListItemIcon className={classes.menuItemIcon}>
-          </ListItemIcon>
-          {customClusterExists() ? 'Edit Custom Endpoint' : 'Add Custom Endpoint'}
+          <ListItemIcon className={classes.menuItemIcon}></ListItemIcon>
+          {customClusterExists()
+            ? 'Edit Custom Endpoint'
+            : 'Add Custom Endpoint'}
         </MenuItem>
       </Menu>
     </>

src/components/SignFormContent.js

@@ -44,6 +44,9 @@ export default function SignFormContent({
     case 'hex':
       messageTxt = '0x' + toHex(message);
       break;
+    case 'diffieHellman':
+      messageTxt = 'Create Diffie-Hellman keys';
+      break;
     default:
       throw new Error('Unexpected message type: ' + messageDisplay);
   }
@@ -64,6 +67,8 @@ export default function SignFormContent({
             {`Sign data with account ${wallet.publicKey}`}
           </>
         );
+      case 'diffieHellman':
+        return `Create Diffie-Hellman keys`;
       default:
         throw new Error('Unexpected message display type: ' + messageDisplay);
     }

src/pages/PopupPage.js

@@ -26,6 +26,14 @@ import WarningIcon from '@material-ui/icons/Warning';
 import { useLocalStorageState, isExtension } from '../utils/utils';
 import SignTransactionFormContent from '../components/SignTransactionFormContent';
 import SignFormContent from '../components/SignFormContent';
+import { generateDiffieHelllman } from '../utils/diffie-hellman';
+
+const AUTHORIZED_METHODS = [
+  'signTransaction',
+  'signAllTransactions',
+  'sign',
+  'diffieHellman',
+];
 
 function getInitialRequests() {
   if (!isExtension) {
@@ -36,7 +44,7 @@ function getInitialRequests() {
 
   const urlParams = new URLSearchParams(window.location.hash.slice(1));
   const request = JSON.parse(urlParams.get('request'));
-  
+
   if (request.method === 'sign') {
     const dataObj = request.params.data;
     // Deserialize `data` into a Uint8Array
@@ -60,7 +68,8 @@ export default function PopupPage({ opener }) {
     return params.get('origin');
   }, []);
   const selectedWallet = useWallet();
-  const selectedWalletAddress = selectedWallet && selectedWallet.publicKey.toBase58();
+  const selectedWalletAddress =
+    selectedWallet && selectedWallet.publicKey.toBase58();
   const { accounts, setWalletSelector } = useWalletSelector();
   const [wallet, setWallet] = useState(isExtension ? null : selectedWallet);
 
@@ -87,11 +96,10 @@ export default function PopupPage({ opener }) {
     if (!isExtension) {
       setWallet(selectedWallet);
     }
-  // using stronger condition here
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // using stronger condition here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedWalletAddress]);
 
-
   // (Extension only) Fetch connected wallet for site from local storage.
   useEffect(() => {
     if (isExtension) {
@@ -106,16 +114,16 @@ export default function PopupPage({ opener }) {
         }
       });
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [origin]);
 
   // (Extension only) Set wallet once connectedWallet is retrieved.
   useEffect(() => {
     if (isExtension && connectedAccount) {
       setWallet(selectedWallet);
     }
-  // using stronger condition here
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // using stronger condition here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectedAccount, selectedWalletAddress]);
 
   // Send a disconnect event if this window is closed, this component is
@@ -149,11 +157,7 @@ export default function PopupPage({ opener }) {
   useEffect(() => {
     function messageHandler(e) {
       if (e.origin === origin && e.source === window.opener) {
-        if (
-          e.data.method !== 'signTransaction' &&
-          e.data.method !== 'signAllTransactions' &&
-          e.data.method !== 'sign'
-        ) {
+        if (!AUTHORIZED_METHODS.includes(e.data.method)) {
           postMessage({ error: 'Unsupported method', id: e.data.id });
         }
 
@@ -169,9 +173,14 @@ export default function PopupPage({ opener }) {
 
   const { messages, messageDisplay } = useMemo(() => {
     if (!request || request.method === 'connect') {
-      return { messages: [], messageDisplay: 'tx' }
+      return { messages: [], messageDisplay: 'tx' };
     }
     switch (request.method) {
+      case 'diffieHellman':
+        return {
+          messages: [request.params.publicKey],
+          messageDisplay: 'diffieHellman',
+        };
       case 'signTransaction':
         return {
           messages: [bs58.decode(request.params.message)],
@@ -189,7 +198,7 @@ export default function PopupPage({ opener }) {
         return {
           messages: [request.params.data],
           messageDisplay: request.params.display === 'utf8' ? 'utf8' : 'hex',
-        }
+        };
       default:
         throw new Error('Unexpected method: ' + request.method);
     }
@@ -258,16 +267,13 @@ export default function PopupPage({ opener }) {
     return <ApproveConnectionForm origin={origin} onApprove={connect} />;
   }
 
-  assert(
-    (request.method === 'signTransaction' ||
-      request.method === 'signAllTransactions' ||
-      request.method === 'sign') &&
-      wallet,
-  );
+  assert(AUTHORIZED_METHODS.includes(request.method) && wallet);
 
   async function onApprove() {
     popRequest();
     switch (request.method) {
+      case 'diffieHellman':
+        return diffieHellman(messages[0]);
       case 'signTransaction':
       case 'sign':
         sendSignature(messages[0]);
@@ -312,6 +318,17 @@ export default function PopupPage({ opener }) {
     });
   }
 
+  function diffieHellman(publicKey) {
+    const keys = generateDiffieHelllman(
+      publicKey,
+      wallet.provider.account.secretKey,
+    );
+    postMessage({
+      result: keys,
+      id: request.id,
+    });
+  }
+
   function sendReject() {
     popRequest();
     postMessage({