fix: make demo work on helder with nginx basename to /demo

apps/web/package.json

@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "description": "Uniswap Interface",
   "license": "GPL-3.0-or-later",
+  "homepage": "/demo",
   "scripts": {
     "ajv": "node scripts/compile-ajv-validators.js",
     "check:deps:usage": "depcheck",
@@ -11,11 +12,11 @@
     "i18n:upload": "./scripts/crowdin.sh upload",
     "i18n:download": "./scripts/crowdin.sh download",
     "i18n:download:if-missing": "ONLY_IF_MISSING=1 ./scripts/crowdin.sh download",
-    "start": "craco start",
-    "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 REACT_APP_SKIP_CSP=1 npx wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2023-08-01 --proxy=3001 --port=3000 -- yarn start",
+    "start": "PORT=3005 craco start",
+    "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3005 REACT_APP_SKIP_CSP=1 npx wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2023-08-01 --proxy=3005 --port=3006 -- yarn start",
     "build:production": "yarn i18n:download:if-missing && craco build",
     "analyze": "source-map-explorer 'build/static/js/*.js' --no-border-checks --gzip",
-    "serve": "serve build -s -l 3000",
+    "serve": "serve build -s -l 3005",
     "format": "../../scripts/prettier.sh",
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "lint:fix": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ . --fix",

apps/web/src/components/NavBar/CompanyMenu/index.tsx

@@ -54,7 +54,7 @@ export function CompanyMenu() {
 
   return (
     // <NavIcon width="48" height="48" data-testid="uniswap-logo" />
-    <img src="/images/demo_group.png" alt="Bolt Demo" style={{ width: 'auto', height: '35px' }} />
+    <img src="/demo/images/demo_group.png" alt="Bolt Demo" style={{ width: 'auto', height: '35px' }} />
 
     // <Popover ref={popoverRef} placement="bottom" hoverable stayInFrame allowFlip onOpenChange={setIsOpen}>
     //   <Popover.Trigger>

apps/web/src/hooks/useSendCallback.ts

@@ -136,11 +136,11 @@ export function useSendCallback({
                   throw new UserRejectedRequestError(`Transfer failed: User rejected signature`)
                 } else if (error.message.includes('lookahead')) {
                   setNoProposerInTheLookahead(true)
-                  sleep(5_000).then(() => setNoProposerInTheLookahead(false))
+                  sleep(10_000).then(() => setNoProposerInTheLookahead(false))
                   throw error
                 } else if (error.message.includes('nonce')) {
                   setInternalError('nonce mismatch')
-                  sleep(5_000).then(() => setInternalError(undefined))
+                  sleep(10_000).then(() => setInternalError(undefined))
                   throw error
                 } else {
                   throw error
@@ -166,7 +166,7 @@ export function useSendCallback({
 
           // show the preconfirmed popup for 5s
           sleep(200).then(() => setPreconfirmedAtSlot({ slot: response.slot, latency: response.latency }))
-          sleep(5_500).then(() => setPreconfirmedAtSlot(undefined))
+          sleep(10_500).then(() => setPreconfirmedAtSlot(undefined))
 
           // now start polling for actual inclusion in a block
           provider!.waitForTransaction(txHash).then(async (receipt) => {

apps/web/src/index.tsx

@@ -126,7 +126,7 @@ createRoot(container).render(
     <HelmetProvider>
       <Provider store={store}>
         <QueryClientProvider client={queryClient}>
-          <Router>
+          <Router basename="/demo">
             <LanguageProvider>
               <Web3Provider>
                 <StatsigProvider>

apps/web/src/pages/App/Layout.tsx

@@ -60,12 +60,12 @@ export function AppLayout() {
           zIndex: 1,
           objectFit: 'cover',
         }}
-        src="/images/background.png"
+        src="/demo/images/background.png"
         alt="background"
       />
 
       <img
-        src="/images/bolt_logo.png"
+        src="/demo/images/bolt_logo.png"
         alt="Bolt Logo"
         style={{ width: 'auto', height: '35px', position: 'fixed', bottom: '15px', left: '15px', zIndex: 4000 }}
       />

apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx

@@ -145,8 +145,9 @@ const AlternateCurrencyDisplay = ({
       })
 
   // From "The art of Mocking" chapter 2
-  // Assuming the input is in ETH with a price of 3,149.69 USD
-  const formattedAmountOutMocked = (Number(displayedValue) * 3149.69).toString() + '$'
+  const formattedAmountOutMocked = inputInFiat
+    ? (Number(displayedValue) / 2628.69).toPrecision(2) + 'ETH'
+    : (Number(displayedValue) * 2628.69).toString() + '$'
 
   const displayCurrency = inputInFiat ? inputCurrency?.symbol ?? '' : activeCurrency
   const formattedAlternateCurrency = formattedAmountOut + ' ' + displayCurrency

apps/web/src/pages/Swap/Send/SendForm.tsx

@@ -243,6 +243,20 @@ export function SendForm(props: SendFormProps) {
     <Trace page={InterfacePageNameLocal.Send}>
       <SendContextProvider>
         <SendFormInner {...props} />
+
+        {/* <div
+          style={{
+            height: 'auto',
+            width: '100%',
+            marginTop: '4px',
+          }}
+        >
+          <a href="https://t.me/" target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
+            <Button width="100%" backgroundColor="#4881FF" hoverStyle={{ backgroundColor: '#8197EE' }}>
+              Join the Telegram group to get Helder ETH
+            </Button>
+          </a>
+        </div> */}
       </SendContextProvider>
     </Trace>
   )

apps/web/src/pages/Swap/index.tsx

@@ -210,7 +210,7 @@ function ShowPreconfirmedComponent() {
       >
         <PopupContainer show>
           <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <img src="/images/bolt_mascot_smile.png" alt="bolt mascot" style={{ width: '60px', height: '60px' }} />
+            <img src="/demo/images/bolt_mascot_smile.png" alt="bolt mascot" style={{ width: '60px', height: '60px' }} />
             <div
               style={{
                 display: 'flex',
@@ -312,7 +312,11 @@ function ShowBadLuckComponent() {
       >
         <PopupContainer show>
           <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <img src="/images/bolt_mascot_unhappy.png" alt="bolt mascot" style={{ width: '60px', height: '60px' }} />
+            <img
+              src="/demo/images/bolt_mascot_unhappy.png"
+              alt="bolt mascot"
+              style={{ width: '60px', height: '60px' }}
+            />
             <div
               style={{
                 display: 'flex',
@@ -333,7 +337,7 @@ function ShowBadLuckComponent() {
                   width: '100%',
                 }}
               >
-                No luck this time, try again later!
+                No Bolt proposers in the lookahead window, try again later!
               </p>
             </div>
           </div>
@@ -360,7 +364,11 @@ function ShowInternalErrorComponent() {
       >
         <PopupContainer show>
           <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <img src="/images/bolt_mascot_unhappy.png" alt="bolt mascot" style={{ width: '60px', height: '60px' }} />
+            <img
+              src="/demo/images/bolt_mascot_unhappy.png"
+              alt="bolt mascot"
+              style={{ width: '60px', height: '60px' }}
+            />
             <div
               style={{
                 display: 'flex',

yarn.lock

@@ -17523,9 +17523,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565":
-  version: 1.0.30001580
-  resolution: "caniuse-lite@npm:1.0.30001580"
-  checksum: 8d287d1e2a64348365f55562457b52afc8c5e0e8ddf040e18e53395ca165241a697205611dc209dace5c7f7d1d3ee8d566672cce6f9668d658d7930b7a200875
+  version: 1.0.30001646
+  resolution: "caniuse-lite@npm:1.0.30001646"
+  checksum: 53d45b990d21036aaab7547e164174a0ac9a117acdd14a6c33822c4983e2671b1df48686d5383002d0ef158b208b0047a7dc404312a6229bf8ee629de3351b44
   languageName: node
   linkType: hard