From 0802408dca5fb539d065228c5176d97d0051e8e0 Mon Sep 17 00:00:00 2001 From: rocky-fleek Date: Tue, 14 Jun 2022 00:53:48 +0200 Subject: [PATCH 1/2] Fixed issue where current account was not being connected on home account switch prompt. Disabled button when no new accounts are selected, fix modal button text --- package.json | 4 ++-- source/Popup/Views/Home/index.jsx | 16 +++++++++++++--- source/components/ConnectAccountsModal/index.jsx | 5 +++-- source/hooks/useApps.jsx | 7 ++++++- source/locales/en/translation.json | 3 ++- yarn.lock | 16 ++++++++-------- 6 files changed, 34 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 01e10934..70ffcc47 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.1", + "@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/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/yarn.lock b/yarn.lock index 3d9f284f..8a9c2e75 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.1": + version "0.17.1" + resolved "https://npm.pkg.github.com/download/@psychedelic/plug-controller/0.17.1/2dd5794cad8ab254a6de3669785d039a6f9427c15c9e629f898549f210201ada#e8dfbc71c49926ea5833ae4492f9b194c9897c4f" + integrity sha512-VeVQnwAMh2hxTUAvwJgKz9L/rJvQpPa9g8ezWzN68qZ4bPk9cGq5kBTi06a2/s10tw9OUpPkk5x9d+kjPQB7/A== 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" From e340601bfe5244559f959c8e29cc1499ea60c4ef Mon Sep 17 00:00:00 2001 From: rocky-fleek Date: Tue, 14 Jun 2022 03:05:41 +0200 Subject: [PATCH 2/2] Added JellyActivityItem --- package.json | 2 +- source/assets/icons/jelly-icon.svg | 9 ++ .../components/items/JellyItem.js | 91 +++++++++++++++++++ .../LiquidityItem/components/TokenAmounts.jsx | 24 ++++- source/ui/ActivityItem/index.jsx | 17 ++-- source/ui/ActivityItem/utils.js | 7 ++ yarn.lock | 8 +- 7 files changed, 141 insertions(+), 17 deletions(-) create mode 100644 source/assets/icons/jelly-icon.svg create mode 100644 source/ui/ActivityItem/components/items/JellyItem.js diff --git a/package.json b/package.json index 70ffcc47..43495b5a 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@material-ui/icons": "^4.11.2", "@metamask/post-message-stream": "^4.0.0", "@psychedelic/dab-js": "1.3.6", - "@psychedelic/plug-controller": "0.17.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", 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/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 8a9c2e75..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.1": - version "0.17.1" - resolved "https://npm.pkg.github.com/download/@psychedelic/plug-controller/0.17.1/2dd5794cad8ab254a6de3669785d039a6f9427c15c9e629f898549f210201ada#e8dfbc71c49926ea5833ae4492f9b194c9897c4f" - integrity sha512-VeVQnwAMh2hxTUAvwJgKz9L/rJvQpPa9g8ezWzN68qZ4bPk9cGq5kBTi06a2/s10tw9OUpPkk5x9d+kjPQB7/A== +"@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"