Gateway minor straggler

packages/boba/gateway/src/actions/nftAction.js

@@ -25,15 +25,6 @@ export function getNFTs () {
 
 export async function addNFT ( NFT ) {
 
-  const state = store.getState()
-  const UUID = NFT.UUID
-
-  //if we already have added it, no need to add again
-  // overwite the old entry
-  // if (state.nft.list[UUID]) {
-  //   return state.nft.list[UUID]
-  // }
-
   const info = {
     UUID: NFT.UUID,
     address: NFT.address,

packages/boba/gateway/src/actions/setupAction.js

@@ -45,9 +45,9 @@ export function setLayer(layer) {
   }
 }
 
-export function setAccountNumber(account) {
+export function setWalletAddress(account) {
   return function (dispatch) {
-    return dispatch({ type: 'SETUP/ACCOUNT_NUMBER/SET', payload: account })
+    return dispatch({ type: 'SETUP/WALLETADDRESS/SET', payload: account })
   }
 }
 

packages/boba/gateway/src/components/walletpicker/WalletPicker.js

@@ -13,16 +13,23 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-import { setEnableAccount, setLayer } from 'actions/setupAction'
+import { 
+  setEnableAccount, 
+  setWalletAddress,
+  setLayer 
+} from 'actions/setupAction'
+
 import Button from 'components/button/Button'
 
 import React, { useCallback, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+
 import {
   selectAccountEnabled,
   selectJustSwitchedChain,
   selectNetwork
 } from 'selectors/setupSelector'
+
 import networkService from 'services/networkService'
 
 import {
@@ -54,9 +61,7 @@ function WalletPicker({
       const initialized = await networkService.initializeAccount(network)
       //console.log(['initialized',initialized])
       if (initialized === 'wrongnetwork') {
-
-        dispatch(openModal('wrongNetworkModal'));
-
+        dispatch(openModal('wrongNetworkModal'))
         return false;
       }
 
@@ -70,6 +75,7 @@ function WalletPicker({
         console.log("WP: Account IS enabled for", initialized)
         dispatch(setLayer(initialized))
         dispatch(setEnableAccount(true))
+        dispatch(setWalletAddress(networkService.account))
         dispatch(fetchTransactions())
         dispatch(fetchBalances())
         return true

packages/boba/gateway/src/containers/monster/Monster.js

@@ -113,8 +113,14 @@ class Monster extends React.Component {
 
     //figure out which monster type we are dealing with
     let monsterType = 'Monster'
+
+    // since it uses FIND, this code will only find one of your monsters
+    // FIX ME to show the 'top' monster for this wallet if you have several 
+    // in which case you are lucky. 
     if(monsterInfo.length > 0) {
+
       tokenIDverified = monsterInfo.find(e => e.tokenID)
+
       if(typeof(tokenIDverified) !== 'undefined') {
         tokenIDverified = Number(monsterInfo.find(e => e.tokenID).tokenID)
       } else {

packages/boba/gateway/src/containers/wallet/Wallet.js

@@ -150,10 +150,6 @@ function Wallet() {
     if (res) dispatch(openAlert('Emergency Swap submitted'))
   }
 
-  //console.log("layer:", layer)
-  //console.log("tooSmallETH:", tooSmallETH)
-  //console.log("network:", network)
-
   return (
     <S.PageContainer>
       <PageTitle title="Wallet" />

packages/boba/gateway/src/containers/wallet/nft/Nft.js

@@ -14,7 +14,6 @@ import networkService from 'services/networkService'
 import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
 import AlertIcon from 'components/icons/AlertIcon'
 import BobaGlassIcon from 'components/icons/BobaGlassIcon'
-import Copy from 'components/copy/Copy'
 
 class Nft extends React.Component {
 
@@ -30,7 +29,9 @@ class Nft extends React.Component {
 
     const {
       accountEnabled,
-      netLayer
+      netLayer,
+      network,
+      walletAddress
     } = this.props.setup
 
     this.state = {
@@ -40,6 +41,8 @@ class Nft extends React.Component {
       loading: this.props.loading[ 'NFT/ADD' ],
       accountEnabled,
       netLayer,
+      network,
+      walletAddress,
       monsterNumber,
       monsterInfo
     }
@@ -56,7 +59,9 @@ class Nft extends React.Component {
 
     const {
       accountEnabled,
-      netLayer
+      netLayer,
+      network,
+      walletAddress
     } = this.props.setup
 
     if (!isEqual(prevState.nft.list, list)) {
@@ -86,6 +91,14 @@ class Nft extends React.Component {
       this.setState({ netLayer })
     }
 
+    if (!isEqual(prevState.setup.network, network)) {
+      this.setState({ network })
+    }
+
+    if (!isEqual(prevState.setup.walletAddress, walletAddress)) {
+      this.setState({ walletAddress })
+    }
+
   }
 
   handleInputAddress = event => {
@@ -112,6 +125,8 @@ class Nft extends React.Component {
       tokenID,
       loading,
       netLayer,
+      network,
+      walletAddress
     } = this.state
 
     if (!netLayer) {
@@ -174,66 +189,52 @@ class Nft extends React.Component {
                   </Typography>
                 </Box>
                 <S.DividerLine />
-                <Typography variant="body1" >
-                  <br/>Useful addresses
-                </Typography>
-                <Typography variant="body2" >
-                  Turing monsters:
+                <Typography variant="body3" sx={{ opacity: 0.65 }}>
+                  <br/>Monsters can be autoadded to your wallet
                 </Typography>
-                <Box display="flex" justifyContent="space-between" alignItems="center">
-                  <Typography variant="body3" sx={{ opacity: 0.65 }}>
-                    0xce45...D793
-                  </Typography>
-                  <Copy value={'0xce458FC7cfC322cDd65eC77Cf7B6410002E2D793'} light={false} />
-                </Box>
-
                 <Button
                   type="primary"
-                  variant="contained"
+                  variant="outlined"
                   fullWidth={true}
                   onClick={(i) => { this.fetchMyMonsters() }}
-                  sx={{ flex: 1, marginTop: '20px', marginBottom: '20px' }}
+                  sx={{ flex: 1, marginTop: '20px' }}
                 >
                   Fetch My Monsters
                 </Button>
-
               </Box>
               <Box sx={{
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '10px'
               }}>
+                <S.DividerLine />
                 <Typography variant="body3" sx={{ opacity: 0.65 }}>
-                  Contract Address
+                  Other NFTs must be added manually
                 </Typography>
-
                 <Input
-                  placeholder='Address 0x...'
+                  placeholder='Contract address 0x...'
                   value={contractAddress}
                   onChange={this.handleInputAddress}
                 // paste
                 />
-
-                <Typography variant="body3" sx={{ opacity: 0.65 }}>
-                  Token ID
-                </Typography>
                 <Input
                   placeholder='TokenID - e.g. 3'
                   value={tokenID}
                   onChange={this.handleInputID}
                 // paste
                 />
+                <Button
+                  type="primary"
+                  variant="outlined"
+                  fullWidth={true}
+                  onClick={(i) => { this.addNFT() }}
+                  disabled={loading || contractAddress === '' || tokenID === ''}
+                  sx={{ flex: 1 }}
+                >
+                  {loading ? 'Adding NFT...' : 'Add NFT'}
+                </Button>
               </Box>
-              <Button
-                type="primary"
-                variant="contained"
-                fullWidth={true}
-                onClick={(i) => { this.addNFT() }}
-                disabled={loading || contractAddress === '' || tokenID === ''}
-                sx={{ flex: 1, marginTop: '20px', marginBottom: '20px' }}
-              >
-                {loading ? 'Adding NFT...' : 'Add NFT'}
-              </Button>
+
             </S.NFTFormContent>
           </S.NFTActionContent>
           <S.NFTListContainer data-empty={Object.keys(list).length === 0}>
@@ -253,6 +254,21 @@ class Nft extends React.Component {
               >
                 {Object.keys(list).map((v, i) => {
                   const key_UUID = `nft_` + i
+                  if(list[v].hasOwnProperty('account')) {
+                    // new storage format - check for chain
+                    if(list[v].network !== network) {
+                      //console.log("NFT not on this network")
+                      return null
+                    }
+                    if(list[v].layer !== netLayer) {
+                      //console.log("NFT not on this layer")
+                      return null
+                    }
+                    if(list[v].account.toLowerCase() !== walletAddress.toLowerCase()) {
+                      //console.log("NFT not owned by this wallet")
+                      return null
+                    }
+                  }
                   return (
                     <ListNFT
                       key={key_UUID}

packages/boba/gateway/src/reducers/setupReducer.js

@@ -25,7 +25,7 @@ const initialState = {
   accountEnabled: null,
   baseEnabled: null,
   netLayer: null,
-  accountNumber: null,
+  walletAddress: null,
   network: process.env.REACT_APP_CHAIN,
   justSwitchedChain: justSwitchedChain ? justSwitchedChain : false,
   bobaFeePriceRatio: null,
@@ -41,10 +41,10 @@ function setupReducer (state = initialState, action) {
         accountEnabled: action.payload,
         justSwitchedChain: false
       }
-    case 'SETUP/ACCOUNT_NUMBER/SET':
+    case 'SETUP/WALLETADDRESS/SET':
       return { 
         ...state, 
-        accountNumber: action.payload,
+        walletAddress: action.payload,
       }
     case 'SETUP/BASE/SET':
       return { 

packages/boba/gateway/src/services/networkService.js

@@ -1217,32 +1217,32 @@ class NetworkService {
   async fetchMyMonsters() {
 
     let monsterList = await GraphQLService.queryMonsterTransfer(this.account)
-    console.log("monsterList:", monsterList)
 
-    let monsters = []
+    const contract = new ethers.Contract(
+      allAddresses.BobaMonsters,
+      TuringMonsterJson.abi,
+      this.L2Provider
+    )
 
     if(monsterList.hasOwnProperty('data')) {
-      monsters = monsterList.data.turingMonstersTransferEvents
+      const monsters = monsterList.data.turingMonstersTransferEvents
+      for (let i = 0; i < monsters.length; i++) {
+        // console.log("adding monster:", i + 1)
+        const tokenId = monsters[i].tokenId
+        const owner = await contract.ownerOf(tokenId)
+            //console.log("owner:", owner)
+        if(owner.toLowerCase() === this.account.toLowerCase()) {
+          this.addNFT( allAddresses.BobaMonsters, tokenId )
+        }
+      }
+      this.checkMonster()
     }
-    console.log("length:",monsters.length)
-
-
-
-    // we can overwrite legacy local entries if people already have entered them
-    // also need to compute the "best" monster
-
-    //for (let i = 0; i < totalProposals; i++) {
-
-    //     const proposalRaw = descriptionList.data.governorProposalCreateds[i]
-    //     if(typeof(proposalRaw) === 'undefined') continue
-    //     let proposalID = proposalRaw.proposalId
-    //     //this is a number such as 2
-    //     let proposalData = await delegateCheck.proposals(proposalID)
   }
 
   async checkMonster() {
 
     const NFTs = getNFTs()
+
     let validMonsters = []
 
     try {
@@ -1254,14 +1254,14 @@ class NetworkService {
       )
 
       const monsterBalance = await contract.balanceOf(this.account)
-      console.log("you have", monsterBalance, "monsters")
 
       let topMagic = 0
       let topTop = 0
 
       if(NFTs && Number(monsterBalance) > 0) {
-        for (const [ value ] of Object.entries(NFTs)) {
-          //console.log(`${key}: ${value.name}`)
+        //console.log("checking monsters")
+        for (const [ key, value ] of Object.entries(NFTs)) {
+          //console.log(`${key} value: ${value.name}`)
           if(value.name === 'TuringMonster') {
             const owner = await contract.ownerOf(value.tokenID)
             //console.log("owner:", owner)
@@ -1303,6 +1303,8 @@ class NetworkService {
   /* This is for manually adding NFTs */
   async addNFT( address, tokenID ) {
 
+    console.log("address", address)
+
     try {
 
       const contract = new ethers.Contract(

packages/boba/subgraph/L2/subgraph.yaml

@@ -8,7 +8,7 @@ dataSources:
     name: L2LiquidityPool
     network: boba
     source:
-      address: '0x8d3866a79aA780BA3DC1a300a1567635F3754a0e'
+      address: '0x3A92cA39476fF84Dc579C868D4D7dE125513B034'
       abi: L2LiquidityPool
     mapping:
       kind: ethereum/events