From 286a26611bab5ef24f67cc5c3df8dcf91bac5e1d Mon Sep 17 00:00:00 2001 From: RoviDev Date: Thu, 2 Jul 2026 08:25:18 +0200 Subject: [PATCH 1/6] Migrate Footer and BottomLinks to rimble-ui; xDAI orange theme primary Co-authored-by: Cursor --- src/components/BottomLinks.js | 24 +++++++++++++---------- src/components/Footer.js | 37 ++++++++++++++++++++++++++++------- src/theme.js | 2 +- 3 files changed, 45 insertions(+), 18 deletions(-) diff --git a/src/components/BottomLinks.js b/src/components/BottomLinks.js index 1d28d4763..085878302 100644 --- a/src/components/BottomLinks.js +++ b/src/components/BottomLinks.js @@ -1,16 +1,20 @@ import React from 'react'; import { Scaler } from "dapparatus"; +import { Box, OutlineButton } from 'rimble-ui'; import i18n from '../i18n'; -export default ({changeView}) => { + +export default ({ changeView }) => { return ( -
- - + + + { changeView('advanced'); }} + > + {i18n.t('advance')} + -
- ) + + ); }; diff --git a/src/components/Footer.js b/src/components/Footer.js index 78160e6e2..f2c7489a7 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,11 +1,34 @@ import React from 'react'; +import { Box, Text } from 'rimble-ui'; + +const alertColors = { + success: { bg: '#e6f7ee', color: '#1a7f4b' }, + warning: { bg: '#fff8e6', color: '#9a6b00' }, + danger: { bg: '#fdecea', color: '#b42318' }, + info: { bg: '#eef4ff', color: '#175cd3' }, +}; + +export default ({ alert, changeAlert }) => { + const palette = alertColors[alert.type] || alertColors.info; -export default ({alert, changeAlert}) => { return ( -
changeAlert(null)}> -
- {alert.message} -
-
- ) + changeAlert(null)} + textAlign="center" + p={3} + > + + {alert.message} + + + ); }; diff --git a/src/theme.js b/src/theme.js index 7d25f6105..34bc90a9e 100644 --- a/src/theme.js +++ b/src/theme.js @@ -40,7 +40,7 @@ export default { disabled: 0.4 }, colors: { - primary: '#4E3FCE', + primary: '#FF6700', blue: '#007ce0', navy: '#004175', copyColor: '#3F3D4B', From 776df947ac091af41a4d0e99c457da57f4bed1a6 Mon Sep 17 00:00:00 2001 From: RoviDev Date: Thu, 2 Jul 2026 08:28:48 +0200 Subject: [PATCH 2/6] rimble-ui: migrate ShareLink, CashOut, BurnWallet, Receipt, SendByScan Co-authored-by: Cursor --- src/components/BurnWallet.js | 71 ++++++++-------- src/components/CashOut.js | 75 ++++++++--------- src/components/Receipt.js | 155 ++++++++++++++--------------------- src/components/SendByScan.js | 18 ++-- src/components/ShareLink.js | 68 ++++++--------- 5 files changed, 171 insertions(+), 216 deletions(-) diff --git a/src/components/BurnWallet.js b/src/components/BurnWallet.js index 8c1950f0b..e90a42e83 100644 --- a/src/components/BurnWallet.js +++ b/src/components/BurnWallet.js @@ -1,39 +1,44 @@ import React from 'react'; import Ruler from "./Ruler"; -import Balance from "./Balance"; import i18n from '../i18n'; - - - -export default ({mainStyle, address, balance, burnWallet, goBack, dollarDisplay}) => { - +import { + Box, + Button, + Flex, + Text +} from 'rimble-ui'; + +export default ({ mainStyle, goBack, burnWallet }) => { return ( - -
-
+ + {i18n.t('burn_wallet.burn_private_key_question')} -
-
+ + {i18n.t('burn_wallet.disclaimer')} -
-
- -
- -
- -
- -
- -
-
-
- -
- ) -} + + + + + + + + + + + + ); +}; diff --git a/src/components/CashOut.js b/src/components/CashOut.js index 525f59569..0c9c08e58 100644 --- a/src/components/CashOut.js +++ b/src/components/CashOut.js @@ -1,10 +1,14 @@ -import React, { Component } from 'react'; -import { Scaler } from "dapparatus"; -let interval +import React, { Component } from 'react'; +import { + Box, + Button, + Field, + Input +} from 'rimble-ui'; -const OFFRAMPACCOUNT = "0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF" +const OFFRAMPACCOUNT = "0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF"; -class App extends Component { +class CashOut extends Component { constructor(props) { super(props); this.state = {}; @@ -16,40 +20,33 @@ class App extends Component { render() { return ( -
-
- -
-
- - - -
-
-
$
-
- + + + { this.amountInput = input; }} - onChange={event => this.updateState('amount', event.target.value)} /> -
-
-
- - -
-
- ) + onChange={event => this.updateState('amount', event.target.value)} + /> + + + + + ); } } -export default App; + +export default CashOut; diff --git a/src/components/Receipt.js b/src/components/Receipt.js index 12bf72089..533feb517 100644 --- a/src/components/Receipt.js +++ b/src/components/Receipt.js @@ -1,40 +1,28 @@ import React from 'react'; -import Ruler from "./Ruler"; import Badge from './Badge'; -import Balance from "./Balance"; -import {CopyToClipboard} from "react-copy-to-clipboard"; import { Blockie } from "dapparatus"; -import RecentTransactions from './RecentTransactions'; -import { scroller } from 'react-scroll' import i18n from '../i18n'; import axios from 'axios'; -const QRCode = require('qrcode.react'); +import { + Box, + Flex, + Icon, + Link, + Text +} from 'rimble-ui'; +const BockieSize = 12; -const BockieSize = 12 - -export default class Receive extends React.Component { - - constructor(props) { - super(props); - let initialState = { - } - } - componentDidMount(){ - console.log("RECEIPT LOADED",this.props) - if(this.props.receipt && this.props.receipt.daiposOrderId){ - console.log("This was a daipos Order... ping their server for them...") - // https://us-central1-daipos.cloudfunctions.net/transactionBuffer?orderId=0JFmycULnk9kAboK5ESg&txHash=0x8c831cd5cbc8786982817e43a0a77627ad0b12eaa92feff97fb3b7e91c263b1c&networkId=100 - let url = "https://us-central1-daipos.cloudfunctions.net/transactionBuffer?orderId="+this.props.receipt.daiposOrderId+"&txHash="+this.props.receipt.result.transactionHash+"&networkId=100" - console.log("url:",url) - axios.get(url) - .then((response)=>{ - console.log("Finished hitting the Ching servers:",response) - }) +export default class Receipt extends React.Component { + componentDidMount() { + if (this.props.receipt && this.props.receipt.daiposOrderId) { + let url = "https://us-central1-daipos.cloudfunctions.net/transactionBuffer?orderId=" + + this.props.receipt.daiposOrderId + + "&txHash=" + this.props.receipt.result.transactionHash + + "&networkId=100"; + axios.get(url); } - console.log("CHECKING PARAMS:",this.props.receipt.params) - if(this.props.receipt && this.props.receipt.params && this.props.receipt.params.callback){ - console.log("Redirecting to ",this.props.receipt.params.callback,"with data:",this.props.receipt) + if (this.props.receipt && this.props.receipt.params && this.props.receipt.params.callback) { let returnObject = { to: this.props.receipt.to, from: this.props.receipt.from, @@ -42,80 +30,61 @@ export default class Receive extends React.Component { transactionHash: this.props.receipt.result.transactionHash, status: this.props.receipt.result.status, data: this.props.receipt.result.v, - } - console.log("returnObject",returnObject) - setTimeout(()=>{ - window.location = this.props.receipt.params.callback+"?receipt="+(encodeURI(JSON.stringify(returnObject))) - },2500) + }; + setTimeout(() => { + window.location = this.props.receipt.params.callback + "?receipt=" + (encodeURI(JSON.stringify(returnObject))); + }, 2500); } } - render() { - let {receipt,buttonStyle,ERC20TOKEN,address, balance, changeView, dollarDisplay,account} = this.props - let message = "" + render() { + let { receipt, dollarDisplay } = this.props; - let sendAmount = "" - if(receipt.badge){ + let sendAmount; + if (receipt.badge) { sendAmount = ( -
- -
- ) - }else{ + + ); + } else { sendAmount = ( -
- -{dollarDisplay(receipt.amount)}-> -
- ) - } - - if(receipt.message){ - message = ( -
-
- {receipt.message} -
-
- ) + + - + {dollarDisplay(receipt.amount)} + -> + + ); } return ( -
-
-
-
- -
-
+ + + + -
-
- -
-
- {sendAmount} -
-
- -
-
- {message} + + + + + + {sendAmount} + + + + + + + {receipt.message && ( + + {receipt.message} + + )} -
- -
- ) + + { this.props.goBack(); }}> + {i18n.t('done')} + + + + ); } } diff --git a/src/components/SendByScan.js b/src/components/SendByScan.js index d44c03656..25bd81772 100644 --- a/src/components/SendByScan.js +++ b/src/components/SendByScan.js @@ -5,6 +5,7 @@ import QrCode from 'qrcode-reader'; import qrimage from '../qrcode.png'; import RNMessageChannel from 'react-native-webview-messaging'; import i18n from "../i18n"; +import { Button, Box } from 'rimble-ui'; var Jimp = require("jimp"); let interval class SendByScan extends Component { @@ -230,16 +231,13 @@ class SendByScan extends Component {
-
- -
{i18n.t('send_by_scan.capture')}
-
-
- -
-
+
+
{i18n.t('send_by_scan.capture')}
+ + +
Lay QR flat and take a picture of it from a distance. diff --git a/src/components/ShareLink.js b/src/components/ShareLink.js index f961f6df0..7e6307f47 100644 --- a/src/components/ShareLink.js +++ b/src/components/ShareLink.js @@ -1,63 +1,49 @@ import React from 'react'; import Ruler from "./Ruler"; -import Balance from "./Balance"; -import Blockies from 'react-blockies'; -import {CopyToClipboard} from 'react-copy-to-clipboard'; -import { Scaler, Button } from "dapparatus" -var QRCode = require('qrcode.react'); +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { + Box, + Flex, + Input, + QR as QRCode +} from 'rimble-ui'; export default class ShareLink extends React.Component { - constructor(props) { super(props); this.state = { copied: false - } + }; } - render() { - let { canSend } = this.state; - let port = window.location.port - if(port && port!="80"){ - port=":"+port - }else{ - port="" + render() { + let port = window.location.port; + if (port && port !== "80") { + port = ":" + port; + } else { + port = ""; } - let url = window.location.protocol + "//" + window.location.hostname+port; - let element = ""; + let url = window.location.protocol + "//" + window.location.hostname + port; let qrValue = url + "/" + this.props.sendLink + ";" + this.props.sendKey; - let extraDisplay = ""; - - let qrSize = Math.min(document.documentElement.clientWidth,512)-90 - - - if(this.state.copied){ - extraDisplay="Copied Link!" - } + let qrSize = Math.min(document.documentElement.clientWidth, 512) - 90; return (
{ - this.props.changeAlert({type: 'success', message: 'Link copied to clipboard'}) + this.props.changeAlert({ type: 'success', message: 'Link copied to clipboard' }); }}> -
-
- -
- -
-
- -
- -
-
-
- -
+ + + + + + + + +
- ) + ); } } From a4d20cb127bf0a0b819e2449f22b49d4f69c8a64 Mon Sep 17 00:00:00 2001 From: RoviDev Date: Thu, 2 Jul 2026 08:33:46 +0200 Subject: [PATCH 3/6] rimble-ui: migrate Vendor, Admin, Vendors, RecentTransactions, Advanced, WithdrawFromPrivate Co-authored-by: Cursor --- src/components/Admin.js | 355 ++++++++++++-------------- src/components/Advanced.js | 295 ++++++++++----------- src/components/RecentTransactions.js | 246 ++++++++---------- src/components/Vendor.js | 335 ++++++++++++------------ src/components/Vendors.js | 353 ++++++++++++------------- src/components/WithdrawFromPrivate.js | 149 +++++------ 6 files changed, 791 insertions(+), 942 deletions(-) diff --git a/src/components/Admin.js b/src/components/Admin.js index 10fa9ad3a..db0a79371 100644 --- a/src/components/Admin.js +++ b/src/components/Admin.js @@ -1,240 +1,199 @@ import React from 'react'; import { Scaler } from "dapparatus"; import Blockies from 'react-blockies'; -import Ruler from "./Ruler"; -import {CopyToClipboard} from "react-copy-to-clipboard"; import i18next from 'i18next'; -const QRCode = require('qrcode.react'); - -export default class Advanced extends React.Component { - +import { + Box, + Button, + Card, + Field, + Flex, + Input +} from 'rimble-ui'; + +export default class Admin extends React.Component { constructor(props) { super(props); this.state = { changingAllowed: {}, - } + }; } - render(){ - let {buttonStyle,contracts,tx,web3,vendors} = this.props - let vendorBlockie = "" - if(this.state.newVendor){ - vendorBlockie = ( - - ) - } + render() { + let { buttonStyle, contracts, tx, web3, vendors } = this.props; - let adminBlockie = "" - if(this.state.newAdmin){ - adminBlockie = ( - - ) + let vendorBlockie = ""; + if (this.state.newVendor) { + vendorBlockie = ; } - let vendorDisplay = [] - for(let v in vendors){ + let vendorDisplay = []; + for (let v in vendors) { let vendorButton = ( - - ) - - - let vendorAllowedDisplay = "" - if(this.state.changingAllowed[v]){ - vendorAllowedDisplay = ( - - ) - }else if(vendors[v].isAllowed){ - vendorAllowedDisplay = ( - - ) - }else{ - vendorAllowedDisplay = ( - - ) + + ); + + let vendorAllowedDisplay; + if (this.state.changingAllowed[v]) { + vendorAllowedDisplay = ; + } else if (vendors[v].isAllowed) { + vendorAllowedDisplay = ; + } else { + vendorAllowedDisplay = ; } let vendorIsAllowed = ( - - ) - - - let vendorActiveDisplay = "" - if(this.state.changingAllowed[v]){ - vendorActiveDisplay = ( - - ) - }else if(vendors[v].isActive){ - vendorActiveDisplay = ( - - ) - }else{ - vendorActiveDisplay = ( - - ) + + ); + + let vendorActiveDisplay; + if (this.state.changingAllowed[v]) { + vendorActiveDisplay = ; + } else if (vendors[v].isActive) { + vendorActiveDisplay = ; + } else { + vendorActiveDisplay = ; } let vendorIsActive = ( - - ) - - + + ); vendorDisplay.push( -
-
- -
-
+ + + + + {vendorButton} -
-
+ + {vendorIsActive} -
-
+ + {vendorIsAllowed} -
-
- ) - } - - /* - let addAdminText = ( - - {i18next.t('admin.add_admin')} - - ) - if(this.state.addingAdmin){ - addAdminText = ( - - {i18next.t('admin.adding')} - - ) - }*/ - - let addVendorText = ( - - {i18next.t('admin.add_vendor')} - - ) - if(this.state.addingVendor){ - addVendorText = ( - - {i18next.t('admin.adding')} - - ) + + + ); } + let addVendorText = this.state.addingVendor + ? <> {i18next.t('admin.adding')} + : <> {i18next.t('admin.add_vendor')}; return ( -
- + {vendorDisplay} -
-
+ + {vendorBlockie} -
-
- this.setState({newVendor:event.target.value})} /> -
-
- this.setState({newVendorName:event.target.value})} /> -
-
- -
-
- -
- ) + + + + this.setState({ newVendor: event.target.value })} + /> + + + + + this.setState({ newVendorName: event.target.value })} + /> + + + + + + + + ); } } -/* -
-
- {adminBlockie} -
-
- this.setState({newAdmin:event.target.value})} /> -
-
- -
-
- */ diff --git a/src/components/Advanced.js b/src/components/Advanced.js index 74b54ad16..ac3d22491 100644 --- a/src/components/Advanced.js +++ b/src/components/Advanced.js @@ -7,6 +7,10 @@ import { Button, OutlineButton, Input, + Flex, + Box, + Text, + Card, QR as QRCode } from 'rimble-ui' @@ -30,58 +34,56 @@ export default class Advanced extends React.Component { let qrSize = Math.min(document.documentElement.clientWidth,512)-90 let qrValue = url+"/#"+privateKey let privateKeyQrDisplay = "" - if(this.state.privateKeyQr){ + if (this.state.privateKeyQr) { privateKeyQrDisplay = ( -
-
- -
-
- ) + + + + + + ); } - let showingQr = "" - if(this.state.showingQr){ + let showingQr = ""; + if (this.state.showingQr) { showingQr = ( -
-
- -
-
- ) + + + + + + ); } + let inputPrivateEyeButton = null; + let inputPrivateWidth = 4 / 12; - let inputPrivateEyeButton = "" - let inputPrivateSize = "col-4 p-1" - - if(this.state.newPrivateKey){ + if (this.state.newPrivateKey) { inputPrivateEyeButton = ( -
- -
- ) - }else{ - inputPrivateSize = "col-6 p-1" + + ); + } else { + inputPrivateWidth = 6 / 12; } let inputPrivateKeyRow = ( -
-
+ + this.setState({newPrivateKey:event.target.value})} + value={this.state.newPrivateKey || ''} + onChange={event => this.setState({ newPrivateKey: event.target.value })} /> -
+ {inputPrivateEyeButton} -
+ -
-
- ) - + + + ); - let inputSeedEyeButton = "" - let inputSeedSize = "col-4 p-1" + let inputSeedEyeButton = null; + let inputSeedWidth = 4 / 12; - if(this.state.newSeedPhrase){ + if (this.state.newSeedPhrase) { inputSeedEyeButton = ( -
- -
- ) - }else{ - inputSeedSize = "col-6 p-1" + + ); + } else { + inputSeedWidth = 6 / 12; } let inputSeedRow = ( -
-
+ + this.setState({newSeedPhrase:event.target.value})} + value={this.state.newSeedPhrase || ''} + onChange={event => this.setState({ newSeedPhrase: event.target.value })} /> -
+ {inputSeedEyeButton} -
+ -
-
- ) + + + ); return ( -
- - - -
- + + + Learn More + + + + + + {i18n.t('code')} + + + + + + + + + {i18n.t('about')} + + + + + + +
{privateKey && !isVendor && -
-
Private Key
-
- -
- -
- - -
changeAlert({type: 'success', message: 'Private Key copied to clipboard'})}> - -
- - -
-
+ + + changeAlert({ type: 'success', message: 'Private Key copied to clipboard' })}> + + + + {privateKeyQrDisplay} -
- -
+ } {privateKey && -
-
-
- -
-
-
-
} - - -
Create Account
+ +
+ + } + Create Account {inputPrivateKeyRow} - {inputSeedRow} -
-
Extra Tools
+
+ Extra Tools -
-
+ + this.setState({newQr:event.target.value})} + value={this.state.newQr || ''} + onChange={event => this.setState({ newQr: event.target.value })} /> -
-
- -
-
+ + {showingQr} {isVendor && -
-
-
- -
-
-
+ + + } - -
- ) + + ); } } diff --git a/src/components/RecentTransactions.js b/src/components/RecentTransactions.js index dfbbbe713..de32ac52e 100644 --- a/src/components/RecentTransactions.js +++ b/src/components/RecentTransactions.js @@ -2,182 +2,146 @@ import React from 'react'; import { Blockie } from "dapparatus"; import Ruler from "./Ruler"; import { Scaler } from "dapparatus"; -import { Flex, Text, Image } from "rimble-ui"; +import { Box, Button, Flex, Icon, Text } from "rimble-ui"; -export default ({dollarDisplay, view, max, buttonStyle, ERC20TOKEN, vendorName, address, recentTxs, block, changeView}) => { - let txns = [] - let count=0 - if(!max) max=9999 - for(let r in recentTxs){ - let thisValue = parseFloat(recentTxs[r].value) - if(thisValue>0.0){ +export default ({ dollarDisplay, view, max, buttonStyle, ERC20TOKEN, address, recentTxs, block, changeView }) => { + let txns = []; + let count = 0; + if (!max) max = 9999; - let extraUp = 0 - if(view=="receive"){ - extraUp=-10 - } - let extraIcon = "" - if(recentTxs[r].data){ - extraIcon = ( -
- -
- ) - }else{ - extraIcon = ( -
- -
- ) - } + for (let r in recentTxs) { + let thisValue = parseFloat(recentTxs[r].value); + if (thisValue > 0.0) { + let extraUp = view === "receive" ? -10 : 0; + let extraIcon = ( + + - ) - - let available = ( - - ) - if(!prod.isAvailable){ - available = ( - - ) - } - - let opacity = 1.0 - if(!prod.isAvailable){ - opacity = 0.5 - } + let opacity = prod.isAvailable ? 1.0 : 0.5; products.push( -
-
- {web3.utils.hexToUtf8(prod.name)} -
-
- {dollarDisplay(web3.utils.fromWei(prod.cost,'ether'))} -
-
- {productIsActive} -
-
- ) + + + {web3.utils.hexToUtf8(prod.name)} + + + {dollarDisplay(web3.utils.fromWei(prod.cost, 'ether'))} + + + + + + ); } } - let venderButtonText = "" - if(this.state.changingActive){ - venderButtonText = ( -
- {i18n.t('vendor.updating')} -
- ) - }else if(vendor.isActive){ - venderButtonText = ( -
- {i18n.t('vendor.open')} -
- ) - }else{ - venderButtonText = ( -
- {i18n.t('vendor.closed')} -
- ) - } - - let addProductText = ( - - {i18n.t('vendor.add_product')} - - ) - - if(this.state.addingProduct){ - addProductText = ( - - {i18n.t('vendor.adding')} - - ) + let venderButtonText; + if (this.state.changingActive) { + venderButtonText = <> {i18n.t('vendor.updating')}; + } else if (vendor.isActive) { + venderButtonText = <> {i18n.t('vendor.open')}; + } else { + venderButtonText = <> {i18n.t('vendor.closed')}; } + let addProductText = this.state.addingProduct + ? <> {i18n.t('vendor.adding')} + : <> {i18n.t('vendor.add_product')}; return ( -
-
-
-

{web3.utils.hexToUtf8(vendor.name)}

-
-
- -
-
+ + + + {web3.utils.hexToUtf8(vendor.name)} + + + + + + {products} -
-
- this.setState({newProductName:event.target.value})} /> -
-
-
-
-
$
-
- this.setState({newProductAmount:event.target.value})} /> -
-
-
- -
-
-
- ) + + + + this.setState({ newProductName: event.target.value })} + /> + + + + + this.setState({ newProductAmount: event.target.value })} + /> + + + + + + + + ); } } diff --git a/src/components/Vendors.js b/src/components/Vendors.js index 8e9569b4a..48a015f5e 100644 --- a/src/components/Vendors.js +++ b/src/components/Vendors.js @@ -1,227 +1,212 @@ import React from 'react'; -import { Scaler, Events } from "dapparatus"; +import { Scaler } from "dapparatus"; import Blockies from 'react-blockies'; -import Ruler from "./Ruler"; -import {CopyToClipboard} from "react-copy-to-clipboard"; -const QRCode = require('qrcode.react'); - -let interval - -export default class Advanced extends React.Component { - +import { + Box, + Button, + Card, + Flex, + Icon, + QR as QRCode, + Text +} from 'rimble-ui'; + +let interval; + +export default class Vendors extends React.Component { constructor(props) { super(props); - let vendor = false - if(window.location.pathname.indexOf("/vendors;")==0){ - vendor = window.location.pathname.replace("/vendors;","") - window.history.pushState({},"", "/"); + let vendor = false; + if (window.location.pathname.indexOf("/vendors;") === 0) { + vendor = window.location.pathname.replace("/vendors;", ""); + window.history.pushState({}, "", "/"); } this.state = { vendor: vendor, vendorObject: false, loading: false, showQR: {} - } + }; } - componentDidMount(){ - interval = setInterval(this.poll.bind(this),3000) - setTimeout(this.poll.bind(this),444) + + componentDidMount() { + interval = setInterval(this.poll.bind(this), 3000); + setTimeout(this.poll.bind(this), 444); } - componentWillUnmount(){ - clearInterval(interval) + + componentWillUnmount() { + clearInterval(interval); } - async poll(){ - let id = 0 - if(this.state.vendor){ - if(!this.state.vendorObject){ - let vendorData = await this.props.contracts[this.props.ERC20VENDOR].vendors(this.state.vendor).call() - console.log("vendorData",vendorData) - vendorData.name = this.props.web3.utils.hexToUtf8(vendorData.name) - this.setState({vendorObject:vendorData}) - } - console.log("Looking up products for vendor ",this.state.vendor) - let products = []//this.state.products - if(!products){ - products = [] - } - let found = true - while(found){ - let nextProduct = await this.props.contracts[this.props.ERC20VENDOR].products(this.state.vendor,id).call() - if(nextProduct.exists){ - products[id++] = nextProduct - }else{ - found=false - } - } - this.setState({products,loading:false}) - }else{ - - this.setState({loading:false}) + + async poll() { + let id = 0; + if (this.state.vendor) { + if (!this.state.vendorObject) { + let vendorData = await this.props.contracts[this.props.ERC20VENDOR].vendors(this.state.vendor).call(); + vendorData.name = this.props.web3.utils.hexToUtf8(vendorData.name); + this.setState({ vendorObject: vendorData }); + } + let products = []; + let found = true; + while (found) { + let nextProduct = await this.props.contracts[this.props.ERC20VENDOR].products(this.state.vendor, id).call(); + if (nextProduct.exists) { + products[id++] = nextProduct; + } else { + found = false; + } + } + this.setState({ products, loading: false }); + } else { + this.setState({ loading: false }); } } - render(){ - let {mainStyle,contracts,tx,web3,vendors,dollarDisplay,vendorObject} = this.props - let {vendor} = this.state + render() { + let { mainStyle, vendors, dollarDisplay, vendorObject } = this.props; + let { vendor } = this.state; - let url = window.location.protocol+"//"+window.location.hostname - if(window.location.port&&window.location.port!=80&&window.location.port!=443){ - url = url+":"+window.location.port + let url = window.location.protocol + "//" + window.location.hostname; + if (window.location.port && window.location.port !== 80 && window.location.port !== 443) { + url = url + ":" + window.location.port; } - let correctVendorObject = this.state.vendorObject - if(!correctVendorObject) correctVendorObject = vendorObject + let correctVendorObject = this.state.vendorObject || vendorObject; + let products = []; + let vendorDisplay = []; - let products = [] - let vendorDisplay = [] - if(vendor){ - if(correctVendorObject){ + if (vendor) { + if (correctVendorObject) { products.push( -
-
- -
{this.setState({vendor:false})}}> - -
- -
- + + + { this.setState({ vendor: false }); }} + > + + + + {correctVendorObject.name} -
- -
-
- ) + + + + ); } - let qrSize = Math.min(document.documentElement.clientWidth,512)-90 - - let correctProducts = this.state.products - if(!correctProducts) correctProducts=this.props.products - - for(let p in correctProducts){ - let prod = correctProducts[p] - if(prod.exists&&prod.isAvailable){ - - let extraQR = "" - - let theName = web3.utils.hexToUtf8(prod.name) - let theAmount = web3.utils.fromWei(prod.cost,'ether') - - let productLocation = "/"+vendor+";"+theAmount+";"+theName.replaceAll("#","%23").replaceAll(";","%3B").replaceAll(":","%3A").replaceAll("/","%2F")+";"+correctVendorObject.name+":" - - productLocation = encodeURI(productLocation) - - let qrValue = url+productLocation - - let toggleQR = () =>{ - let {showQR} = this.state - showQR[p] = !showQR[p] - this.setState({showQR}) - } - - if(this.state.showQR[p]){ + let qrSize = Math.min(document.documentElement.clientWidth, 512) - 90; + let correctProducts = this.state.products || this.props.products; + + for (let p in correctProducts) { + let prod = correctProducts[p]; + if (prod.exists && prod.isAvailable) { + let theName = this.props.web3.utils.hexToUtf8(prod.name); + let theAmount = this.props.web3.utils.fromWei(prod.cost, 'ether'); + let productLocation = "/" + vendor + ";" + theAmount + ";" + theName.replace(/#/g, "%23").replace(/;/g, "%3B").replace(/:/g, "%3A").replace(/\//g, "%2F") + ";" + correctVendorObject.name + ":"; + productLocation = encodeURI(productLocation); + let qrValue = url + productLocation; + + let toggleQR = () => { + let showQR = { ...this.state.showQR }; + showQR[p] = !showQR[p]; + this.setState({ showQR }); + }; + + let extraQR = null; + if (this.state.showQR[p]) { extraQR = ( -
-
- -
{correctVendorObject.name}
{theName}: {dollarDisplay(theAmount)}
-
-
- ) - } - - - let available = ( - - ) - if(!prod.isAvailable){ - available = ( - - ) + + + + + {correctVendorObject.name} {theName}: {dollarDisplay(theAmount)} + + + + ); } products.push( -
-
- -
-
- {theName} -
-
- ${dollarDisplay(theAmount)} -
-
- -
+ + + + + + {theName} + ${dollarDisplay(theAmount)} + + + + {extraQR} -
- ) + + ); } } - - let qrValue = url+"/vendors;"+this.state.vendor - if(vendorObject){ + if (vendorObject) { + let qrValue = url + "/vendors;" + this.state.vendor; products.push( -
-
- -
{vendorObject.name}
-
-
- ) + + + + {vendorObject.name} + + + ); } - - }else{ - for(let v in vendors){ - if(vendors[v].isAllowed&&vendors[v].isActive){ - - let vendorButton = ( - - ) + } else { + for (let v in vendors) { + if (vendors[v].isAllowed && vendors[v].isActive) { vendorDisplay.push( -
-
- -
-
- {vendorButton} -
-
- ) + + + + + + + + + ); } } } - - return ( -
- - {vendorDisplay} - {products} - -
- ) + + {vendorDisplay} + {products} + + ); } } diff --git a/src/components/WithdrawFromPrivate.js b/src/components/WithdrawFromPrivate.js index 9e329bd0b..507bb7b35 100644 --- a/src/components/WithdrawFromPrivate.js +++ b/src/components/WithdrawFromPrivate.js @@ -7,6 +7,9 @@ import Blockies from 'react-blockies'; import i18n from '../i18n'; import { Button, + Box, + Field, + Flex, Input } from 'rimble-ui' @@ -128,94 +131,80 @@ export default class SendToAddress extends React.Component { if(prod.isAvailable){ let costInDollars = this.props.web3.utils.fromWei(prod.cost,'ether') products.push( -
-
- -
-
- ) + + + + ); } } } if(products.length>0){ products.push( -
-
- -
-
- ) + + + + ); } return ( -
-
-
-
- - -
- -
-
- { } -
-
-
- - ${this.state.fromBalance} - -
-
-
- - -
- this.updateState('amount', event.target.value)} /> -
- {products} -
- -
-
- ) + + + + + + + + + + + + + ${this.state.fromBalance} + + + + + + + this.updateState('amount', event.target.value)} + /> + + + {products} + + + + ); } } From 4fc723da841117449064d4a598e1c5b7578802bc Mon Sep 17 00:00:00 2001 From: RoviDev Date: Thu, 2 Jul 2026 08:34:48 +0200 Subject: [PATCH 4/6] rimble-ui: migrate History chat form and action bar Co-authored-by: Cursor --- src/components/History.js | 294 +++++++++++++++++--------------------- 1 file changed, 128 insertions(+), 166 deletions(-) diff --git a/src/components/History.js b/src/components/History.js index fe9c1bd57..45ee6bc52 100644 --- a/src/components/History.js +++ b/src/components/History.js @@ -8,6 +8,12 @@ import {toArray} from 'react-emoji-render'; import Ruler from "./Ruler"; import {CopyToClipboard} from "react-copy-to-clipboard"; import i18next from 'i18next'; +import { + Box, + Button, + Flex, + Input +} from 'rimble-ui'; const QRCode = require('qrcode.react'); const Transaction = require("ethereumjs-tx") const EthUtil = require('ethereumjs-util') @@ -284,196 +290,154 @@ export default class History extends React.Component { } } - let sendChatButton = "" - let sendFundsButton = "" - if(this.state.sendingChat){ + let sendChatButton; + if (this.state.sendingChat) { sendChatButton = ( - - ) - sendFundsButton = ( - - ) - }else{ + + ); + } else { sendChatButton = ( - - ) - sendFundsButton = ( - - ) + - ) - }else if(this.props.metaAccount){ + + ); + } else if (this.props.metaAccount) { waveButton = ( - - ) - }else{ + + ); + } else { waveButton = ( - - ) + + ); } - /* -
- -
- */ - let sendForm - - let placeholder="unencrypted public chat..." - if(this.state["publicKey_"+target]){ - placeholder = "encrypted chat..." + let sendForm; + let placeholder = "unencrypted public chat..."; + if (this.state["publicKey_" + target]) { + placeholder = "encrypted chat..."; } let chatInput = ( - { this.nameInput = input; }} onKeyDown={this.onKeyDown} - onChange={event => this.setState({newChat:event.target.value})} + onChange={event => this.setState({ newChat: event.target.value })} /> - ) + ); - if(this.state.sendingFunds){ + if (this.state.sendingFunds) { sendForm = ( -
-
-
-
{ - this.setState({sendingFunds:false},()=>{ - setTimeout(()=>{ - this.nameInput.focus(); - },250) - }) - }}> -
$
-
- { this.amountInput = input; }} - onChange={event => this.setState({newChatAmount:event.target.value})} - /> -
-
-
- {chatInput} -
-
- {sendChatButton} -
-
- ) - }else{ + + + { this.amountInput = input; }} + onChange={event => this.setState({ newChatAmount: event.target.value })} + onClick={() => { + this.setState({ sendingFunds: false }, () => { + setTimeout(() => { this.nameInput.focus(); }, 250); + }); + }} + /> + + {chatInput} + {sendChatButton} + + ); + } else { sendForm = ( -
-
- -
-
- {chatInput} -
-
- {sendChatButton} -
-
- ) + + +