twitter button (#168)

* twitter button * final cleanup (cherry picked from commit 8a91211)
bobanetwork · Jun 17, 2022 · 02a2b74 · 02a2b74
1 parent 87ec221
commit 02a2b74
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 86 deletions.
diff --git a/packages/boba/gateway/package.json b/packages/boba/gateway/package.json
@@ -53,6 +53,7 @@
     "react-select": "^5.2.2",
     "redux": "^4.1.2",
     "redux-thunk": "^2.3.0",
+    "sass": "^1.51.0",
     "serve": "^11.3.2",
     "truncate-middle": "^1.0.6",
     "ts-md5": "^1.2.11",
@@ -75,7 +76,6 @@
   },
   "devDependencies": {
     "@beam-australia/react-env": "2.1.2",
-    "audit-ci": "^3.1.1",
-    "sass": "^1.49.7"
+    "audit-ci": "^3.1.1"
   }
 }
diff --git a/packages/boba/gateway/src/containers/bobaScope/Transactions.module.scss b/packages/boba/gateway/src/containers/bobaScope/Transactions.module.scss
@@ -54,11 +54,8 @@
 }
 
 .transactions {
-  /*height: 100%;*/
   overflow: auto;
-  background: $background400; //white;
-  // border-bottom: 1px solid rgb(233, 234, 235);
-  // box-shadow: rgb(100 100 111 / 20%) 0px 7px 10px 0px;
+  background: $background400;
   border-radius: 8px;
   margin-top: 10px;
   min-height: 100px;
@@ -75,7 +72,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-
   margin-bottom: 32px;
   span {
     margin-right: 20px;

diff --git a/packages/boba/gateway/src/containers/monster/Monster.js b/packages/boba/gateway/src/containers/monster/Monster.js
@@ -21,7 +21,7 @@ class Monster extends React.Component {
 
   constructor(props) {
 
-    super(props);
+    super(props)
 
     const {
       list,
@@ -113,33 +113,6 @@ class Monster extends React.Component {
     await networkService.addNFT(this.state.contractAddress, this.state.tokenID);
   }
 
-  async claimAuthenticatedFaucetTokens() {
-    try {
-      this.setState({...this.state, isClaimFaucetLoading: true})
-      const tweetId = this.state.tweetUrl?.match(/twitter\.com\/.*\/status\/(\d+)/)[1]
-
-      const {dispatch} = this.props
-      const res = await networkService.getTestnetETHAuthenticatedMetaTransaction(tweetId)
-      if (!res) {
-        dispatch(openAlert('Faucet request submitted'))
-      } else {
-        this.setState({...this.state, faucetErrorMsg: res})
-      }
-    } catch (err) {
-      let error = err.message.match(/execution reverted: (.*)\\+"}}/)
-      if (error) {
-        error = error[1]
-      } else {
-        error = err?.message ?? err;
-      }
-      console.error(error);
-      this.setState({...this.state, faucetErrorMsg: error})
-
-    } finally {
-      this.setState({...this.state, isClaimFaucetLoading: false})
-    }
-  }
-
   render() {
 
     const {
@@ -294,41 +267,10 @@ class Monster extends React.Component {
                   also, to support content creators, journalists, artists, and developers. When they use their
                   Boba Bubble on social media and in their art, you will be able to send BOBA and ETH to
                   their Boba wallet. The system is powered by Turing, which does all
-                  the heavy lifting in the background.
-                </Typography>
-
-                <Typography variant='body2' sx={{ opacity: 0.95 }}>
-                  Developer Twitter/Turing test token fountain
-                </Typography>
-
-                <Typography variant="body3" sx={{ opacity: 0.65, marginBottom: "10px" }}>
-                  To receive testnet BOBA and ETH for developing on Boba rinkeby, tweet your Boba Bubble and
-                  paste the tweet link here. You can get the link on Twitter by tapping the share icon, then tapping
-                  "Share Tweet via", and finally selecting "Copy link to Tweet".
-                  Your link should look something like this: https://twitter.com/name/status/1234567
+                  the heavy lifting in the background. The new Twitter/Turing based fountain has been lauched and is availible 
+                  to developers on Rinkeby. 
                 </Typography>
 
-                <Input
-                  value={tweetUrl}
-                  onChange={(e) => this.setState({
-                      ...this.state,
-                      tweetUrl: e?.target?.value.split('?')[0] //remove the superfluous stuff after the "?"
-                    })
-                  }
-                />
-
-                <Button
-                  type="primary"
-                  variant="contained"
-                  style={{ marginTop: "10px", marginBottom: "18px" }}
-                  disabled={!this.state.tweetUrl || !this.state.tweetUrl?.includes('http')}
-                  loading={this.state.isClaimFaucetLoading}
-                  onClick={async (e) => {await this.claimAuthenticatedFaucetTokens()}}
-                  size="small">
-                  Authenticated Faucet
-                </Button>
-                {this.state.faucetErrorMsg ? <Typography style={{color: 'red'}}>{this.state.faucetErrorMsg}</Typography> : null}
-
               </Box>
             </S.NFTListContainer>
           </S.NFTPageContainer>

diff --git a/packages/boba/gateway/src/containers/wallet/token/Token.js b/packages/boba/gateway/src/containers/wallet/token/Token.js
@@ -15,6 +15,8 @@ import { openAlert, openError } from 'actions/uiAction'
 import * as S from './Token.styles'
 import * as G from '../../Global.styles'
 
+import twitter from 'images/twitter.png'
+
 import { Box, Typography, CircularProgress, Input } from '@mui/material'
 import { tokenTableHeads } from './token.tableHeads'
 
@@ -58,15 +60,16 @@ function TokenPage() {
   const unorderedTransactions = useSelector(selectTransactions, isEqual)
   const orderedTransactions = orderBy(unorderedTransactions, i => i.timeStamp, 'desc')
 
-//BOBAB5DAD3D10
-
   let bobaTag = ''
   if(walletAddress)
     bobaTag = Md5.hashStr(walletAddress.toLowerCase().substring(2))
 
   let BT = ''
-  if (bobaTag)
+  let tweet = ''
+  if (bobaTag) {
     BT = "BOBA" + bobaTag.substring(0, 9).toUpperCase()
+    tweet = "https://twitter.com/intent/tweet?text=I%27m%20developing%20on%20Boba%20Network%20" + BT
+  }
 
   const pendingL1 = orderedTransactions.filter((i) => {
     if (i.chain === 'L1pending' && //use the custom API watcher for fast data on pending L1->L2 TXs
@@ -223,39 +226,64 @@ function TokenPage() {
       {layer === 'L2' && network === 'rinkeby' &&
           <G.LayerAlert style={{padding: '20px'}}>
           <Box>
-            <Box style={{ display: "inline-block" }}>
+
+            <Box style={{display: "inline-block"}}>
               <Typography variant="body2">
                 Developer Twitter/Turing test token fountain - your Boba Bubble:{" "}
                 <span style={{ opacity: 0.65 }}>{BT} <Copy value={BT} light={false} /></span>
               </Typography>
             </Box>
 
             <Typography variant="body3" sx={{ opacity: 0.65, marginBottom: "10px" }}>
-              Welcome to Boba! This is a special fountain for developers with empty wallets.  
-              To receive testnet BOBA and ETH, tweet your Boba Bubble and
-              paste the tweet link in the field below. 
-              You can get the link on Twitter by tapping the share icon, then tapping
-              "Share Tweet via", and finally selecting "Copy link to Tweet".
-              Your link should look something like this: https://twitter.com/name/status/1234567
+              Welcome developers.  
+              For testnet BOBA and ETH, tweet your Boba Bubble and
+              then paste the tweet link in the field below.
+            </Typography>
+
+            <a
+              target='_blank'
+              href={tweet}
+              aria-label="link"
+              style={{
+                backgroundColor: '#1b95e0',
+                color: '#fff',
+                borderRadius: '4px',
+                height: '28px',
+                fontWeight: '500',
+                fontSize: '13px',
+                lineheight: '26px',
+                padding: '8px 8px 8px 30px',
+                textDecoration: 'none',
+                backgroundImage: `url(${twitter})`,
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: '16px 13px',
+                backgroundPosition: '8px 10px'
+              }}
+            >Tweet Now
+            </a>
+
+            <Typography variant="body3" sx={{ opacity: 0.65, marginTop: "10px", marginBottom: "10px" }}>
+              For the Tweet link, tap the share icon, tap "Share Tweet via", and finally select "Copy link to Tweet".
             </Typography>
 
             <Input
-              style = {{width: '80%'}}
+              style={{width: '80%'}}
               value={tweetUrl}
+              placeholder="Tweet Link"
               onChange={(e) => setTweetUrl(e?.target?.value.split('?')[0])} //remove the superfluous stuff after the "?"
             />
 
             <Typography variant="body3" sx={{ opacity: 0.65, marginBottom: "10px", marginTop: '3px'}}>
               You are limited to one fountain call per twitter account per day. 
               The transaction will not show in your history since it's a MetaTransaction (the gas is covered by Boba). 
               If you already have some ETH in your wallet to cover gas you can use our 
-              <span
+              <a
                 target='_blank'
                 href={'https://faucets.boba.network/'}
                 aria-label="link"
-                style={{fontSize: '1.0em', opacity: '1.0', fontWeight: '700', paddingLeft: '3px', textDecoration: 'underline'}}
+                style={{color:'#fff', fontSize: '1.0em', opacity: '1.0', fontWeight: '700', paddingLeft: '3px', textDecoration: 'underline'}}
               >alternative faucet
-              </span>.
+              </a>.
             </Typography>
 
             <Button

diff --git a/packages/boba/gateway/src/images/twitter.png b/packages/boba/gateway/src/images/twitter.png
diff --git a/yarn.lock b/yarn.lock
@@ -20592,10 +20592,10 @@ sass-loader@8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sass@^1.49.7:
-  version "1.49.7"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49"
-  integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
+sass@^1.51.0:
+  version "1.51.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.51.0.tgz#25ea36cf819581fe1fe8329e8c3a4eaaf70d2845"
+  integrity sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"