diff --git a/package.json b/package.json
index 01e10934..43495b5a 100644
--- a/package.json
+++ b/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",
diff --git a/source/Popup/Views/Home/index.jsx b/source/Popup/Views/Home/index.jsx
index 4667429b..89ac263f 100644
--- a/source/Popup/Views/Home/index.jsx
+++ b/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}
diff --git a/source/assets/icons/jelly-icon.svg b/source/assets/icons/jelly-icon.svg
new file mode 100644
index 00000000..bdf60c14
--- /dev/null
+++ b/source/assets/icons/jelly-icon.svg
@@ -0,0 +1,9 @@
+
diff --git a/source/components/ConnectAccountsModal/index.jsx b/source/components/ConnectAccountsModal/index.jsx
index 68e9bdb7..19ac88e6 100644
--- a/source/components/ConnectAccountsModal/index.jsx
+++ b/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 (
{
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) => ({
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
index 8110e760..705f2ba1 100644
--- a/source/locales/en/translation.json
+++ b/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",
diff --git a/source/ui/ActivityItem/components/items/JellyItem.js b/source/ui/ActivityItem/components/items/JellyItem.js
new file mode 100644
index 00000000..1eac17a1
--- /dev/null
+++ b/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 ? : `#${data?.tokenId}`;
+ const secondaryDetail = iconHovered ? : 'Crowns';
+ return (
+ <>
+ setIconHovered(true)}
+ onMouseLeave={() => setIconHovered(false)}
+ >
+
+
+ )}
+ title={data?.title}
+ subtitle={moment(date).format('MMM Do')}
+ />
+
+
+ );
+};
+
+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,
+};
diff --git a/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx b/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx
index 18ee45d9..b492f133 100644
--- a/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx
+++ b/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,7 +18,7 @@ const TokenAmounts = ({ token0, token1 }) => {
value={amount0}
displayType="text"
thousandSeparator=","
- suffix={` ${token0.token.details.symbol}`}
+ suffix={` ${token0?.token?.details?.symbol}`}
decimalScale={3}
/>
+
@@ -24,11 +26,27 @@ const TokenAmounts = ({ token0, token1 }) => {
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;
diff --git a/source/ui/ActivityItem/index.jsx b/source/ui/ActivityItem/index.jsx
index 540977de..b6ebf836 100644
--- a/source/ui/ActivityItem/index.jsx
+++ b/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([
diff --git a/source/ui/ActivityItem/utils.js b/source/ui/ActivityItem/utils.js
index 46fc734c..a406a09e 100644
--- a/source/ui/ActivityItem/utils.js
+++ b/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) });
+};
diff --git a/yarn.lock b/yarn.lock
index 3d9f284f..b6f9a309 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1747,10 +1747,10 @@
cross-fetch "^3.1.4"
crypto-js "^4.1.1"
-"@psychedelic/plug-controller@0.17.0":
- version "0.17.0"
- resolved "https://npm.pkg.github.com/download/@psychedelic/plug-controller/0.17.0/d0a7c716a95e32077cbab1e41507351f15073c1ba8747c5550024ee62ab88bcd#cf2a8b29275b56408ab79929c5b3b38f8bfac474"
- integrity sha512-c9c5TnB6fN0toCt8rzdlUwThPOSqcUrDRRRUYoemId2XHsmVqB2wCQbQKrq4u1HXYEXcmcCMqMt60qwNmbug2g==
+"@psychedelic/plug-controller@0.17.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/plug-inpage-provider@2.1.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/plug-inpage-provider@2.1.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"