Crypto Payment (#1844)

* initial changes

* wire up wallet

* add circular progress bar label

* add currency icons

* add copy buttons

* lingui extract

* lint and padding

* Apply suggestions from code review

Co-authored-by: Thibaut Sardan <[email protected]>
Co-authored-by: Tanmoy Basak Anjan <[email protected]>

* implement fixes

* lingui extract

* Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/CryptoPayment.tsx

Co-authored-by: Thibaut Sardan <[email protected]>

* fixes from comments

* remove unnecessary prop

* temp daily duration for testing - revert before merge

* fix dark mode icon colors

* update api client to latest

* Apply suggestions from code review

Co-authored-by: Thibaut Sardan <[email protected]>

* revert conflict marker

* remove max-content width

* fix mobile width issues

* Revert "fix mobile width issues"

This reverts commit 74ddf46.

* ensure that text doesnt overflow

* fix width

* lingui extract

Co-authored-by: GitHub Actions <[email protected]>
Co-authored-by: Thibaut Sardan <[email protected]>
Co-authored-by: Tanmoy Basak Anjan <[email protected]>

packages/common-components/src/Icons/icons/Bitcoin.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as BitcoinSvg } from "../svgs/bitcoin.svg"
+
+export { BitcoinSvg }
+
+export default createSvgIcon(<BitcoinSvg />)

packages/common-components/src/Icons/icons/Dai.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as DaiSvg } from "../svgs/dai.svg"
+
+export { DaiSvg }
+
+export default createSvgIcon(<DaiSvg />)

packages/common-components/src/Icons/icons/Ethereum.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as EthereumSvg } from "../svgs/ethereum.svg"
+
+export { EthereumSvg }
+
+export default createSvgIcon(<EthereumSvg />)

packages/common-components/src/Icons/icons/Usdc.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as UsdcSvg } from "../svgs/usdc.svg"
+
+export { UsdcSvg }
+
+export default createSvgIcon(<UsdcSvg />)

packages/common-components/src/Icons/index.ts

@@ -6,6 +6,7 @@ export { default as AmexCardIcon, AmexCardSvg } from "./icons/AmexCard.icon"
 export { default as ArrowLeftIcon, ArrowLeftSvg } from "./icons/ArrowLeft.icon"
 export { default as ArrowRightIcon, ArrowRightSvg } from "./icons/ArrowRight.icon"
 export { default as BellIcon, BellSvg } from "./icons/Bell.icon"
+export { default as BitcoinIcon, BitcoinSvg } from "./icons/Bitcoin.icon"
 export { default as BulbIcon, BulbSvg } from "./icons/Bulb.icon"
 export { default as CaretDownIcon, CaretDownSvg } from "./icons/CaretDown.icon"
 export { default as CaretUpIcon, CaretUpSvg } from "./icons/CaretUp.icon"
@@ -18,6 +19,7 @@ export { default as CopyIcon, CopySvg } from "./icons/Copy.icon"
 export { default as CreditCardIcon, CreditCardSvg } from "./icons/CreditCard.icon"
 export { default as CrossIcon, CrossSvg } from "./icons/Cross.icon"
 export { default as CrossOutlinedIcon, CrossOutlinedSvg } from "./icons/CrossOutlined.icon"
+export { default as DaiIcon, DaiSvg } from "./icons/Dai.icon"
 export { default as DatabaseIcon, DatabaseSvg } from "./icons/Database.icon"
 export { default as DeleteIcon, DeleteSvg } from "./icons/Delete.icon"
 export { default as DinersclubCardIcon, DinersclubCardSvg } from "./icons/DinersclubCard.icon"
@@ -28,6 +30,7 @@ export { default as DocumentIcon, DocumentSvg } from "./icons/Document.icon"
 export { default as DownloadIcon, DownloadSvg } from "./icons/Download.icon"
 export { default as EditIcon, EditSvg } from "./icons/Edit.icon"
 export { default as EthereumLogoIcon, EthereumLogoSvg } from "./icons/EthereumLogo.icon"
+export { default as EthereumIcon, EthereumSvg } from "./icons/Ethereum.icon"
 export { default as ExclamationCircleIcon, ExclamationCircleSvg } from "./icons/ExclamationCircle.icon"
 export { default as ExclamationCircleInverseIcon, ExclamationCircleInverseSvg } from "./icons/ExclamationCircleInverse.icon"
 export { default as ExportIcon, ExportSvg } from "./icons/Export.icon"
@@ -75,6 +78,7 @@ export { default as TableIcon, TableSvg } from "./icons/Table.icon"
 export { default as UpdateIcon, UpdateSvg } from "./icons/Update.icon"
 export { default as UploadIcon, UploadSvg } from "./icons/Upload.icon"
 export { default as UnionpayCardIcon, UnionpayCardSvg } from "./icons/UnionpayCard.icon"
+export { default as UsdcIcon, UsdcSvg } from "./icons/Usdc.icon"
 export { default as UserIcon, UserSvg } from "./icons/User.icon"
 export { default as UserShareIcon, UserShareSvg } from "./icons/UserShare.icon"
 export { default as VisaCardIcon, VisaCardSvg } from "./icons/VisaCard.icon"

packages/common-components/src/Modal/Modal.tsx

@@ -70,7 +70,7 @@ const useStyles = makeStyles(
         position: "absolute",
         zIndex: 2,
         "& svg": {
-          stroke: palette.common?.black.main
+          stroke: "var(--gray10)"
         },
         "&.right": {
           transform: "translate(-50%, 50%)",

packages/common-components/src/ProgressBar/CircularProgressBar.tsx

@@ -50,6 +50,21 @@ const useStyles = makeStyles((theme: ITheme) =>
     },
     error: {
       stroke: theme.palette.error.main
+    },
+    label: {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 12
+    },
+    wrapper: {
+      position: "relative",
+      display: "inline-flex"
     }
   })
 )
@@ -60,6 +75,7 @@ export type ProgressBarVariant = "primary" | "secondary"
 
 export interface ICircularProgressBarProps {
   className?: string
+  label?: string
   progress: number
   size?: ProgressBarSize
   variant?: ProgressBarVariant
@@ -75,7 +91,8 @@ const CircularProgressBar: React.FC<ICircularProgressBarProps> = ({
   variant,
   showBackdrop = true,
   width,
-  className
+  className,
+  label
 }) => {
   const strokeWidth = size === "small" ? 2 : size === "medium" ? 3 : 4
   const radius = width
@@ -97,28 +114,31 @@ const CircularProgressBar: React.FC<ICircularProgressBarProps> = ({
   })
 
   return (
-    <svg
-      className={className}
-      viewBox={`0 0 ${diameter} ${diameter}`}
-      width={diameter}
-      height={diameter}
-    >
-      {showBackdrop && (
+    <div className={classes.wrapper}>
+      {label && <span className={classes.label}>{label}</span>}
+      <svg
+        className={className}
+        viewBox={`0 0 ${diameter} ${diameter}`}
+        width={diameter}
+        height={diameter}
+      >
+        {showBackdrop && (
+          <path
+            d={pathDescription}
+            strokeWidth={strokeWidth}
+            fillOpacity={0}
+            className={classes.backdrop}
+          />
+        )}
+
         <path
           d={pathDescription}
           strokeWidth={strokeWidth}
           fillOpacity={0}
-          className={classes.backdrop}
+          className={clsx(classes.progressBar, size, classes[state], variant)}
         />
-      )}
-
-      <path
-        d={pathDescription}
-        strokeWidth={strokeWidth}
-        fillOpacity={0}
-        className={clsx(classes.progressBar, size, classes[state], variant)}
-      />
-    </svg>
+      </svg>
+    </div>
   )
 }
 

packages/common-components/src/stories/ProgressBar.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { withKnobs, select, boolean, number } from "@storybook/addon-knobs"
+import { withKnobs, select, boolean, number, text } from "@storybook/addon-knobs"
 import { ProgressBar, CircularProgressBar } from "../ProgressBar"
 
 export default {
@@ -57,6 +57,7 @@ export const CircularProgressBarDemo = (): React.ReactNode => {
           [undefined, "small", "medium", "large"],
           undefined
         )}
+        label={text("label", "")}
         showBackdrop={boolean("backdrop", true)}
         width={number("width", 20)}
         progress={progress}

packages/files-ui/package.json

@@ -6,8 +6,8 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.22",
-    "@chainsafe/web3-context": "1.1.4",
+    "@chainsafe/files-api-client": "1.18.25",
+    "@chainsafe/web3-context": "1.3.1",
     "@emeraldpay/hashicon-react": "^0.5.1",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
@@ -51,6 +51,7 @@
     "react-scripts": "3.4.4",
     "react-swipeable": "^6.0.1",
     "react-toast-notifications": "^2.4.0",
+    "react-qr-code":"2.0.3",
     "react-zoom-pan-pinch": "^1.6.1",
     "remark-gfm": "^1.0.0",
     "typescript": "~4.0.5",

packages/files-ui/src/App.tsx

@@ -120,6 +120,12 @@ const App = () => {
                 onboardConfig={onboardConfig}
                 checkNetwork={false}
                 cacheWalletSelection={canUseLocalStorage}
+                tokensToWatch={{
+                  1: [
+                    { address: "0x6b175474e89094c44da98b954eedeac495271d0f" },
+                    { address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" }
+                  ]
+                }}
               >
                 <FilesApiProvider
                   apiUrl={apiUrl}

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useMemo, useState } from "react"
-import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Modal } from "@chainsafe/common-components"
 import SelectPlan from "./SelectPlan"
 import PlanDetails from "./PlanDetails"
-import PaymentMethod from "./PaymentMethod"
+import PaymentMethodSelector from "./PaymentMethodSelector"
 import ConfirmPlan from "./ConfirmPlan"
 import { useBilling } from "../../../../../Contexts/BillingContext"
 import { Product, ProductPrice, ProductPriceRecurringInterval } from "@chainsafe/files-api-client"
 import PlanSuccess from "./PlanSuccess"
 import DowngradeDetails from "./DowngradeDetails"
-
+import { PaymentMethod } from "../../../../../Contexts/BillingContext"
+import CryptoPayment from "./CryptoPayment"
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
     root: {
@@ -35,7 +36,8 @@ type ChangeModalSlides = "select" |
 "paymentMethod" |
 "confirmPlan" |
 "planSuccess" |
-"downgradeDetails"
+"downgradeDetails" |
+"cryptoPayment"
 
 const getPrice = (plan: Product, recurrence?: ProductPriceRecurringInterval) => {
   return plan.prices.find(price => price?.recurring?.interval === recurrence)?.unit_amount || 0
@@ -47,9 +49,11 @@ interface IChangeProductModal {
 
 const ChangeProductModal = ({ onClose }: IChangeProductModal) => {
   const classes = useStyles()
+  const { desktop } = useThemeSwitcher()
   const { getAvailablePlans, changeSubscription, currentSubscription } = useBilling()
   const [selectedPlan, setSelectedPlan] = useState<Product | undefined>()
   const [selectedPrice, setSelectedPrice] = useState<ProductPrice | undefined>()
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<PaymentMethod | undefined>()
   const [slide, setSlide] = useState<ChangeModalSlides>("select")
   const [plans, setPlans] = useState<Product[] | undefined>()
   const [isLoadingChangeSubscription, setIsLoadingChangeSubscription] = useState(false)
@@ -82,8 +86,8 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => {
     <Modal
       closePosition="right"
       active={true}
-      maxWidth={800}
-      width="max-content"
+      maxWidth={desktop ? 800 : undefined}
+      width={desktop ? "max-content" : "100%"}
       className={classes.root}
       injectedClass={{
         inner: classes.inner
@@ -119,50 +123,54 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => {
       {slide === "planDetails" && selectedPlan && (
         <PlanDetails
           plan={selectedPlan}
-          goToSelectPlan={() => {
-            setSlide("select")
-          }}
+          goToSelectPlan={() => setSlide("select")}
           onSelectPlanPrice={(planPrice: ProductPrice) => {
             setSelectedPrice(planPrice)
             setSlide("paymentMethod")
           }}
         />
       )}
-      {slide === "paymentMethod" && (
-        <PaymentMethod
+      {slide === "paymentMethod" && selectedPrice &&
+        <PaymentMethodSelector
+          selectedProductPrice={selectedPrice}
+          onClose={onClose}
           goBack={() => {
             setSlide("planDetails")
           }}
-          onSelectPaymentMethod={() => {
+          onSelectPaymentMethod={(paymentMethod) => {
+            setSelectedPaymentMethod(paymentMethod)
             setSlide("confirmPlan")
           }}
         />
-      )}
-      {slide === "confirmPlan" && selectedPlan && selectedPrice && (
-        <ConfirmPlan
-          plan={selectedPlan}
-          planPrice={selectedPrice}
-          goToSelectPlan={() => {
-            setSlide("select")
-          }}
-          goToPlanDetails={() => {
-            setSlide("planDetails")
-          }}
-          goToPaymentMethod={() => {
-            setSlide("paymentMethod")
-          }}
-          loadingChangeSubscription={isLoadingChangeSubscription}
-          onChangeSubscription={handleChangeSubscription}
-          isSubscriptionError={isSubscriptionError}
-        />
-      )}
-      {slide === "planSuccess" && selectedPlan && selectedPrice && (
-        <PlanSuccess
-          onClose={onClose}
+      }
+      {slide === "confirmPlan" && selectedPlan && selectedPrice && selectedPaymentMethod &&
+      <ConfirmPlan
+        plan={selectedPlan}
+        planPrice={selectedPrice}
+        goToSelectPlan={() => {
+          setSlide("select")
+        }}
+        goToPaymentMethod={() => {
+          setSlide("paymentMethod")
+        }}
+        loadingChangeSubscription={isLoadingChangeSubscription}
+        onChangeSubscription={selectedPaymentMethod === "creditCard" ? handleChangeSubscription : () => setSlide("cryptoPayment")}
+        isSubscriptionError={isSubscriptionError}
+        paymentMethod={selectedPaymentMethod}
+      />
+      }
+      {slide === "cryptoPayment" && selectedPlan && selectedPrice &&
+        <CryptoPayment
           plan={selectedPlan}
           planPrice={selectedPrice}
-        />
-      )}
+          goBack={() => setSlide("confirmPlan")}/>
+      }
+      {slide === "planSuccess" && selectedPlan && selectedPrice && <PlanSuccess
+        onClose={onClose}
+        plan={selectedPlan}
+        planPrice={selectedPrice}
+      />
+      }
     </Modal>
   )
 }