various small fixes for problems with loading the faucet on a externa…

…l site, include bootstrap js in bundle
pk910 · May 28, 2024 · fecea13 · fecea13
1 parent 13bff9b
commit fecea13
Show file tree

Hide file tree

Showing 14 changed files with 23 additions and 13 deletions.
diff --git a/faucet-client/src/common/FaucetContext.ts b/faucet-client/src/common/FaucetContext.ts
@@ -21,5 +21,6 @@ export interface IFaucetContext {
 
   showDialog(dialogProps: IFaucetDialogProps): number;
   hideDialog(dialogId: number): void;
+  getContainer(): HTMLElement;
 
 }
diff --git a/faucet-client/src/components/FaucetPage.scss b/faucet-client/src/components/FaucetPage.scss
@@ -24,6 +24,7 @@ html.powfaucet, html.powfaucet body {
 
 @import "../../node_modules/bootstrap/scss/functions";
 @import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
 @import "../../node_modules/bootstrap/scss/maps";
 @import "../../node_modules/bootstrap/scss/mixins";
 @import "../../node_modules/bootstrap/scss/utilities";
@@ -37,7 +38,6 @@ html.powfaucet, html.powfaucet body {
   @import "../../node_modules/bootstrap/scss/grid";
   @import "../../node_modules/bootstrap/scss/tables";
   @import "../../node_modules/bootstrap/scss/forms";
-
   @import "../../node_modules/bootstrap/scss/buttons";
   @import "../../node_modules/bootstrap/scss/transitions";
   @import "../../node_modules/bootstrap/scss/dropdown";
@@ -51,6 +51,8 @@ html.powfaucet, html.powfaucet body {
   @import "../../node_modules/bootstrap/scss/close";
   @import "../../node_modules/bootstrap/scss/placeholders";
   @import "../../node_modules/bootstrap/scss/helpers";
+  @import "../../node_modules/bootstrap/scss/utilities/api";
+
 }
 
 .faucet-loading .loading-spinner {

diff --git a/faucet-client/src/components/FaucetPage.tsx b/faucet-client/src/components/FaucetPage.tsx
@@ -91,6 +91,7 @@ export class FaucetPage extends React.PureComponent<IFaucetPageProps, IFaucetPag
       hideNotification: (notificationId: number) => this.hideNotification(notificationId),
       showDialog: (dialogProps: IFaucetDialogProps) => this.showDialog(dialogProps),
       hideDialog: (dialogId: number) => this.hideDialog(dialogId),
+      getContainer: () => this.faucetContainerElement,
     };
 
     this.state = {

diff --git a/faucet-client/src/components/claim/ClaimPage.tsx b/faucet-client/src/components/claim/ClaimPage.tsx
@@ -346,6 +346,7 @@ export class ClaimPage extends React.PureComponent<IClaimPageProps, IClaimPageSt
               <div className='col'>
                 <OverlayTrigger
                   placement="auto"
+                  container={this.props.pageContext.getContainer()}
                   overlay={
                     <Tooltip>
                       {((this.state.sessionStatus.claimIdx || 0) - (this.state.claimNotification?.processedIdx || 0) - 1)} claims will be processed before yours.

diff --git a/faucet-client/src/components/frontpage/zupass/ZupassLogin.tsx b/faucet-client/src/components/frontpage/zupass/ZupassLogin.tsx
@@ -88,6 +88,7 @@ export class ZupassLogin extends React.PureComponent<IZupassLoginProps, IZupassL
           {this.props.faucetConfig.modules.zupass.infoHtml ?
             <OverlayTrigger
               placement="bottom"
+              container={this.props.faucetContext.getContainer()}
               overlay={this.renderInfoHtml()}
             >
               <span className="zupass-info-icon">
@@ -121,6 +122,7 @@ export class ZupassLogin extends React.PureComponent<IZupassLoginProps, IZupassL
           {this.props.faucetConfig.modules.zupass.infoHtml ?
             <OverlayTrigger
               placement="bottom"
+              container={this.props.faucetContext.getContainer()}
               overlay={this.renderInfoHtml()}
             >
               <span className="zupass-info-icon">
@@ -142,6 +144,7 @@ export class ZupassLogin extends React.PureComponent<IZupassLoginProps, IZupassL
           <OverlayTrigger
             placement="bottom"
             delay={{ show: 250, hide: 400 }}
+            container={this.props.faucetContext.getContainer()}
             overlay={(props) => this.renderZupassTicketInfo(this.state.authInfo, props)}
           >
             <span className="auth-ident-truncated">{this.state.authInfo.attendeeId}</span>

diff --git a/faucet-client/src/components/mining/PoWMinerStatus.tsx b/faucet-client/src/components/mining/PoWMinerStatus.tsx
@@ -156,6 +156,7 @@ export class PoWMinerStatus extends React.PureComponent<IPoWMinerStatusProps, IP
             <div className='pow-progress-actions'>
               <OverlayTrigger
                 placement="bottom"
+                container={this.props.pageContext.getContainer()}
                 overlay={
                   <Tooltip>
                     Stop animation for better performance

diff --git a/faucet-client/src/components/passport/PassportInfo.tsx b/faucet-client/src/components/passport/PassportInfo.tsx
@@ -133,6 +133,7 @@ export class PassportInfo extends React.PureComponent<IPassportInfoProps, IPassp
                     (Reward Factor: {this.state.passportInfo.score.factor || 1} 
                     <OverlayTrigger
                       placement="bottom"
+                      container={this.props.pageContext.getContainer()}
                       overlay={
                         <Tooltip>
                           {this.renderFactorInfo()}
@@ -250,6 +251,7 @@ export class PassportInfo extends React.PureComponent<IPassportInfoProps, IPassp
                 {stamp.expiration <= now ?
                   <OverlayTrigger
                     placement="bottom"
+                    container={this.props.pageContext.getContainer()}
                     overlay={
                       <Tooltip>
                         This stamp has been expired. Please refresh it on passport.gitcoin.co
@@ -262,6 +264,7 @@ export class PassportInfo extends React.PureComponent<IPassportInfoProps, IPassp
                 {stamp.duplicate ?
                   <OverlayTrigger
                     placement="bottom"
+                    container={this.props.pageContext.getContainer()}
                     overlay={
                       <Tooltip>
                         This stamp has already been used in the passport for {stamp.duplicate}

diff --git a/faucet-client/src/components/shared/FaucetDialog.tsx b/faucet-client/src/components/shared/FaucetDialog.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Button, Modal } from 'react-bootstrap';
+import 'bootstrap/js/dist/modal';
 
 export interface IFaucetDialogProps {
   title: string;

diff --git a/faucet-client/src/components/status/FaucetStatus.css b/faucet-client/src/components/status/FaucetStatus.css
@@ -25,15 +25,16 @@
   min-width: 50px;
 }
 
-.faucet-page .status-sessions td, .pow-faucet .status-sessions th {
+.faucet-page .faucet-status .status-sessions td, 
+.faucet-page .faucet-status .status-sessions th {
   padding: 0 12px;
 }
 
-.faucet-page .status-general {
+.faucet-page .faucet-status .status-general {
   max-width: none;
 }
 
-.faucet-page .status-general .status-title {
+.faucet-page .faucet-status .status-general .status-title {
   display: inline-block;
   width: 180px;
 }
diff --git a/faucet-client/src/components/status/FaucetStatusPage.tsx b/faucet-client/src/components/status/FaucetStatusPage.tsx
@@ -289,6 +289,7 @@ export class FaucetStatusPage extends React.PureComponent<IFaucetStatusPageProps
         <OverlayTrigger
           placement="auto"
           delay={{ show: 250, hide: 400 }}
+          container={this.props.pageContext.getContainer()}
           overlay={(props) => this.renderRestrictionInfo(session, props)}
         >
           <span key="limit" className={["badge", restrClass].join(" ")}>{session.restr.reward} %</span>
@@ -305,6 +306,7 @@ export class FaucetStatusPage extends React.PureComponent<IFaucetStatusPageProps
         <OverlayTrigger
           placement="auto"
           delay={{ show: 250, hide: 400 }}
+          container={this.props.pageContext.getContainer()}
           overlay={(props) => this.renderFactorInfo(session, props)}
         >
           <span key="factor" className={["badge", "bg-info"].join(" ")}>x{Math.round(totalFactor * 100) / 100}</span>
@@ -319,6 +321,7 @@ export class FaucetStatusPage extends React.PureComponent<IFaucetStatusPageProps
           <OverlayTrigger
             placement="right"
             delay={{ show: 250, hide: 400 }}
+            container={this.props.pageContext.getContainer()}
             overlay={(props) => this.renderSessionIpInfo(session, props)}
           >
             <span className='ipaddr'>
@@ -491,6 +494,7 @@ export class FaucetStatusPage extends React.PureComponent<IFaucetStatusPageProps
         claimStatus = <OverlayTrigger
           placement="left"
           delay={{ show: 250, hide: 400 }}
+          container={this.props.pageContext.getContainer()}
           overlay={(props) => this.renderClaimFailInfo(claim, props)}
         >
           <span className="badge bg-danger">Failed</span>

diff --git a/faucet-client/src/components/status/QueueStatusPage.tsx b/faucet-client/src/components/status/QueueStatusPage.tsx
@@ -123,6 +123,7 @@ export class QueueStatusPage extends React.PureComponent<IQueueStatusPageProps,
         claimStatus = <OverlayTrigger
           placement="left"
           delay={{ show: 250, hide: 400 }}
+          container={this.props.pageContext.getContainer()}
           overlay={(props) => this.renderClaimFailInfo(claim, props)}
         >
           <span className="badge bg-danger">Failed</span>

diff --git a/static/index.html b/static/index.html
@@ -26,7 +26,6 @@
       </div>
     </div>
     <a href="https://github.com/pk910/PoWFaucet" class="github-fork-ribbon fixed" title="Fork me on GitHub" data-ribbon="Fork me on GitHub" target="_blank">Fork me on GitHub</a>
-    <script src="/js/bootstrap.bundle.min.js"></script>
     <script src="/js/powfaucet.js"></script>
   </body>
 </html>
diff --git a/static/js/bootstrap.bundle.min.js b/static/js/bootstrap.bundle.min.js
diff --git a/static/js/bootstrap.bundle.min.js.map b/static/js/bootstrap.bundle.min.js.map