updates

images.d.ts

@@ -1,3 +1,5 @@
+declare module "is-ipfs";
+
 declare module "*.svg";
 declare module "*.png";
 declare module "*.jpg";

package.json

@@ -9,6 +9,7 @@
     "@walletconnect/browser": "^1.0.0-beta.25",
     "axios": "^0.18.0",
     "bignumber.js": "^8.1.1",
+    "is-ipfs": "^0.6.1",
     "qr-image": "^3.2.0",
     "react": "^16.8.6",
     "react-blockies": "^1.4.0",

src/components/EmptyState.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import styled from "styled-components";
+import { SCenter } from "./common";
+import { colors } from "../styles";
+
+const SEmptyState = styled(SCenter)`
+  background: rgb(${colors.white});
+  & h6 {
+    font-weight: normal;
+    color: rgb(${colors.grey});
+  }
+`;
+
+const EmptyState = (props: any) => (
+  <SEmptyState>
+    <h6>{props.message}</h6>
+    {props.children}
+  </SEmptyState>
+);
+
+EmptyState.propTypes = {
+  message: PropTypes.string
+};
+
+EmptyState.defaultProps = {
+  message: "No Items"
+};
+
+export default EmptyState;

src/components/ListItem.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import styled from "styled-components";
 import { colors, fonts, shadows, transitions } from "../styles";
 import { IMenuItem, IOrderItem, IBusinessPayment } from "../helpers/types";
-import { formatDisplayAmount } from "../helpers/utilities";
+import { formatDisplayAmount, sanitizeImgSrc } from "../helpers/utilities";
 import {
   SListItemImage,
   SListItemText,
@@ -137,7 +137,7 @@ const ListItem = ({
       <SListItemDetails flex={3}>
         {!!item.image && !noImage && (
           <SListItemImage>
-            <img src={item.image} alt={item.name} />
+            <img src={sanitizeImgSrc(item.image)} alt={item.name} />
           </SListItemImage>
         )}
         <SListItemText>

src/components/ProfileForm.tsx

@@ -4,7 +4,6 @@ import Input from "../components/Input";
 import Button from "../components/Button";
 import Dropdown from "../components/Dropdown";
 import UploadToIpfs from "../components/UploadToIpfs";
-import { getIpfsUrl } from "../helpers/utilities";
 import { IBusinessProfile } from "../helpers/types";
 import BUSINESS_TYPES from "../constants/businessTypes";
 import COUNTRIES from "../constants/countries";
@@ -43,7 +42,7 @@ const ProfileForm = (props: IProfileFormProps) => {
         <UploadToIpfs
           size={200}
           label={`Logo`}
-          image={getIpfsUrl(businessProfile.logo)}
+          image={businessProfile.logo}
           onUpload={(logo: string) => {
             onInputChange({ logo });
             if (onInputSubmit) {

src/components/Upload.tsx

@@ -7,6 +7,7 @@ import uploadIcon from "../assets/upload.svg";
 import editIcon from "../assets/edit.svg";
 import { colors, transitions } from "../styles";
 import { SLabel } from "./common";
+import { sanitizeImgSrc } from "../helpers/utilities";
 
 const IMAGE_PADDING = 5;
 
@@ -69,7 +70,7 @@ const SUploadButton = styled.button<IUploadButtonStyleProps>`
 `;
 
 interface IImageDisplayStyledProps {
-  url: string;
+  image: string;
 }
 
 const SImageDisplay = styled.div<IImageDisplayStyledProps>`
@@ -79,7 +80,7 @@ const SImageDisplay = styled.div<IImageDisplayStyledProps>`
   left: ${IMAGE_PADDING}px;
   right: ${IMAGE_PADDING}px;
   overflow: hidden;
-  background-image: ${({ url }) => `url(${url})`};
+  background-image: ${({ image }) => `url(${image})`};
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -174,7 +175,7 @@ class Upload extends React.Component<any, any> {
           />
           {image && !uploading ? (
             <React.Fragment>
-              <SImageDisplay url={image} />
+              <SImageDisplay image={sanitizeImgSrc(image)} />
               <SEditIcon
                 size={(5 * size) / 40}
                 icon={editIcon}

src/components/UploadToIpfs.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
 import { apiPinFile } from "../helpers/api";
-import { getIpfsUrl, getIpfsHash } from "../helpers/utilities";
 import Upload from "../components/Upload";
 
 class UploadToIpfs extends React.Component<any, any> {
@@ -20,18 +19,12 @@ class UploadToIpfs extends React.Component<any, any> {
       formData.append(`${idx}`, file);
     });
 
-    const fileHash = await apiPinFile(formData);
-
-    let result = "";
-
-    if (fileHash) {
-      result = getIpfsUrl(fileHash);
-    }
+    const result = await apiPinFile(formData);
 
     return result;
   };
 
-  public onUpload = (url: string) => this.props.onUpload(getIpfsHash(url));
+  public onUpload = (image: string) => this.props.onUpload(image);
 
   public render() {
     const { color, size, label, image } = this.props;

src/components/common/index.tsx

@@ -136,6 +136,7 @@ export const SGrid = styled.div<IGridStyleProps>`
 `;
 
 export const SLabel = styled.label`
+  text-align: left;
   color: rgb(${colors.grey});
   font-size: ${fonts.size.small};
   font-weight: ${fonts.weight.semibold};

src/constants/modals.ts

@@ -3,3 +3,5 @@ export const PAYMENT_METHODS_MODAL = "PAYMENT_METHODS_MODAL";
 export const PLAIN_MESSAGE_MODAL = "PLAIN_MESSAGE_MODAL";
 
 export const ADMIN_AUTHENTICATION_MODAL = "ADMIN_AUTHENTICATION_MODAL";
+
+export const INVENTORY_ITEM = "INVENTORY_ITEM";