Merge pull request #490 from Psychedelic/fix/account-connect-home

Fix: 0.5.2 fixes + Jelly Activity integration

package.json

@@ -38,8 +38,8 @@
     "@material-ui/icons": "^4.11.2",
     "@metamask/post-message-stream": "^4.0.0",
     "@psychedelic/dab-js": "1.3.6",
-    "@psychedelic/plug-controller": "0.17.0",
-    "@psychedelic/plug-inpage-provider": "2.1.1",
+    "@psychedelic/plug-controller": "0.17.2",
+    "@psychedelic/plug-inpage-provider": "2.1.2",
     "@reduxjs/toolkit": "^1.6.0",
     "advanced-css-reset": "^1.2.2",
     "axios": "^0.21.1",

source/Popup/Views/Home/index.jsx

@@ -19,7 +19,7 @@ import { setUseICNS } from '@redux/icns';
 import { isClockInSync } from '@shared/utils/time';
 import { getApp, getUseICNS, getWalletsConnectedToUrl } from '@modules/storageManager';
 import { getTabURL } from '@shared/utils/chrome-tabs';
-import extensionizer from 'extensionizer';
+import extension from 'extensionizer';
 
 const Home = () => {
   const { t } = useTranslation();
@@ -33,6 +33,7 @@ const Home = () => {
   const [wallets, setWallets] = useState([]);
   const [isConnectAccountsOpen, setConnectAccountsOpen] = useState(false);
   const [connectedWallets, setConnectedWallets] = useState([]);
+
   const [app, setApp] = useState(null);
   const [tab, setTab] = useState(null);
 
@@ -65,7 +66,7 @@ const Home = () => {
   ], [assetsLoading, collectionsLoading, transactionsLoading]);
 
   const validateProviderConnection = (state) => {
-    extensionizer.tabs.query({ active: true, lastFocusedWindow: true }, (browserTabs) => {
+    extension.tabs.query({ active: true, lastFocusedWindow: true }, (browserTabs) => {
       const currentTab = browserTabs?.[0];
       const url = getTabURL(currentTab);
       const ids = state.wallets.map((_, idx) => idx);
@@ -85,6 +86,15 @@ const Home = () => {
     });
   };
 
+  const updateProviderConnection = async () => {
+    const currentWallet = wallets?.[walletNumber] || null;
+    if (currentWallet) {
+      extension.tabs.query({ active: true }, (activeTabs) => {
+        extension.tabs.sendMessage(activeTabs[0].id, { action: 'updateConnection' });
+      });
+    }
+  };
+
   useEffect(() => {
     sendMessage({ type: HANDLER_TYPES.GET_STATE, params: {} }, (state) => {
       if (!state?.wallets?.length) {
@@ -116,7 +126,7 @@ const Home = () => {
         wallets={wallets}
         open={isConnectAccountsOpen}
         onClose={() => setConnectAccountsOpen(false)}
-        onConfirm={() => setConnectAccountsOpen(false)}
+        onConfirm={updateProviderConnection}
         connectedWallets={connectedWallets}
         app={app}
         tab={tab}

source/components/ConnectAccountsModal/index.jsx

@@ -82,16 +82,17 @@ const ConnectAccountsModal = ({
     setSelectAllWallets(event.target.checked);
     setWalletsToUpdate(newWalletsToUpdate);
   };
-
+  const disabled = !Object.values(walletsToUpdate).some((value) => value);
   return (
     <ActionDialog
       open={open}
       className={classes.modalContainer}
-      confirmText={t('common.allow')}
+      confirmText={t('common.connect')}
       cancelText={t('common.decline')}
       buttonVariant="rainbow"
       onClick={handleConfirm}
       onClose={onClose}
+      submitButtonProps={{ disabled }}
       content={(
         <ConnectAccountsModalLayout
           tab={tab}

source/hooks/useApps.jsx

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { CONNECTION_STATUS } from '@shared/constants/connectionStatus';
 import { addDisconnectedEntry } from '@shared/utils/apps';
 import { getApps, setApps as setStorageApps } from '@modules';
+import extensionizer from 'extensionizer';
 
 const useApps = () => {
   const [apps, setApps] = useState({});
@@ -24,7 +25,11 @@ const useApps = () => {
   }, [walletNumber]);
 
   useEffect(() => {
-    setStorageApps(walletNumber, apps);
+    setStorageApps(walletNumber, apps, () => {
+      extensionizer.tabs.query({ active: true }, (activeTabs) => {
+        extensionizer.tabs.sendMessage(activeTabs[0].id, { action: 'updateConnection' });
+      });
+    });
     const parsed = Object.values(apps) || [];
 
     const allEvents = parsed?.flatMap((app) => app?.events?.map((event) => ({

source/locales/en/translation.json

@@ -88,7 +88,8 @@
     "account": "Account",
     "learnMore": "Learn more",
     "send": "Send",
-    "unknownToken": "unknown token"
+    "unknownToken": "unknown token",
+    "connect": "Connect"
   },
   "apps": {
     "title": "Connected Apps",

source/ui/ActivityItem/components/items/JellyItem.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import NumberFormat from 'react-number-format';
+
+import JellyIcon from '@assets/icons/jelly-icon.svg';
+import { useICPPrice } from '@redux/icp';
+import { E8S_PER_ICP } from '@shared/constants/currencies';
+
+import ActivityItemDisplay from '../ActivityItemDisplay';
+import ActivityItemDetails from '../ActivityItemDetails';
+import GenericIcon from '../../../GenericIcon';
+
+const getJellyEventTitle = (type) => ({
+  DIRECTBUY: 'Buy NFT',
+  MAKELISTING: 'List NFT',
+  CANCELLISTING: 'Cancel NFT Listing',
+  MAKEOFFER: 'Make Offer',
+  ACCEPTOFFER: 'Accept Offer',
+  CANCELOFFER: 'Cancel Offer',
+  DENYOFFER: 'Deny Offer',
+}[type]) || 'Jelly Event';
+
+const getJellyData = (details, type, icpPrice) => {
+  const { price: e8s, tokenId } = details || {};
+  const wicpAmount = e8s / E8S_PER_ICP;
+  const title = getJellyEventTitle(type);
+  const price = wicpAmount * icpPrice;
+  return {
+    price, title, tokenId, wicpAmount,
+  };
+};
+
+const JellyItem = ({
+  date,
+  details,
+  setOpenDetail,
+  hovering,
+  type,
+}) => {
+  const icpPrice = useICPPrice();
+  const [iconHovered, setIconHovered] = useState(false);
+  const data = getJellyData(details, type, icpPrice);
+  const mainDetail = iconHovered ? <NumberFormat value={data.wicpAmount} displayType="text" thousandSeparator="," suffix=" WICP" decimalScale={5} /> : `#${data?.tokenId}`;
+  const secondaryDetail = iconHovered ? <NumberFormat value={data.price} displayType="text" thousandSeparator="," prefix="$" decimalScale={5} /> : 'Crowns';
+  return (
+    <>
+      <ActivityItemDisplay
+        image={(
+          <div
+            onMouseEnter={() => setIconHovered(true)}
+            onMouseLeave={() => setIconHovered(false)}
+          >
+            <GenericIcon
+              image={JellyIcon}
+              type="JELLY"
+            />
+          </div>
+          )}
+        title={data?.title}
+        subtitle={moment(date).format('MMM Do')}
+      />
+      <ActivityItemDetails
+        main={mainDetail}
+        secondary={secondaryDetail}
+        hovering={hovering}
+        details={details}
+        setOpenDetail={setOpenDetail}
+      />
+    </>
+  );
+};
+
+export default JellyItem;
+
+JellyItem.defaultProps = {
+  details: null,
+  hovering: false,
+};
+
+JellyItem.propTypes = {
+  details: PropTypes.objectOf(PropTypes.string),
+  date: PropTypes.oneOfType([
+    PropTypes.instanceOf(Date),
+    PropTypes.string,
+  ]).isRequired,
+  setOpenDetail: PropTypes.func.isRequired,
+  hovering: PropTypes.bool,
+  type: PropTypes.string.isRequired,
+};

source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import NumberFormat from 'react-number-format';
+import PropTypes from 'prop-types';
 
 import { parseToFloatAmount, TOKENS } from '@shared/constants/currencies';
 
 const TokenAmounts = ({ token0, token1 }) => {
   const parseTokenAmount = (token) => parseToFloatAmount(
-    token.amount, token.token.details?.decimals || TOKENS[token.token?.details?.symbol]?.decimals,
+    token?.amount, token?.token?.details?.decimals
+    || TOKENS[token.token?.details?.symbol]?.decimals,
   );
   const amount0 = parseTokenAmount(token0);
   const amount1 = parseTokenAmount(token1);
@@ -16,19 +18,35 @@ const TokenAmounts = ({ token0, token1 }) => {
         value={amount0}
         displayType="text"
         thousandSeparator=","
-        suffix={` ${token0.token.details.symbol}`}
+        suffix={` ${token0?.token?.details?.symbol}`}
         decimalScale={3}
       />
       +
       <NumberWithMin
         value={amount1}
         displayType="text"
         thousandSeparator=","
-        suffix={` ${token1.token.details.symbol}`}
+        suffix={` ${token1?.token?.details?.symbol}`}
         decimalScale={3}
       />
     </>
   );
 };
 
+const TokenPropTypes = PropTypes.objectOf(PropTypes.shape({
+  amount: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  token: PropTypes.shape({
+    details: PropTypes.shape({
+      symbol: PropTypes.string.isRequired,
+      decimals: PropTypes.number.isRequired,
+    }),
+  }),
+}));
+
+TokenAmounts.propTypes = {
+  token0: TokenPropTypes.isRequired,
+  token1: TokenPropTypes.isRequired,
+};
+
 export default TokenAmounts;

source/ui/ActivityItem/index.jsx

@@ -2,11 +2,9 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import extension from 'extensionizer';
 import ReactJson from 'react-json-view';
 
 import { CONNECTION_STATUS } from '@shared/constants/connectionStatus';
-import { getDashboardTransactionURL } from '@shared/constants/urls';
 
 import Dialog from '../Dialog';
 import PlugItem from './components/items/PlugItem';
@@ -15,11 +13,10 @@ import NFTItem from './components/items/NFTItem';
 import TokenItem from './components/items/TokenItem';
 import LiquidityItem from './components/items/LiquidityItem';
 import useStyles from './styles';
-import { getAddress } from './utils';
+import { getAddress, openICNetworkTx } from './utils';
+import JellyItem from './components/items/JellyItem';
 
-const openICNetworkTx = (hash) => {
-  extension.tabs.create({ url: getDashboardTransactionURL(hash) });
-};
+const JELLY_CANISTER_ID = 'getti-aiaaa-aaaah-abkkq-cai';
 
 const ActivityItem = (props) => {
   const {
@@ -77,7 +74,9 @@ const ActivityItem = (props) => {
     if (type === 'SWAP') {
       return SwapItem;
     }
-
+    if (canisterId === JELLY_CANISTER_ID) {
+      return JellyItem;
+    }
     if (type.includes('LIQUIDITY')) {
       return LiquidityItem;
     }
@@ -158,10 +157,10 @@ ActivityItem.defaultProps = {
 };
 
 ActivityItem.propTypes = {
-  canisterInfo: PropTypes.objectOf(PropTypes.any),
+  canisterInfo: PropTypes.objectOf(PropTypes.string),
   type: PropTypes.number,
   canisterId: PropTypes.string,
-  details: PropTypes.objectOf(PropTypes.any),
+  details: PropTypes.objectOf(PropTypes.string),
   to: PropTypes.string,
   from: PropTypes.string,
   amount: PropTypes.oneOfType([

source/ui/ActivityItem/utils.js

@@ -1,3 +1,6 @@
+import extensionizer from 'extensionizer';
+
+import { getDashboardTransactionURL } from '@shared/constants/urls';
 import shortAddress from '@shared/utils/short-address';
 
 export const getSubtitle = (type, to, from, t) => (({
@@ -13,3 +16,7 @@ export const getAddress = (type, to, from, canisterId) => (
     RECEIVE: from,
   }
 )[type] || canisterId || '';
+
+export const openICNetworkTx = (hash) => {
+  extensionizer.tabs.create({ url: getDashboardTransactionURL(hash) });
+};

yarn.lock

@@ -1747,10 +1747,10 @@
     cross-fetch "^3.1.4"
     crypto-js "^4.1.1"
 
-"@psychedelic/[email protected].0":
-  version "0.17.0"
-  resolved "https://npm.pkg.github.com/download/@psychedelic/plug-controller/0.17.0/d0a7c716a95e32077cbab1e41507351f15073c1ba8747c5550024ee62ab88bcd#cf2a8b29275b56408ab79929c5b3b38f8bfac474"
-  integrity sha512-c9c5TnB6fN0toCt8rzdlUwThPOSqcUrDRRRUYoemId2XHsmVqB2wCQbQKrq4u1HXYEXcmcCMqMt60qwNmbug2g==
+"@psychedelic/[email protected].2":
+  version "0.17.2"
+  resolved "https://npm.pkg.github.com/download/@psychedelic/plug-controller/0.17.2/9603a67bb3d798b7c54323654ab8f477505e42a43dc5b11f8f23ad126c5795c6#89a597ca104b5d1959aad3a444c6c088cd206309"
+  integrity sha512-5nHVGu1qQZ4149WngxEf3Y5a00HWe3nm6Nv0ZY+Jy+VnmHUn31vSBsbDL0qbIcF+xdjpX/G0tjsUzV20DnbrsQ==
   dependencies:
     "@dfinity/agent" "0.9.3"
     "@dfinity/candid" "0.9.3"
@@ -1779,10 +1779,10 @@
     text-encoding-shim "^1.0.5"
     tweetnacl "^1.0.3"
 
-"@psychedelic/[email protected].1":
-  version "2.1.1"
-  resolved "https://npm.pkg.github.com/download/@psychedelic/plug-inpage-provider/2.1.1/8fb073d7ee8cf970dc7f8d1d8577d360e928a1a9952d210c9bb78d1dd6111dc5#824c4c6999e3d81b9c2d9bb83ea6475b45326473"
-  integrity sha512-kGR/ctFqQK2OlF/VIvWxNC93xPAM2+LXoKSyu4xA/N5FU8NX0ignmMtwmEAichGw/W2GlrL0MAEyYRxldffzew==
+"@psychedelic/[email protected].2":
+  version "2.1.2"
+  resolved "https://npm.pkg.github.com/download/@psychedelic/plug-inpage-provider/2.1.2/ad720049d164796d0de1cd513ea7423beaef59d2dffc26416c2006a935b272e2#7b42861b860758bb59fe1d6a080f6ed1f2e62964"
+  integrity sha512-BsutLGWpIEYUw5Fz6vLKq1BjmTXzOKbstUrGBiIM/KtwQ9ralD5jMAOPkcLdQRxiZL0tE7VdnIKARBNNzenWIQ==
   dependencies:
     "@dfinity/agent" "0.9.3"
     "@dfinity/candid" "0.9.3"