signal-k / marketplace Goto Github PK
View Code? Open in Web Editor NEWMarketplace repository (demo) for Star Sailors assets
Marketplace repository (demo) for Star Sailors assets
Error when running run.sh
from root directory
Due to tx
identifier/extension reference
I've narrowed the issue down to being in this file (the hook file), so we just need to fix it
Setting up & cleaning up the boilerplate files to work with the Decentralised social network on the marketplace. Ignoring all other components (both frontend and backend/node) for now, we're just building Deddit as of right now.
selectedCategory
is not defined no-undef
AddPost.jsx
(identified as typos)React components and hooks for fast building dApps without running own backend
🚀DEMO: https://ethereum-boilerplate.github.io/ethereum-boilerplate
This boilerplate is built on react-moralis and Moralis. Also has its own context provider for quick access to chainId
or ethAddress
There are many components in this boilerplate that do not require an active web3 provider, they use Moralis Web3 API. Moralis supports the most popular blockchains and their test networks. You can find a list of all available networks in Moralis Supported Chains
Please check the official documentation of Moralis for all the functionalities of Moralis.
Here's the current index.js
file:
import React, { useEffect, useState } from 'react';
import './App.css';
import twitterLogo from './assets/twitter-logo.svg';
// Components (Character)
import SelectCharacter from './Components/SelectCharacter';
// Constants
const TWITTER_HANDLE = 'TheMrScrooby';
const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
const App = () => {
/*
* Just a state variable we use to store our user's public wallet. Don't forget to import useState.
*/
const [currentAccount, setCurrentAccount] = useState(null);
const [characterNFT, setCharacterNFT] = useState(null);
/*
* Since this method will take some time, make sure to declare it as async
*/
const checkIfWalletIsConnected = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
console.log('Make sure you have MetaMask!');
return;
} else {
console.log('We have the ethereum object', ethereum);
/*
* Check if we're authorized to access the user's wallet
*/
const accounts = await ethereum.request({ method: 'eth_accounts' });
/*
* User can have multiple authorized accounts, we grab the first one if its there!
*/
if (accounts.length !== 0) {
const account = accounts[0];
console.log('Found an authorized account:', account);
setCurrentAccount(account);
} else {
console.log('No authorized account found');
}
}
} catch (error) {
console.log(error);
}
};
// Check if user has connected AND if they've minted their character, based on this render certain components
const renderContent = () => {
if (!currentAccount) { // If user has not connected their account/wallet to here
return (
<div className="connect-wallet-container">
<img
src="https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv"
alt="Monty Python Gif"
/>
<button
className="cta-button connect-wallet-button"
onClick={connectWalletAction}
>
Connect Wallet (Metamask) to get started
</button>
</div>
);
} else if (currentAccount && !characterNFT) { // If the user has connected their account but doesn't have an NFT minted for their character yet
return <SelectCharacter setCharacterNFT={setCharacterNFT} />;
}
}
const connectWalletAction = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
alert('Get Metamask!'); // Ethereum wallet (specifically metamask) was not detected
return;
}
// Request access to account
const accounts = await ethereum.request({
method: 'eth_requestAccounts',
});
// Get the first account & print its public address to console
console.log('Connected', accounts[0]);
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error);
}
}
/*
* This runs our function when the page loads.
*/
useEffect(() => {
checkIfWalletIsConnected();
}, []);
return (
<div className="App">
<div className="container">
<div className="header-container">
<p className="header gradient-text">⚔️ Metaverse Slayer ⚔️</p>
<p className="sub-text">Team up to protect the Metaverse!</p>
{
}
{renderContent()}
</div>
<div className="footer-container">
<img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
<a
className="footer-text"
href={TWITTER_LINK}
target="_blank"
rel="noreferrer"
>{`built with @${TWITTER_HANDLE}`}</a>
</div>
</div>
</div>
);
};
export default App;
Here's what we need to do:
github/signal-k/marketplace
I’m starting work on using Moralis (currently just on the Rinkeby test net, will move to main net (and the derivatives, e.g. Mumbai, SKKoin, etc)) to access Opensea. We’ll be able to use this in our Phaser apps (and the DAO project), and I’m figuring out a way to use it with Unity as well.
tokenType
in BuyOrder
or SellOrder
(which is either ERC721 or ERC1155) to be dynamic (like the tokenAddress
field)Can aavegotchi protocol, especially in the marketplace, be used as the gravatar-type protocol for Star Sailors?
As may have been seen from the update of the main
branch (creating a sub-branch to house what was previously in main
), we're updating this repository (or at least the main
branch) to show the DAO and the platforms (like signal-k/theclub
) that it interacts/interfaces with.
Currently, we've deployed a sample contract to Mumbai testnet and the proposals are not being fetched correctly via Moralis (either that, or they're not being displayed correctly to the frontend).
This issue will be updated with commit refs as this issue is looked into and hopefully fixed.
Seems like node-addon-api
module is causing problems with yarn
command:
marketplace ❯ yarn add node-addon-api moralis-dao
yarn add v1.22.19
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning @testing-library/jest-dom > css > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning react-scripts > resolve-url-loader > rework > css > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > webpack-dev-server > [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning react-scripts > webpack-dev-server > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning react-scripts > workbox-webpack-plugin > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > webpack-dev-server > webpack-log > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning react-scripts > webpack-dev-server > sockjs > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > @pmmmwh/react-refresh-webpack-plugin > native-url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning react-scripts > webpack-dev-server > url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning react-scripts > webpack > micromatch > snapdragon > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning react-scripts > resolve-url-loader > rework > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/[email protected]: Switch to 'npm install joi'
warning react-scripts > babel-jest > @jest/transform > jest-haste-map > [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
warning react-scripts > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > postcss-preset-env > postcss-color-gray > postcss-values-parser > [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: Moved to 'npm install @sideway/address'
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > [email protected]: Deprecated in favor of '@metamask/eth-sig-util'
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > eth-json-rpc-middleware > [email protected]: Deprecated in favor of '@metamask/eth-sig-util'
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > [email protected]: New package name format for new versions: @ethereumjs/block. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > [email protected]: New package name format for new versions: @ethereumjs/tx. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > ethereumjs-block > [email protected]: New package name format for new versions: @ethereumjs/tx. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > [email protected]: New package name format for new versions: @ethereumjs/vm. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > ethereumjs-vm > [email protected]: New package name format for new versions: @ethereumjs/block. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > ethereumjs-vm > ethereumjs-block > [email protected]: New package name format for new versions: @ethereumjs/tx. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > request > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning web3uikit > @walletconnect/web3-provider > @walletconnect/qrcode-modal > @walletconnect/[email protected]: Deprecated in favor of dynamic registry available from: https://github.com/walletconnect/walletconnect-registry
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > eth-block-tracker > [email protected]: Renamed to @metamask/safe-event-emitter
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > eth-json-rpc-middleware > [email protected]: Renamed to @metamask/safe-event-emitter
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > eth-json-rpc-infura > json-rpc-engine > [email protected]: Renamed to @metamask/safe-event-emitter
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > ethereumjs-vm > [email protected]: New package name format for new versions: @ethereumjs/common. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > ethereumjs-vm > ethereumjs-block > [email protected]: New package name format for new versions: @ethereumjs/common. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > ethereumjs-vm > ethereumjs-block > ethereumjs-tx > [email protected]: New package name format for new versions: @ethereumjs/common. Please update.
warning web3uikit > @walletconnect/web3-provider > web3-provider-engine > request > [email protected]: this library is no longer supported
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > [email protected]" has incorrect peer dependency "react@18".
warning " > [email protected]" has incorrect peer dependency "react-dom@18".
warning "web3uikit > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
warning "web3uikit > @web3auth/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > [email protected]" has unmet peer dependency "webpack@>=5".
warning "web3uikit > @web3auth/web3auth > @toruslabs/openlogin > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @toruslabs/openlogin > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @toruslabs/openlogin > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-solana-adapter > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-solana-adapter > @web3auth/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/openlogin-adapter > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-solana-adapter > @web3auth/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/openlogin-adapter > @web3auth/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-evm-adapter > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-evm-adapter > @toruslabs/torus-embed > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-evm-adapter > @toruslabs/torus-embed > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-evm-adapter > @toruslabs/torus-embed > @toruslabs/openlogin-jrpc > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > wp5-cra-polyfill > [email protected]" has unmet peer dependency "webpack@>=5".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-solana-adapter > @toruslabs/solana-embed > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-evm-adapter > @toruslabs/torus-embed > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "web3uikit > @web3auth/web3auth > @web3auth/torus-evm-adapter > @toruslabs/torus-embed > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning " > [email protected]" has unmet peer dependency "chai@^4.2.0".
[4/4] 🔨 Building fresh packages...
[16/17] ⠁ wp5-cra-polyfill
[10/17] ⠁ microtime
[-/17] ⠁ waiting...
[-/17] ⠁ waiting...
error /Users/liamarbuckle/Documents/Mint/marketplace/node_modules/microtime: Command failed.
Exit code: 1
Command: node-gyp-build
Arguments:
Directory: /Users/liamarbuckle/Documents/Mint/marketplace/node_modules/microtime
Output:
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info find Python using Python version 3.10.4 found at "/Library/Frameworks/Python.framework/Versions/3.10/bin/python3"
gyp info spawn /Library/Frameworks/Python.framework/Versions/3.10/bin/python3
gyp info spawn args [
gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/Users/liamarbuckle/Documents/Mint/marketplace/node_modules/microtime/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/liamarbuckle/Library/Caches/node-gyp/16.15.0/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/liamarbuckle/Library/Caches/node-gyp/16.15.0',
gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/liamarbuckle/Library/Caches/node-gyp/16.15.0/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/Users/liamarbuckle/Documents/Mint/marketplace/node_modules/microtime',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (node:events:527:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 21.5.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/liamarbuckle/Documents/Mint/marketplace/node_modules/microtime
The same error appears when using generic yarn
or yarn add node-addon-api
Problem:
Solution:
deddit
inside #7, marketplace-games
inside this repo) for .env managementdotenv
inside the repos to workmarketplace-games/web3-test-game
, the code below doesn't work:require("@nomiclabs/hardhat-waffle");
import dotenv from "dotenv";
dotenv.config();
// This is a sample Hardhat task. To learn how to create your own go to
// https://hardhat.org/guides/create-task.html
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
const accounts = await hre.ethers.getSigners();
for (const account of accounts) {
console.log(account.address);
}
});
// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more
/**
* @type import('hardhat/config').HardhatUserConfig
*/
module.exports = {
solidity: "0.8.0",
networks: {
rinkeby: {
url: process.env.ALCHEMY_API_URL,
accounts: [process.env.PRIVATE_KEY],
},
},
};
``` (`hardhat.config.js`)
Resulting in this output:
```bash
➜ npx hardhat run scripts/run.js
An unexpected error occurred:
/Users/larbuckle/Documents/Blockchain/buildspace/thingdom/hardhat.config.js:2
import dotenv from "dotenv";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at importCsjOrEsModule (/Users/larbuckle/Documents/Blockchain/buildspace/thingdom/node_modules/hardhat/src/internal/core/config/config-loading.ts:23:20)
at loadConfigAndTasks (/Users/larbuckle/Documents/Blockchain/buildspace/thingdom/node_modules/hardhat/src/internal/core/config/config-loading.ts:66:18)
And bring this in to work with gizmotronn/cityzens (on github)
A smart contract for the social networking component of the marketplace, nicknamed "Deddit" aka Decentralised(r)eddit due to the similar UI and style of the Reddit network.
Trying to investigate how to build a frontend for user posts that interacts with Moralis (and can maybe be taken off Moralis later, to something like Enjin etc) and the game, using the user's Eth account. I want to figure out how to get this to work in conjunction with other player-created networks like matrix-type (e.g. discord servers) instances so we can have an open standard for things like in-game alliances, discussions, transactions and an easy way to view all of them
This can also be translated to working with non-decentralised apps & games.
_contentId
& event ContentAdded
-> set as bytes3
instead of bytes32
| 7.1.1validateReputationChange
| 7.1.2abi
| 7.1.3Cadence
directory#18 but Python rather than JS
Fix npx hardhat clean
&& npx hardhat compile
error:
Error in plugin @nomiclabs/hardhat-etherscan: Etherscan API token "0" is for an unsupported network
Notes: this is on the mumbai testnet
Commit: 1e88866
Here's the current src/Components/SelectCharacter/index.js
file:
import React, { useEffect, useState } from 'react';
import './SelectCharacter.css';
import { ethers } from 'ethers';
import { CONTRACT_ADDRESS, transformCharacterData } from '../../constants';
import gameContract from '../../utils/GameContract.json';
const SelectCharacter = ({ setCharacterNFT }) => {
const [characters, setCharacters] = useState([]);
const [gameContract, setGameContract] = useState(null);
useEffect(() => {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum)
const signer = provider.getSigner();
const gameContract = new ethers.Contract(
CONTRACT_ADDRESS,
gameContract.abi,
signer
);
// Set gameContract in state
setGameContract(gameContract);
} else {
console.log('Ethereum object not found');
}
}, []);
useEffect(() => {
const getCharacters = async () => {
try {
console.log('Getting contract characters to mint');
// Call contract to get all mintable characters
const charactersTxn = await gameContract.getAllDefaultCharacters();
console.log('charactersTxn:', charactersTxn);
// Transform the data from the contract after going through all the characters
const characters = charactersTxn.map((characterData) =>
transformCharacterData(characterData)
);
// Set all mintable characters in state
setCharacters(characters);
} catch (error) {
console.error('Something went wrong fetching characters, error:', error);
}
};
// Get the characters if the gameContract is ready
if (gameContract) {
getCharacters();
}
}, [gameContract]);
return (
<div className="select-character-container">
<h2>Mint your hero. Choose wisely.</h2>
</div>
);
};
export default SelectCharacter;
This creates the following error when running (npm start
) locally, and we have a white screen of death:
index.js:17 Uncaught ReferenceError: Cannot access 'gameContract' before initialization
at index.js:17
at invokePassiveEffectCreate (react-dom.development.js:23487)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at flushPassiveEffectsImpl (react-dom.development.js:23574)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushPassiveEffects (react-dom.development.js:23447)
at react-dom.development.js:23324
at workLoop (scheduler.development.js:417)
at flushWork (scheduler.development.js:390)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
(plus some more, but we weren't able to add the whole console error in because of the length of the issue)
Before, the index.js
for SelectCharacter
looked like this:
import React, { useEffect, useState } from 'react';
import './SelectCharacter.css';
const SelectCharacter = ({ setCharacterNFT }) => {
return (
<div className="select-character-container">
<h2>Mint your hero. Choose wisely.</h2>
</div>
);
};
export default SelectCharacter;
There were some minor errors after connecting to an authorised [Metamask account]/eth wallet, but locally it still ran and allowed us to connect to our wallet:
index.ts:225 Uncaught (in promise) Error: cannot estimate gas; transaction may fail or may require manual gas limit (error={"code":-32000,"message":"execution reverted"}, method="call", transaction={"from":"0xA173f2c5d59Bdd76aDbC0E3825a36b97b89f5e2a","to":"0x5FbDB2315678afecb367f032d93F642f64180aa3","data":"0xc8cf27f4","accessList":null}, code=UNPREDICTABLE_GAS_LIMIT, version=providers/5.5.1)
at Logger.makeError (index.ts:225)
at Logger.throwError (index.ts:237)
at checkError (json-rpc-provider.ts:80)
at Web3Provider.<anonymous> (json-rpc-provider.ts:562)
at Generator.throw (<anonymous>)
at rejected (json-rpc-provider.ts:2)
What the hell is going on?
Extension of #15 by the way
The Token’s Name: Stellarium (Star, Stellars)
The Token’s Symbol: mids
The Token’s Decimal Places: 18 (default)
The Number of Tokens in Circulation: 100,000
pragma solidity ^0.4.4;
contract Token {
/// @return total amount of tokens
function totalSupply() constant returns (uint256 supply) {}
/// @param _owner The address from which the balance will be retrieved
/// @return The balance
function balanceOf(address _owner) constant returns (uint256 balance) {}
/// @notice send `_value` token to `_to` from `msg.sender`
/// @param _to The address of the recipient
/// @param _value The amount of token to be transferred
/// @return Whether the transfer was successful or not
function transfer(address _to, uint256 _value) returns (bool success) {}
/// @notice send `_value` token to `_to` from `_from` on the condition it is approved by `_from`
/// @param _from The address of the sender
/// @param _to The address of the recipient
/// @param _value The amount of token to be transferred
/// @return Whether the transfer was successful or not
function transferFrom(address _from, address _to, uint256 _value) returns (bool success) {}
/// @notice `msg.sender` approves `_addr` to spend `_value` tokens
/// @param _spender The address of the account able to transfer the tokens
/// @param _value The amount of wei to be approved for transfer
/// @return Whether the approval was successful or not
function approve(address _spender, uint256 _value) returns (bool success) {}
/// @param _owner The address of the account owning tokens
/// @param _spender The address of the account able to transfer the tokens
/// @return Amount of remaining tokens allowed to spent
function allowance(address _owner, address _spender) constant returns (uint256 remaining) {}
event Transfer(address indexed _from, address indexed _to, uint256 _value);
event Approval(address indexed _owner, address indexed _spender, uint256 _value);
}
contract StandardToken is Token {
function transfer(address _to, uint256 _value) returns (bool success) {
//Default assumes totalSupply can't be over max (2^256 - 1).
//If your token leaves out totalSupply and can issue more tokens as time goes on, you need to check if it doesn't wrap.
//Replace the if with this one instead.
//if (balances[msg.sender] >= _value && balances[_to] + _value > balances[_to]) {
if (balances[msg.sender] >= _value && _value > 0) {
balances[msg.sender] -= _value;
balances[_to] += _value;
Transfer(msg.sender, _to, _value);
return true;
} else { return false; }
}
function transferFrom(address _from, address _to, uint256 _value) returns (bool success) {
//same as above. Replace this line with the following if you want to protect against wrapping uints.
//if (balances[_from] >= _value && allowed[_from][msg.sender] >= _value && balances[_to] + _value > balances[_to]) {
if (balances[_from] >= _value && allowed[_from][msg.sender] >= _value && _value > 0) {
balances[_to] += _value;
balances[_from] -= _value;
allowed[_from][msg.sender] -= _value;
Transfer(_from, _to, _value);
return true;
} else { return false; }
}
function balanceOf(address _owner) constant returns (uint256 balance) {
return balances[_owner];
}
function approve(address _spender, uint256 _value) returns (bool success) {
allowed[msg.sender][_spender] = _value;
Approval(msg.sender, _spender, _value);
return true;
}
function allowance(address _owner, address _spender) constant returns (uint256 remaining) {
return allowed[_owner][_spender];
}
mapping (address => uint256) balances;
mapping (address => mapping (address => uint256)) allowed;
uint256 public totalSupply;
}
//name this contract whatever you'd like
contract ERC20Token is StandardToken {
function () {
//if ether is sent to this address, send it back.
throw;
}
/* Public variables of the token */
/*
NOTE:
The following variables are OPTIONAL vanities. One does not have to include them.
They allow one to customise the token contract & in no way influences the core functionality.
Some wallets/interfaces might not even bother to look at this information.
*/
string public name; //fancy name: eg Simon Bucks
uint8 public decimals; //How many decimals to show. ie. There could 1000 base units with 3 decimals. Meaning 0.980 SBX = 980 base units. It's like comparing 1 wei to 1 ether.
string public symbol; //An identifier: eg SBX
string public version = 'H1.0'; //human 0.1 standard. Just an arbitrary versioning scheme.
//
// CHANGE THESE VALUES FOR YOUR TOKEN
//
//make sure this function name matches the contract name above. So if you're token is called TutorialToken, make sure the //contract name above is also TutorialToken instead of ERC20Token
function ERC20Token(
) {
balances[msg.sender] = NUMBER_OF_TOKENS_HERE; // Give the creator all initial tokens (100000 for example)
totalSupply = NUMBER_OF_TOKENS_HERE; // Update total supply (100000 for example)
name = "NAME OF YOUR TOKEN HERE"; // Set the name for display purposes
decimals = 0; // Amount of decimals for display purposes
symbol = "SYM"; // Set the symbol for display purposes
}
/* Approves and then calls the receiving contract */
function approveAndCall(address _spender, uint256 _value, bytes _extraData) returns (bool success) {
allowed[msg.sender][_spender] = _value;
Approval(msg.sender, _spender, _value);
//call the receiveApproval function on the contract you want to be notified. This crafts the function signature manually so one doesn't have to include a contract in here just for this.
//receiveApproval(address _from, uint256 _value, address _tokenContract, bytes _extraData)
//it is assumed that when does this that the call *should* succeed, otherwise one would use vanilla approve instead.
if(!_spender.call(bytes4(bytes32(sha3("receiveApproval(address,uint256,address,bytes)"))), msg.sender, _value, this, _extraData)) { throw; }
return true;
}
}
Instructions
Resources
Information
Access to Doppler #14 -> for members
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.