Update npm pakages

.env

@@ -1 +1 @@
-REACT_APP_BASEURL='https://develop.anypayx.com/'
+REACT_APP_BASEURL='https://develop.anypayx.com/'

.github/workflows/docker-image.yml

@@ -0,0 +1,31 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ "*" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+            username: ${{ secrets.DOCKERHUB_USERNAME }}
+            password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build the Docker image
+        run: docker build . --file Dockerfile --tag anypay/web3-checkout:${{ github.ref_name }}
+
+      - name: Push Docker Image
+        if: github.event_name == 'push' && github.event_name != 'pull_request'
+        run: |
+          docker push anypay/web3-checkout:${{ github.ref_name }}
+

.storybook/main.js

@@ -1,11 +1,24 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
-  ]
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app'
+  ],
+  framework: '@storybook/react-webpack5',
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
+  },
+  typescript: {
+    reactDocgen: false,
+  }
 }

Dockerfile

@@ -0,0 +1,38 @@
+FROM node:16-alpine
+
+# Install dependencies only when needed
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+RUN apk add --no-cache libc6-compat python3 make g++
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN npm install --legacy-peer-deps
+
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["npm", "start"]

craco.config.js

@@ -1,3 +1,5 @@
+const webpack = require('webpack');
+
 module.exports = {
   webpack: {
     configure: {
@@ -12,7 +14,19 @@ module.exports = {
           },
         },
       },
-    },
+      resolve: {
+          fallback: { 
+            crypto: false,
+            buffer: require.resolve('buffer/')
+        },
+      },
+      plugins: [
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+            Buffer: ['buffer', 'Buffer']
+        })
+      ]
+    }
   },
   plugins: [
     {
@@ -24,5 +38,5 @@ module.exports = {
       },
       options: {}
     }
-  ],
+  ]
 }

package.json

@@ -3,44 +3,54 @@
   "version": "0.2.2",
   "private": false,
   "dependencies": {
-    "@babel/plugin-syntax-typescript": "^7.20.0",
-    "@craco/craco": "^6.4.3",
+    "@babel/plugin-syntax-typescript": "^7.23.3",
+    "@craco/craco": "^7.1.0",
     "@metamask/detect-provider": "^2.0.0",
     "@moneybutton/react-money-button": "^0.38.8",
     "@solana/spl-token": "^0.3.7",
     "@solana/web3.js": "^1.74.0",
-    "axios": "^0.24.0",
-    "bsv": "1.5.6",
+    "axios": "^1.6.2",
+    "babel-loader": "^9.1.3",
+    "bsv2": "^2.0.15",
+    "buffer": "^6.0.3",
     "dayjs": "^1.10.7",
     "ethers": "^6.2.3",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-accessible-accordion": "^4.0.0",
     "react-confetti": "^6.0.1",
     "react-countdown": "^2.3.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-modal": "^3.14.4",
     "react-qr-code": "^2.0.3",
     "react-select": "^5.7.4",
     "styled-components": "^5.3.1",
     "styled-media-query": "^2.1.2",
-    "typescript": "^4.1.2",
+    "typescript": "^5.3.2",
     "web-vitals": "^1.0.1",
-    "web3": "^1.9.0"
+    "web3": "^4.2.2"
   },
   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "NODE_PATH=./src/ craco test",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "sb dev -p 6006 -s public",
+    "build-storybook": "sb build -s public",
     "example": "npm run build && cp -R ./build/static ./example && serve ./example -p 8080",
     "scp": "scp  -r -i ~/.ssh/chef build/* [email protected]:/opt/anypayx.com/invoices"
   },
+  "jest": {
+    "transformIgnorePatterns": [
+        "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.js$",
+        "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.ts$",
+        "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.tsx$"
+    ]
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
     ],
     "overrides": [
       {
@@ -66,34 +76,45 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.3.11",
-    "@storybook/addon-essentials": "^6.3.11",
-    "@storybook/addon-links": "^6.3.11",
-    "@storybook/node-logger": "^6.3.11",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.11",
-    "@testing-library/jest-dom": "^5.16.0",
+    "@storybook/addon-actions": "^7.6.0",
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/addon-interactions": "7.6.0",
+    "@storybook/addon-links": "^7.6.0",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/blocks": "7.6.0",
+    "@storybook/builder-webpack5": "^7.6.0",
+    "@storybook/cli": "^7.6.0",
+    "@storybook/node-logger": "^7.6.0",
+    "@storybook/preset-create-react-app": "^7.6.1",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-webpack5": "7.6.0",
+    "@storybook/test": "7.6.0",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/jest": "^29.5.9",
+    "@types/node": "^20.9.3",
+    "@types/react-dom": "^18.2.15",
     "@types/react-helmet": "^6.1.3",
     "@types/react-modal": "^3.13.1",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.16",
-    "axios-mock-adapter": "^1.20.0",
+    "axios-mock-adapter": "^1.22.0",
     "babel-plugin-styled-components": "^1.13.2",
     "concurrently": "^6.3.0",
     "craco-plugin-env": "^1.0.5",
     "jest-styled-components": "^7.0.5",
-    "react-scripts": "^4.0.3",
-    "react-test-renderer": "^17.0.2",
+    "react-scripts": "^5.0.1",
+    "react-test-renderer": "^18.2.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "prop-types": "15.8.1",
+    "storybook": "7.6.0",
+    "storybook-react-context": "^0.6.0",
     "serve": "^12.0.1"
   },
   "resolutions": {
     "styled-components": "^5",
-    "babel-loader": "8.1.0"
+    "babel-loader": "^9.1.3"
   }
 }

src/App.tsx

@@ -57,7 +57,7 @@ export function AppComponentWrapper({ anypay, children } : { anypay: IAnypayServ
 
     }
   // eslint-disable-next-line
-  }, [anypay.state.status])
+  }, [anypay.state.status, bsvOption])
 
   return children({ anypay })
 }
@@ -67,7 +67,7 @@ export function AppComponent({ anypay } : { anypay: IAnypayServiceResponse }) {
   return (
     <ThemeProvider theme={theme}>
       <PreloaderTemplate active={!anypay.state.modal?.isOpen }/>
-      <Modal isOpen={anypay.state.modal?.isOpen || false} style={theme.modal}>
+      <Modal isOpen={anypay.state.modal?.isOpen || false} style={theme.modal} ariaHideApp={false}>
         <ModalTemplate>
           <PaymentsComponentContext.Provider value={anypay}>
             {!anypay.state.initialized ?

src/__tests__/App.tsx

@@ -1,5 +1,5 @@
 import { AppComponentWrapper } from 'App'
-import { render } from '@testing-library/react'
+import TestRenderer from 'react-test-renderer'
 
 const anypay = {
   init: jest.fn(),
@@ -12,9 +12,12 @@ const anypay = {
   state: {
     initialized: false,
     status: 'pending',
-    invoiceId: 'zMjwpQ7kk',
+    invoiceId: 'RWQZ8GKnI',
     invoiceReport: {},
-    invoice: {},
+    invoice: {
+      status: ''
+    },
+    paymentOptions: [{currency: 'BSV'}],
     processed: {
       provider: '',
       payload: {},
@@ -34,14 +37,18 @@ const anypay = {
   getCurrencyFromNetwork: jest.fn(),
 }
 
-const renderAppComponentWrapper = ({ children, anypay }: any) => render(
-  <AppComponentWrapper anypay={anypay}>
-    {() => {
-      children()
-      return null
-    }}
-  </AppComponentWrapper>
-)
+const renderAppComponentWrapper = ({ children, anypay }: any) => {
+  TestRenderer.act(()=>{
+    TestRenderer.create(
+      <AppComponentWrapper anypay={anypay} >
+        {() => {
+          children()
+          return null
+        }}
+      </AppComponentWrapper>
+    ) 
+  })
+}
 
 describe('AppComponentWrapper', () => {
   test('render#init', () => {
@@ -63,7 +70,8 @@ describe('AppComponentWrapper', () => {
 
   test('render#poll', () => {
     const children = jest.fn()
-    anypay.state.invoiceId = 'zMjwpQ7kk'
+    anypay.state.invoiceId = 'RWQZ8GKnI'
+    anypay.state.invoice.status = 'unpaid'
     renderAppComponentWrapper({ children, anypay })
     expect(anypay.pollInvoice).toHaveBeenCalled()
   })

src/components/Confirming/ReceiptSummary/ReceiptSummaryInfo.tsx

@@ -35,7 +35,7 @@ function ReceiptSummaryInfoComponent() {
       setPayment(data.payment)
     })
 
-  }, [])
+  }, [anypay.state.invoice?.uid])
 
   if (!payment) { return <div></div> }
 

src/components/Confirming/ReceiptSummary/index.stories.tsx

@@ -4,9 +4,9 @@ import ReceiptSummaryComponent from './index'
 
 export default {
   component: ReceiptSummaryComponent,
-  title: 'Components/ReceiptSummary',
+  title: 'Components/ConfirmingReceiptSummary',
 } as Meta
 
-export const Default: React.VFC<{}> = () => (
+export const Default = () => (
   <ReceiptSummaryComponent />
 )

src/components/Payments/PaymentsOptions/PaymentsOptionsItemHeader.stories.tsx

@@ -1,21 +1,20 @@
 import { Meta } from '@storybook/react'
 
 import PaymentsOptionsItemHeaderComponent from './PaymentsOptionsItemHeader'
-import PaymentsOptionsIconComponent from './PaymentsOptionsIcon'
 
 export default {
   component: PaymentsOptionsItemHeaderComponent,
   title: 'Components/PaymentsOptionsItemHeader',
 } as Meta
 
-export const Default: React.VFC<{}> = () => (
+export const Default = () => (
   <PaymentsOptionsItemHeaderComponent
     title="Payment option"
     subtitle="Payment option description, could be long as well"
   />
 )
 
-export const WithIcon: React.VFC<{}> = () => (
+export const WithIcon = () => (
   <PaymentsOptionsItemHeaderComponent
     title="Payment option"
     subtitle="Payment option description, could be long as well"