Merge pull request #302 from TokelPlatform/development

v1.3.3
TokelPlatform · Aug 7, 2022 · 8990cff · 8990cff
2 parents c33958d + 9444c7a
commit 8990cff
Show file tree

Hide file tree

Showing 11 changed files with 226 additions and 46 deletions.
diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import styled from '@emotion/styled';
+import { ipcRenderer } from 'electron';
 
+import { dispatch } from 'store/rematch';
 import { selectModalName, selectView } from 'store/selectors';
 import links from 'util/links';
-import { TOPBAR_HEIGHT_PX, ViewType } from 'vars/defines';
+import { DEEP_LINK_IPC_ID, TOPBAR_HEIGHT_PX, ViewType } from 'vars/defines';
 
 import InfoNote from 'components/_General/InfoNote';
 import CreateToken from 'components/CreateToken/CreateToken';
@@ -68,6 +70,19 @@ const Home = () => {
   const currentView = useSelector(selectView);
   const modalProps = modals[useSelector(selectModalName)];
 
+  useEffect(() => {
+    const listener = (_, { view, params }) => {
+      dispatch.environment.SET_VIEW(view || ViewType.DASHBOARD);
+      if (params) dispatch.environment.SET_DEEP_LINK_PARAMS(params);
+    };
+
+    ipcRenderer.on(DEEP_LINK_IPC_ID, listener);
+
+    return () => {
+      ipcRenderer.removeListener(DEEP_LINK_IPC_ID, listener);
+    };
+  }, []);
+
   return (
     <HomeRoot>
       <SideMenu />

diff --git a/src/components/Marketplace/Marketplace.tsx b/src/components/Marketplace/Marketplace.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -9,6 +10,8 @@ import fillOrderIcon from 'assets/fillOrder.svg';
 import inboxIcon from 'assets/inbox.svg';
 import listIcon from 'assets/list.svg';
 import trendUpIcon from 'assets/trendUp.svg';
+import { dispatch } from 'store/rematch';
+import { selectDeepLinkParams } from 'store/selectors';
 import { V } from 'util/theming';
 
 import { Layout, SubTitle, Title } from 'components/_General/_UIElements/common';
@@ -68,9 +71,28 @@ const WelcomeMessageWrapper = styled.div`
 `;
 
 const Marketplace: React.FC = () => {
+  const deepLinkParams = useSelector(selectDeepLinkParams);
   const [currentView, setCurrentView] = useState<MARKETPLACE_VIEWS | null>(null);
   const [currentOrderId, setCurrentOrderId] = useState<string | undefined>();
 
+  const handleViewChange = (view: MARKETPLACE_VIEWS | null) => {
+    setCurrentView(view);
+    setCurrentOrderId(undefined);
+  };
+
+  useEffect(() => {
+    if (deepLinkParams?.length) {
+      const params = new URLSearchParams(deepLinkParams);
+      const action =
+        params.get('action') === 'bid' ? MARKETPLACE_VIEWS.BID : MARKETPLACE_VIEWS.FILL;
+
+      setCurrentView(action);
+      setCurrentOrderId(params.get('orderid') || params.get('tokenid'));
+
+      dispatch.environment.SET_DEEP_LINK_PARAMS('');
+    }
+  }, [deepLinkParams, currentView]);
+
   const CurrentTab = () => {
     switch (currentView) {
       case MARKETPLACE_VIEWS.FILL:
@@ -123,7 +145,7 @@ const Marketplace: React.FC = () => {
           {menuData.map(menuItem => (
             <MenuItem
               key={menuItem.name}
-              onClick={() => setCurrentView(menuItem.type)}
+              onClick={() => handleViewChange(menuItem.type)}
               name={menuItem.name}
               icon={menuItem.icon}
               selected={menuItem.type === currentView}

diff --git a/src/components/Marketplace/widgets/MarketOrder.tsx b/src/components/Marketplace/widgets/MarketOrder.tsx
@@ -46,8 +46,7 @@ const MarketOrderWidget: React.FC<MarketOrderWidgetProps> = ({ type }) => {
   const tokenDetails = useSelector(selectTokenDetails);
   const myTokens = useMyTokens();
   const fulfillOrderSchema = useFulfillOrderSchema(type);
-  const { currentOrderId: prefillOrderId, setCurrentOrderId: setPrefillOrderId } =
-    useContext(ViewContext);
+  const { currentOrderId: prefillOrderId } = useContext(ViewContext);
 
   const handleMarketOrder = (values: MarketOrder, { setSubmitting }) => {
     setSubmitting(false);
@@ -101,13 +100,11 @@ const MarketOrderWidget: React.FC<MarketOrderWidgetProps> = ({ type }) => {
       : 'Review order';
 
   useEffect(() => {
-    if (prefillOrderId) formikBag.setFieldValue('orderId', prefillOrderId);
+    if (prefillOrderId?.length)
+      formikBag.setFieldValue(type === 'fill' ? 'orderId' : 'assetId', prefillOrderId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [prefillOrderId, formikBag.setFieldValue]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => () => setPrefillOrderId(undefined), []);
-
   useEffect(() => {
     if (currentOrderDetails) {
       const quantity = parseBigNumObject(currentOrderDetails.bnAmount).toNumber();
@@ -190,7 +187,6 @@ const MarketOrderWidget: React.FC<MarketOrderWidgetProps> = ({ type }) => {
       formikBag.setFieldValue('order', {});
       formikBag.setFieldValue('quantity', 0);
       formikBag.setFieldValue('price', 0);
-      formikBag.setFieldValue('assetId', '');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formikBag.setFieldValue, formikBag.values.orderId]);

diff --git a/src/components/_General/TokenMediaDisplay.tsx b/src/components/_General/TokenMediaDisplay.tsx
@@ -5,7 +5,15 @@ import { ipcRenderer } from 'electron';
 
 import { Responsive, extractIPFSHash } from 'util/helpers';
 import { V } from 'util/theming';
-import { DEFAULT_IPFS_FALLBACK_GATEWAY, IPFS_IPC_ID, IpfsAction } from 'vars/defines';
+import {
+  DEFAULT_IPFS_FALLBACK_GATEWAY,
+  IPFS_IPC_ID,
+  IpfsAction,
+  TOKEN_WHITE_LIST_LOCATION,
+} from 'vars/defines';
+
+import { ButtonSmall } from 'components/_General/buttons';
+import FriendlyWarning from 'components/_General/WarningFriendly';
 
 const MediaContent = styled.div`
   overflow-y: auto;
@@ -29,6 +37,19 @@ const TokenMediaIframe = styled.iframe`
   border: 0;
 `;
 
+const ButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 25px;
+`;
+
+const DisclaimerText = styled.div`
+  text-align: justify;
+  text-align-last: center;
+  font-size: 0.9rem;
+`;
+
 interface TokenMediaDisplayProps {
   url?: string;
 }
@@ -38,31 +59,44 @@ const TokenMediaDisplay: React.FC<TokenMediaDisplayProps> = ({ url }) => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const [iframeHeight, setIframeHeight] = useState<number | 'unset'>('unset');
   const [mediaUrl, setMediaUrl] = useState(null);
+  const [mediaShouldLoad, setMediaShouldLoad] = useState(false);
+  const [readMore, setReadMore] = useState(false);
 
   const ipfsId = useMemo(() => extractIPFSHash(url), [url]);
+  const tokenAddress = ipfsId || url;
+  const tokenInWhiteList = !!localStorage.getItem(`${TOKEN_WHITE_LIST_LOCATION}/${tokenAddress}`);
 
   useEffect(() => {
     setIframeHeight('unset');
     setMediaUrl(null);
+    setIframeLoaded(false);
+    setMediaShouldLoad(false);
+    setReadMore(false);
     iframeRef.current?.contentWindow.postMessage({ mediaUrl: '', width: 0 });
   }, [url]);
 
-  // Request IPFS file if it's an IPFS link. Set link meanwhile anyway
   useEffect(() => {
-    if (ipfsId) {
-      ipcRenderer.send(IPFS_IPC_ID, {
-        type: IpfsAction.GET,
-        payload: {
-          ipfsId,
-        },
-      });
+    if (tokenInWhiteList && !iframeLoaded) setMediaShouldLoad(true);
+  }, [tokenInWhiteList, iframeLoaded]);
 
-      // Set fallback in case IPFS data never streams to our node
-      setMediaUrl(`${DEFAULT_IPFS_FALLBACK_GATEWAY}/${ipfsId}`);
-    } else {
-      setMediaUrl(url);
+  // Request IPFS file if it's an IPFS link. Set link meanwhile anyway
+  useEffect(() => {
+    if (mediaShouldLoad) {
+      if (ipfsId) {
+        ipcRenderer.send(IPFS_IPC_ID, {
+          type: IpfsAction.GET,
+          payload: {
+            ipfsId,
+          },
+        });
+
+        // Set fallback in case IPFS data never streams to our node
+        setMediaUrl(`${DEFAULT_IPFS_FALLBACK_GATEWAY}/${ipfsId}`);
+      } else {
+        setMediaUrl(url);
+      }
     }
-  }, [url, ipfsId]);
+  }, [url, ipfsId, mediaShouldLoad]);
 
   // Listen for IPFS files
   useEffect(() => {
@@ -105,21 +139,99 @@ const TokenMediaDisplay: React.FC<TokenMediaDisplayProps> = ({ url }) => {
     return () => {
       if (observer) observer.disconnect();
     };
-  }, [iframeRef, iframeLoaded]);
+  }, [iframeRef]);
 
-  if (!mediaUrl) return null;
+  function addTokenToWhiteList() {
+    localStorage.setItem(`${TOKEN_WHITE_LIST_LOCATION}/${tokenAddress}`, `${tokenAddress}`);
+    setMediaShouldLoad(true);
+  }
+
+  function removeTokenFromWhiteList() {
+    localStorage.removeItem(`${TOKEN_WHITE_LIST_LOCATION}/${tokenAddress}`);
+    setMediaShouldLoad(false);
+    setIframeLoaded(false);
+  }
 
   return (
-    <MediaContent>
-      <ImageFrame>
-        <TokenMediaIframe
-          height={iframeHeight}
-          ref={iframeRef}
-          src={`file://${__dirname}/externalMedia.html`}
-          onLoad={() => setIframeLoaded(true)}
-        />
-      </ImageFrame>
-    </MediaContent>
+    <>
+      {mediaShouldLoad && (
+        <>
+          <MediaContent>
+            <ImageFrame>
+              <TokenMediaIframe
+                height={iframeHeight}
+                ref={iframeRef}
+                src={`file://${__dirname}/externalMedia.html`}
+                onLoad={() => {
+                  setIframeLoaded(true);
+                  setMediaShouldLoad(true);
+                }}
+              />
+            </ImageFrame>
+          </MediaContent>
+          <ButtonWrapper>
+            <ButtonSmall
+              type="button"
+              theme="transparent"
+              onClick={() => removeTokenFromWhiteList()}
+            >
+              Hide Image
+            </ButtonSmall>
+          </ButtonWrapper>
+        </>
+      )}
+      {!mediaShouldLoad && (
+        <div style={{ textAlign: 'center' }}>
+          <FriendlyWarning message="Image Preview Disclaimer" />
+
+          <br />
+
+          {!readMore && (
+            <>
+              <DisclaimerText>
+                The Tokel team does not own, endorse, host or content moderate anything that is
+                shown in the dApp. By it&apos;s nature, the dApp merely reads...
+              </DisclaimerText>
+              <br />
+              <ButtonSmall type="button" theme="purpler" onClick={() => setReadMore(true)}>
+                Read More
+              </ButtonSmall>
+            </>
+          )}
+
+          {readMore && (
+            <>
+              <DisclaimerText>
+                The Tokel team does not own, endorse, host or content moderate anything that is
+                shown in the dApp. By it&apos;s nature, the dApp merely reads the media URL&apos;s
+                that are linked within the meta data of tokens that are created on the Tokel public
+                blockchain. Content moderation issues should be addressed with the token creator,
+                owner, or through the web host that stores the media itself.
+              </DisclaimerText>
+              <br />
+              <DisclaimerText>
+                By accepting this disclaimer, you are accepting that you have personally verified
+                the source of the image and are happy for it to be displayed, knowing that there are
+                no content moderators and you&apos;re taking all responsibility for viewing the
+                media and any risks associated with that. You are accepting that anybody that
+                participates in creating and/or shipping this open source software holds no
+                liability for what is shown, and that the decision to proceed is completely
+                voluntary and at your own risk.
+              </DisclaimerText>
+
+              <ButtonWrapper>
+                <ButtonSmall type="button" theme="success" onClick={() => setMediaShouldLoad(true)}>
+                  View once
+                </ButtonSmall>
+                <ButtonSmall type="button" theme="purple" onClick={() => addTokenToWhiteList()}>
+                  View and never ask again
+                </ButtonSmall>
+              </ButtonWrapper>
+            </>
+          )}
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/src/electron/main.ts b/src/electron/main.ts
@@ -23,7 +23,14 @@ import log from 'electron-log';
 import { autoUpdater } from 'electron-updater';
 
 import { BitgoAction, checkData } from '../util/bitgoHelper';
-import { BITGO_IPC_ID, IPFS_IPC_ID, VERSIONS_MSG, WindowControl } from '../vars/defines';
+import {
+  BITGO_IPC_ID,
+  DEEP_LINK_IPC_ID,
+  DEEP_LINK_PROTOCOL,
+  IPFS_IPC_ID,
+  VERSIONS_MSG,
+  WindowControl,
+} from '../vars/defines';
 import MenuBuilder from './menu';
 import packagejson from './package.json';
 
@@ -104,6 +111,15 @@ ipcMain.on('window-controls', async (_, arg) => {
   }
 });
 
+// handle deep links
+if (process.defaultApp) {
+  if (process.argv.length >= 2) {
+    app.setAsDefaultProtocolClient('tokel', process.execPath, [path.resolve(process.argv[1])]);
+  }
+} else {
+  app.setAsDefaultProtocolClient('tokel');
+}
+
 const createWindow = async () => {
   if (isDev || process.env.DEBUG_PROD === 'true') {
     await installExtensions();
@@ -217,6 +233,17 @@ autoUpdater.on('update-downloaded', data => {
   mainWindow?.webContents.send('update-downloaded', data);
 });
 
+app.on('open-url', (_, url) => {
+  if (url.startsWith(DEEP_LINK_PROTOCOL)) {
+    console.log('RECEIVED DEEP LINK:', url);
+    const urlObj = new URL(url);
+    mainWindow.webContents.send(DEEP_LINK_IPC_ID, {
+      view: urlObj.hostname,
+      params: urlObj.search,
+    });
+  }
+});
+
 app.on('window-all-closed', () => {
   // Respect the OSX convention of having the application in memory even
   // after all windows have been closed

diff --git a/src/electron/package.json b/src/electron/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tokel_app",
   "productName": "tokelPlatform",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Komodo ecosystem’s Token Platform",
   "main": "./main.js",
   "author": {
@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@tokel/nspv-js": "0.1.8",
+    "@tokel/nspv-js": "0.1.9",
     "axios": "0.21.4",
     "ipfs-core": "0.13.0",
     "satoshi-bitcoin": "1.0.5"