getwax · jacque006 · Nov 23, 2021 · Nov 19, 2021 · Nov 21, 2021 · Nov 21, 2021
diff --git a/contracts/shared/lib/hubble-bls b/contracts/shared/lib/hubble-bls
diff --git a/extension/.env.example b/extension/.env.example
@@ -3,5 +3,7 @@ PRIVATE_KEY_STORAGE_KEY=default-private-key
 AGGREGATOR_URL=http://localhost:3000
 CHAIN_RPC_URL=http://localhost:8545
 CREATE_TX_URL=
+PROVIDER_URL=
+ETHERSCAN_KEY=
 
 VERIFICATION_GATEWAY_ADDRESS=0xCbd1D63d0Ca2228484a7772733717e934CD52aC3
diff --git a/extension/source/Background/RequestHandler.ts b/extension/source/Background/RequestHandler.ts
@@ -4,8 +4,6 @@ import App from '../App';
 import addErrorContext from '../common/addErrorContext';
 import RpcMap from '../common/RpcMap';
 import validateOptionalStringRecord from '../common/validateOptionalStringRecord';
-import formatBalance from '../Popup/helpers/formatBalance';
-import formatCompactAddress from '../Popup/helpers/formatCompactAddress';
 import promptUser from './promptUser';
 
 export default function RequestHandler(
@@ -59,16 +57,10 @@ export default function RequestHandler(
           throw new Error('No wallet available');
         }
 
-        let promptText: string;
-        if (tx.data === '0x') {
-          promptText = `ETH Transfer 
-          ${formatBalance(tx.value, 'ETH')} 
-          to ${formatCompactAddress(tx.to)}`;
-        } else {
-          promptText = `Contract Interaction ${formatCompactAddress(tx.to)} 
-          value ${formatBalance(tx.value, 'ETH')} 
-          data  ${tx.data}`;
-        }
+        const promptText = `
+            &to=${tx.to}
+            &data=${tx.data}
+            &value=${tx.value}`;
 
         const promptResult = await promptUser({
           promptText,

diff --git a/extension/source/Background/promptUser.ts b/extension/source/Background/promptUser.ts
@@ -5,7 +5,6 @@ import getPropOrUndefined from '../helpers/getPropOrUndefined';
 
 export default function promptUser(opt: {
   promptText: string;
-  buttons?: string[];
 }): Promise<string | undefined> {
   const cleanupTasks = new TaskQueue();
 
@@ -23,11 +22,7 @@ export default function promptUser(opt: {
       }
 
       const popup = await browser.windows.create({
-        url: browser.runtime.getURL(
-          `confirm.html?promptText=${opt.promptText}&id=${id}&buttons=${(
-            opt.buttons ?? ['Yes', 'No']
-          ).join(',')}`,
-        ),
+        url: browser.runtime.getURL(`confirm.html?${opt.promptText}&id=${id}`),
         type: 'popup',
         width: popupWidth,
         height: 500,

diff --git a/extension/source/Confirm/Confirm.tsx b/extension/source/Confirm/Confirm.tsx
@@ -1,69 +1,65 @@
-import * as React from 'react';
+import { ethers } from 'ethers';
+import React, { useEffect, useState } from 'react';
 import { browser } from 'webextension-polyfill-ts';
 import TaskQueue from '../common/TaskQueue';
+
+// components, styles and UI
 import Button from '../components/Button';
 import CompactQuillHeading from '../components/CompactQuillHeading';
+import { useInputDecode } from '../hooks/useInputDecode';
+import formatCompactAddress from '../Popup/helpers/formatCompactAddress';
 
-type Props = {
-  _?: undefined;
-};
+const Confirm: React.FunctionComponent = () => {
+  const [id, setId] = useState<string>();
+  const [to, setTo] = useState<string>('0x');
+  const [value, setValue] = useState<string>('0');
+  const [data, setData] = useState<string>('0x');
 
-type State = {
-  _?: undefined;
-};
+  const { loading, method } = useInputDecode(data, to);
 
-export default class Popup extends React.Component<Props, State> {
-  cleanupTasks = new TaskQueue();
+  const cleanupTasks = new TaskQueue();
 
-  constructor(props: Props) {
-    super(props);
+  useEffect(() => {
+    const params = new URL(window.location.href).searchParams;
+    setId(params.get('id') || '0');
+    setTo(params.get('to') || '0x');
+    setValue(params.get('value') || '0');
+    setData(params.get('data') || '0x');
 
-    this.state = {};
-  }
+    return cleanupTasks.run();
+  }, []);
 
-  componentWillUnmount(): void {
-    this.cleanupTasks.run();
-  }
+  const respondTx = (result: string) => {
+    browser.runtime.sendMessage(undefined, { id, result });
+  };
 
-  render(): React.ReactNode {
-    const params = new URL(window.location.href).searchParams;
-    const id = params.get('id');
-    const promptText = params.get('promptText') ?? '(promptText not set)';
-    const buttons = parseButtons(params.get('buttons'));
+  return (
+    <div className="confirm">
+      <div className="section">
+        <CompactQuillHeading />
+      </div>
+      <div className="section prompt">
+        {loading ? (
+          'loading...'
+        ) : (
+          <>
+            <div>{method}</div>
+            <div>to: {formatCompactAddress(to)}</div>
+            <div>value: {ethers.utils.formatEther(value)} ETH</div>
+            <div>
+              data:
+              <div className="data">{data}</div>
+            </div>
 
-    return (
-      <div className="confirm">
-        <div className="section">
-          <CompactQuillHeading />
-        </div>
-        <div className="section prompt">
-          <div>{promptText}</div>
-          <div />
-          {buttons.map((btnText, i) => (
-            <Button
-              highlight={i === 0}
-               => {
-                browser.runtime.sendMessage(undefined, { id, result: btnText });
-              }}
-              key={btnText}
-            >
-              {btnText}
+            <Button highlight  => respondTx('Yes')}>
+              Confirm
             </Button>
-          ))}
-        </div>
+            <Button  => respondTx('No')}>Reject</Button>
+          </>
+        )}
       </div>
-    );
-  }
-}
-
-function parseButtons(buttonsStr: string | null): string[] {
-  if (buttonsStr === null) {
-    return ['(buttons not set)'];
-  }
-
-  if (buttonsStr === '') {
-    return [];
-  }
+    </div>
+  );
+};
 
-  return buttonsStr.split(',');
-}
+export default Confirm;
diff --git a/extension/source/Confirm/styles.scss b/extension/source/Confirm/styles.scss
@@ -1,4 +1,4 @@
-@import "../styles/quill";
+@import '../styles/quill';
 
 .quill {
   .prompt {
@@ -7,4 +7,9 @@
     flex-direction: column;
     gap: 12px;
   }
+
+  .data {
+    word-wrap: break-word;
+    opacity: 0.5;
+  }
 }
diff --git a/extension/source/Popup/helpers/formatCompactAddress.ts b/extension/source/Popup/helpers/formatCompactAddress.ts
@@ -1,3 +1,3 @@
 export default function formatCompactAddress(address: string): string {
-  return `0x ${address.slice(2, 6)} ... ${address.slice(-4)}`;
+  return `0x${address.slice(2, 6)}...${address.slice(-4)}`;
 }
diff --git a/extension/source/env.ts b/extension/source/env.ts
@@ -1,6 +1,8 @@
 import { requireEnv, requireIntEnv } from './helpers/envTools';
 
 export const CHAIN_ID = requireIntEnv(process.env.CHAIN_ID);
+export const PROVIDER_URL = requireEnv(process.env.PROVIDER_URL);
+// export const ETHERSCAN_KEY = requireEnv(process.env.ETHERSCAN_KEY);
 
 export const PRIVATE_KEY_STORAGE_KEY = requireEnv(
   process.env.PRIVATE_KEY_STORAGE_KEY,

diff --git a/extension/source/hooks/useInputDecode.tsx b/extension/source/hooks/useInputDecode.tsx
@@ -0,0 +1,82 @@
+import { ethers } from 'ethers';
+import { useEffect, useState } from 'react';
+import { PROVIDER_URL } from '../env';
+import axios from 'axios';
+
+const getParitySigRegistry = () => {
+  const provider = new ethers.providers.JsonRpcProvider(PROVIDER_URL);
+  const address = '0x44691B39d1a75dC4E0A0346CBB15E310e6ED1E86';
+  const abi = [
+    {
+      constant: true,
+      inputs: [{ name: '', type: 'bytes4' }],
+      name: 'entries',
+      outputs: [{ name: '', type: 'string' }],
+      payable: false,
+      type: 'function',
+    },
+  ];
+
+  return new ethers.Contract(address, abi, provider);
+};
+
+const getMethodFromOnChainRegistry = async (data: string) => {
+  if (data === '0x') return 'SENDING ETH';
+
+  const methodID = ethers.utils.hexDataSlice(data, 0, 4);
+  const registry = getParitySigRegistry();
+
+  return registry.entries(methodID);
+};
+
+const getMethodFromEtherscan = async (to: string, data: string) => {
+  const res = await axios.get(
+    `https://api.etherscan.io/api?module=contract&action=getabi&address=${to}`,
+  );
+
+  if (res.data.result !== 'Contract source code not verified') {
+    const iface = new ethers.utils.Interface(res.data.result);
+    return iface.parseTransaction({ data, value: 1 }).name;
+  }
+
+  throw 'Unverified Contract';
+};
+
+const formatMethod = (method: string) => {
+  return method
+    .split('(')[0]
+    .replace(/([a-z](?=[A-Z]))/g, '$1 ')
+    .toUpperCase();
+};
+
+export const useInputDecode = (functionData: string, to: string) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [method, setMethod] = useState<string>('CONTRACT INTERACTION');
+
+  useEffect(() => {
+    const getMethod = async () => {
+      setLoading(true);
+
+      const data = functionData?.replace(/\s+/g, '');
+
+      try {
+        const registryPromise = getMethodFromOnChainRegistry(data);
+        const etherScanPromise = getMethodFromEtherscan(to, data);
+        const method = (await registryPromise) ?? (await etherScanPromise);
+        if (method) {
+          setMethod(formatMethod(method));
+        }
+      } catch (error) {
+        console.log({ error });
+      }
+
+      setLoading(false);
+    };
+
+    if (functionData) {
+      getMethod();
+    }
+  }, [functionData]);
+
+  return { loading, method };
+};