fix(bch-wallet-web3-spa): Syncing with upstream repo

2026-09-21 16:52:01 -07:00 · 2025-04-10 19:42:38 -07:00
parent 7ce2a0878b ab02a66058
commit 99a299c2e3
10 changed files with 5764 additions and 85 deletions
@@ -32,7 +32,7 @@
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
+    "test": "npm run lint",
    "eject": "react-app-rewired eject",
    "lint": "standard --env mocha --fix",
    "pub": "node deploy/publish-main.js",
@@ -55,9 +55,24 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "husky": "9.1.7",
    "minimal-slp-wallet": "5.13.1",
    "react-app-rewired": "2.2.1",
+    "semantic-release": "24.2.3",
    "standard": "17.0.0",
    "web3.storage": "4.3.0"
+  },
+  "release": {
+    "publish": [
+      {
+        "path": "@semantic-release/npm",
+        "npmPublish": false
+      }
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
  }
 }
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>BCH Web3 Template</title>
+    <title>SLP DEX Buyer Wallet</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -0,0 +1,20 @@
+/*
+ This component is a View that allows the user to handle configuration
+ settings for the app.
+*/
+
+// Global npm libraries
+import React from 'react'
+import ServerSelectView from './select-server-view'
+
+function ConfigurationView (props) {
+  const { appData } = props
+
+  return (
+    <>
+      <ServerSelectView appData={appData} />
+    </>
+  )
+}
+
+export default ConfigurationView
@@ -0,0 +1,90 @@
+/*
+  This component is a View that allows the user to select a back end server
+  from a list of servers.
+*/
+
+// Global npm libraries
+import React, { useState } from 'react'
+import { Row, Col, Form, Card } from 'react-bootstrap'
+
+function ServerSelectView (props) {
+  const { appData } = props
+  const [selectedServer, setSelectedServer] = useState(appData.serverUrl)
+  const servers = appData.servers
+
+  // Update server when dropdown selection changes
+  const handleServerChange = (event) => {
+    setSelectedServer(event.target.value)
+  }
+
+  const onSaveServer = (serverUrl) => {
+    console.log('server target: ', serverUrl)
+    appData.updateLocalStorage({ serverUrl })
+    window.location.href = '/'
+  }
+
+  return (
+    <>
+      <Card className='m-3'>
+        <Row className='mb-3 mt-3 mx-3'>
+          <Col className='text-end'>
+            <button
+              className='btn btn-primary'
+              style={{ minWidth: '100px' }}
+              onClick={() => onSaveServer(selectedServer)}
+            >
+              Save
+            </button>
+          </Col>
+        </Row>
+
+        <Card.Body>
+          <Row>
+            <Col style={{ textAlign: 'center' }}>
+              <h2>Configuration</h2>
+              <p>
+                This page allows you to change configuration settings for different
+                back end services. This page is for advanced users only.
+              </p>
+            </Col>
+          </Row>
+          <hr />
+
+          <Row className='justify-content-center'>
+            <Col xs={12} md={6}>
+              <p>
+                Select an alternative server below. The app will reload and use
+                the selected server.
+              </p>
+              <Form.Select
+                value={selectedServer}
+                onChange={handleServerChange}
+                className='mb-3'
+              >
+                {servers.map((server, i) => (
+                  <option key={`server-${i}`} value={server.value}>
+                    {server.value === appData.serverUrl ? `${server.label} (current)` : server.label}
+                  </option>
+                ))}
+              </Form.Select>
+            </Col>
+          </Row>
+
+          <Row className='justify-content-center mt-3'>
+            <Col xs={12} md={6} className='text-center'>
+              <button
+                className='btn btn-primary'
+                style={{ minWidth: '100px' }}
+                onClick={() => onSaveServer(selectedServer)}
+              >
+                Save
+              </button>
+            </Col>
+          </Row>
+        </Card.Body>
+      </Card>
+    </>
+  )
+}
+
+export default ServerSelectView
@@ -15,13 +15,14 @@ import GetBalance from './balance'
 import Wallet from './bch-wallet'
 import Placeholder2 from './placeholder2'
 import Placeholder3 from './placeholder3'
-import ServerSelectView from './servers/select-server-view'
-import SelectServerButton from './servers/select-server-button'
+// import ServerSelectView from './servers/select-server-view'
+// import SelectServerButton from './servers/select-server-button'
 import NftsForSale from './nfts-for-sale'
 import BchSend from './bch-send'
 import SlpTokens from './slp-tokens'
 import SweepWif from './sweep/index.js'
 import SignMessage from './sign/index.js'
+import ServerSelectView from './configuration/select-server-view'

 function AppBody (props) {
  // Dependency injection through props
@@ -41,9 +42,10 @@ function AppBody (props) {
        <Route path='/servers' element={<ServerSelectView appData={appData} />} />
        <Route path='/sweep' element={<SweepWif appData={appData} />} />
        <Route path='/sign' element={<SignMessage appData={appData} />} />
+        <Route path='/configuration' element={<ServerSelectView appData={appData} />} />
      </Routes>
      {/** Show in all paths except the servers view */}
-      {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' appData={appData} />}
+      {/* {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' appData={appData} />} */}
    </>
  )
 }
@@ -1,78 +0,0 @@
-/*
-  This component is a View that allows the user to select a back end server
-  from a list of servers.
-*/
-
-// Global npm libraries
-import React from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap'
-
-function ServerSelectView (props) {
-  const { appData } = props
-  const selectedServer = appData.serverUrl // Selected server
-  const servers = appData.servers // List of servers
-
-  // Update location ref after server url changes
-  const handleReloadServer = (event) => {
-    const target = event.target.id
-    console.log('server target: ', target)
-    appData.updateLocalStorage({ serverUrl: target })
-    // Reload the page
-    window.location.href = '/'
-  }
-
-  return (
-    <>
-      <Container>
-        <Row>
-          <Col style={{ textAlign: 'center' }}>
-            <h2>
-              Select Alternative Server
-            </h2>
-            <p>
-              Select an alternative server below. The app will reload and use
-              the selected server.
-            </p>
-          </Col>
-        </Row>
-        <br />
-
-        {
-          /** Map all server data and render a row for each server */
-          servers.map((server, i) => {
-            // Background color for each row
-            const isEven = i % 2
-            const backgroundColor = isEven ? '#eee' : '#fff'
-
-            return (
-              <div key={`server-${i}`}>
-                <Row
-                  style={{
-                    padding: '25px',
-                    backgroundColor
-                  }}
-                >
-                  <Col xs={4}>
-                    <Button
-                      style={{ minWidth: 120 }}
-                      id={server.value}
-                      onClick={handleReloadServer}
-                    >
-                      {selectedServer === server.value ? 'Current' : 'Select'}
-                    </Button>
-                  </Col>
-
-                  <Col xs={8}>
-                    {server.label}
-                  </Col>
-                </Row>
-              </div>
-            )
-          })
-        }
-      </Container>
-    </>
-  )
-}
-
-export default ServerSelectView
@@ -31,7 +31,7 @@ function NavMenu (props) {
      <Navbar expanded={expanded} onToggle={setExpanded} expand='xxxl' bg='dark' variant='dark' style={{ paddingRight: '20px' }}>
        <Navbar.Brand href='#home' style={{ paddingLeft: '20px' }}>
          <Image src={Logo} thumbnail width='50' />{' '}
-          PSF Web3 Demo
+          DEX
        </Navbar.Brand>

        <Navbar.Toggle aria-controls='responsive-navbar-nav' />
@@ -93,6 +93,13 @@ function NavMenu (props) {
            >
              Sign
            </NavLink>
+            <NavLink
+              className={currentPath === '/configuration' ? 'nav-link-active' : 'nav-link-inactive'}
+              to='/configuration'
+              onClick={handleClickEvent}
+            >
+              Configuration
+            </NavLink>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
@@ -11,7 +11,7 @@ const config = {

  // Backup Info that goes into the Footer.
  ghPagesUrl: 'https://permissionless-software-foundation.github.io/react-bootstrap-web3-spa/',
-  ghRepo: 'https://github.com/Permissionless-Software-Foundation/react-bootstrap-web3-spa',
+  ghRepo: 'https://github.com/Permissionless-Software-Foundation/bch-dex-taker-v2',
  radicleUrl: 'https://app.radicle.network/seeds/maple.radicle.garden/rad:git:hnrkd5cjwwb5tzx37hq9uqm5ubon7ee468xcy/remotes/hyyycncbn9qzqmobnhjq9rry6t4mbjiadzjoyhaknzxjcz3cxkpfpc',

  dexServer: 'https://dex-api.fullstack.cash'