- React.js
- Solidity
- Hardhat
- Tailwindcss
- Node.js@latest [stable version]
- npm
- MetaMask extension in the browser
- Clone the repository
git clone https://github.com/KushGabani/Kryptonite
cd kryptonite
- install the required packages and dependencies
cd krypt-client && npm install
cd ..
cd blockchain-contract && npm i
- Create a new Alchemy app with Ethereum as the blockchain and Ropsten as our network which will allow us to manage Blockchain API calls on our Metamask account.
- Create or signup to a MetaMask account and save the 12-word phrase in a secure place for personal future reference.
- Go to
settings > advanced settings
in your MetaMask browser extension and enableTest Networks
. - Then, Select the
Ropsten Network
from the MetaMask extension home page. The ropsten network is a test network in the ethereum blockchain. - Copy the registered address and get test ETH from Ropsten Faucet ETH
- Export the Private Key of our MetaMask account from
more
options and copy it. - Configure hardhat by creating a
.env
file forblockchain-contract/hardhat.config.js
.
ALCHEMY_ENDPOINT=YOUR_HTTP_ALCHEMY_ENDPOINT
METAMASK_PRIVATE_KEY=METAMASK_PRIVATE_KEY
- Compile the Solidity blockchain contract with hardhat by running this command in the
blockchain-contract
directory.
npx hardhat run scripts/deploy.js --network ropsten
- Copy the contract address of the artifact given as the output of the command above and replace it with
contractAddress
inkrypt-client/src/utils/constants.js
- Get the artifact created with hardhat by copying the entire file:
blockchain-contract/artifacts/contracts/Transactions.sol/Transactions.json
- Paste the entire artifact by replacing the content in
krypt-client/src/utils/transactions.json
- To query Gifs using keywords, I use API provided by developers.giphy.com. Create an account on Giphy and copy the API key provided.
- Create a
.env
file inkrypt-client/src/
and write the following -
VITE_GIPHY_API=YOUR_GIPHY_API_KEY
- Congratulation โจ! You've completed the setup, and you can run the
npm run dev
orvite
command from the terminal in thekrypt-client/
directory
You can access the web application in localhost:3000/
- Users can connect their metamask wallets in-app
- Provided a receiver address, the user can send ETH and each transaction requires
21,000 Gwei || 0.000020223 ETH
as gas fees. - Along with the transaction, the user can specify their twitter @ and a keyword through which a gif is attached to the memory of the blockchain
- Users can view all their transactions on the blockchains as user-friendly cards with etherscan links associated to each transaction.