From 85f8e12b98a198ec781fe86f5289485b5a37efde Mon Sep 17 00:00:00 2001 From: Ravi <ravichandraraviraviravi@gmail.com> Date: Sun, 16 Jan 2022 19:31:38 +0530 Subject: [PATCH 1/2] Added chakra componenets --- components/Converter.js | 17 +- components/Currency.js | 16 +- components/Modal.js | 46 ------ components/WalletModal.js | 51 ++++++ package-lock.json | 340 +++++++++++++++++++++++++++++++++++--- package.json | 2 + pages/_app.js | 8 +- pages/index.js | 25 +-- 8 files changed, 399 insertions(+), 106 deletions(-) delete mode 100644 components/Modal.js create mode 100644 components/WalletModal.js diff --git a/components/Converter.js b/components/Converter.js index 9525a0b..4d0a6d1 100644 --- a/components/Converter.js +++ b/components/Converter.js @@ -1,12 +1,14 @@ import { useState,useCallback } from "react" import Currency from "./Currency" -import Modal from './Modal'; +import WalletModal from './WalletModal'; +import { VStack,Heading ,useDisclosure} from "@chakra-ui/react"; export default function Converter(){ const exchangeRate=3; const [data,setData]=useState() const [isValueFromBase,setIsValueFromBase]=useState('true'); const [errors,setErrors]=useState([]); const [showModal,setShowModal]=useState(false); + const { isOpen, onOpen, onClose } = useDisclosure() function busdOnChange(event){ setIsValueFromBase(false); setData(event.target.value); @@ -16,19 +18,18 @@ export default function Converter(){ setData(event.target.value); } - function handleOnClick(event){ - setShowModal(prev=>!prev); - } + return ( - <> + <VStack> + <Heading as='h3' size={3*1}>Converter</Heading> <form> <Currency handleOnChange={nepOnChange} setErrors={setErrors} data={isValueFromBase?data:data&&Math.round((data/3)*100)/100} label="NEP"/> <Currency handleOnChange={busdOnChange} setErrors={setErrors} data={!isValueFromBase?data:data&&Math.round(data*3*100)/100} label="BUSD"/> </form> - <button onClick={handleOnClick}>Connect</button> - {showModal&&<Modal setShowModal={setShowModal}/>} - </> + <button onClick={onOpen}>Connect</button> + <WalletModal onClose={onClose} isOpen={isOpen}/> + </VStack> ) } \ No newline at end of file diff --git a/components/Currency.js b/components/Currency.js index 4693bc2..46ceb5e 100644 --- a/components/Currency.js +++ b/components/Currency.js @@ -1,4 +1,5 @@ import styles from "../styles/Currency.module.css"; +import {Box, Input, VStack,FormControl,FormLabel} from "@chakra-ui/react" export default function Currency({handleOnChange,data,label,setErrors}){ // function handleInputChange(event){ @@ -18,9 +19,16 @@ export default function Currency({handleOnChange,data,label,setErrors}){ return ( - <div className={styles.group}> - <label htmlFor="nep">{label} : </label> - <input className={styles.input} id='nep' onChange={handleOnChange} step={.01} type='number' value={data}></input> - </div> + // <div className={styles.group}> + // <label htmlFor="nep">{label} : </label> + // <input className={styles.input} id='nep' onChange={handleOnChange} step={.01} type='number' value={data}></input> + // </div> + + <VStack> + <FormControl> + <FormLabel htmlFor={label.toLowerCase()}>{label+" : "}</FormLabel> + <Input id={label.toLowerCase()} type='number' onChange={handleOnChange} value={data}/> + </FormControl> + </VStack> ) } \ No newline at end of file diff --git a/components/Modal.js b/components/Modal.js deleted file mode 100644 index ce51a0c..0000000 --- a/components/Modal.js +++ /dev/null @@ -1,46 +0,0 @@ -import styles from "../styles/Modal.module.css"; -import { useEffect, useState } from "react"; -import Web3 from "web3" -export default function Modal({setShowModal}){ - const [balance,setBalance]=useState(); - const [chainId,setChainId]=useState(); - - async function handleOnClick(){ - if(window.ethereum){ - await window.ethereum.send('eth_requestAccounts'); - const web3=new Web3(window.ethereum); - const accounts=await web3.eth.getAccounts(); - const balance=await web3.eth.getBalance(accounts[0]); - setBalance(balance); - setChainId(accounts[0]); - } - } - - return <div className={styles.modal}> - <div className={styles.modalBody}> - <button onClick={()=>setShowModal(false)} className={styles.close}>×</button> - <div className={styles.main}> - <button className={styles.connect} onClick={handleOnClick}>Connect to metamask</button> - <div className={styles.details}> - - { - chainId&& - <> - <div> - <label>Chain ID:</label> - <span>{chainId}</span> - </div> - <div> - <label>Balance </label> - <span>{balance}</span> - </div> - - </> - } - - </div> - </div> - </div> - - </div> -} \ No newline at end of file diff --git a/components/WalletModal.js b/components/WalletModal.js new file mode 100644 index 0000000..0eec6f0 --- /dev/null +++ b/components/WalletModal.js @@ -0,0 +1,51 @@ +import styles from "../styles/Modal.module.css"; +import { useEffect, useState } from "react"; +import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + Button, + VStack, + Text, +} from '@chakra-ui/react' +import Web3 from "web3" +export default function WalletModal({onClose,isOpen}){ + const [balance,setBalance]=useState(); + const [chainId,setChainId]=useState(); + + async function handleOnClick(){ + if(window.ethereum){ + await window.ethereum.send('eth_requestAccounts'); + const web3=new Web3(window.ethereum); + const accounts=await web3.eth.getAccounts(); + const balance=await web3.eth.getBalance(accounts[0]); + setBalance(balance); + setChainId(accounts[0]); + } + } + + async function handleDisconnect(){ + setChainId(); + setBalance(); + } + return ( + <Modal onClose={onClose} isOpen={isOpen}> + <ModalOverlay /> + <ModalContent> + <ModalHeader>Wallet Details</ModalHeader> + <ModalCloseButton /> + <ModalBody> + <VStack> + {chainId?<Button bgColor="red" color='white' onClick={handleDisconnect}>Disconnect Wallet</Button>:<Button onClick={handleOnClick}>Connect to Metamask</Button>} + <Text>Chain Id : {chainId}</Text> + <Text>Balance : {balance+" ETH"}</Text> + </VStack> + </ModalBody> + </ModalContent> + </Modal> + ) +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3165469..d183042 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3,6 +3,33 @@ "requires": true, "lockfileVersion": 1, "dependencies": { + "@babel/code-frame": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", + "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", + "requires": { + "@babel/highlight": "^7.16.7" + } + }, + "@babel/helper-module-imports": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", + "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", + "requires": { + "@babel/types": "^7.16.7" + }, + "dependencies": { + "@babel/types": { + "version": "7.16.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz", + "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==", + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + } + } + } + }, "@babel/helper-plugin-utils": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz", @@ -13,6 +40,67 @@ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==" }, + "@babel/highlight": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz", + "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==", + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "@babel/plugin-syntax-jsx": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz", @@ -657,20 +745,131 @@ "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz", "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==" }, + "@emotion/babel-plugin": { + "version": "11.7.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz", + "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==" + } + } + }, + "@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + }, + "dependencies": { + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==" + } + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "optional": true, + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz", + "integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==", "requires": { - "@emotion/memoize": "0.7.4" + "@emotion/memoize": "^0.7.4" } }, "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/react": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz", + "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.2", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + } + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" + }, + "@emotion/styled": { + "version": "11.6.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz", + "integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.3.0", + "@emotion/is-prop-valid": "^1.1.1", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.0.0" + } + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, "@eslint/eslintrc": { "version": "1.0.5", @@ -1151,6 +1350,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.8.tgz", "integrity": "sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==" }, + "@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, "@types/pbkdf2": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@types/pbkdf2/-/pbkdf2-3.1.0.tgz", @@ -1415,6 +1619,16 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, + "babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "requires": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1687,8 +1901,7 @@ "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, "caniuse-lite": { "version": "1.0.30001299", @@ -1891,6 +2104,18 @@ "vary": "^1" } }, + "cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + } + }, "crc-32": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz", @@ -2173,6 +2398,14 @@ "ansi-colors": "^4.1.1" } }, + "error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "requires": { + "is-arrayish": "^0.2.1" + } + }, "es-abstract": { "version": "1.19.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz", @@ -2247,8 +2480,7 @@ "escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" }, "eslint": { "version": "8.6.0", @@ -2863,6 +3095,11 @@ } } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", @@ -2943,6 +3180,21 @@ "tslib": "^2.1.0" }, "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "framesync": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", @@ -3231,6 +3483,21 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "http-cache-semantics": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", @@ -3301,7 +3568,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, "requires": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -3360,6 +3626,11 @@ "has-tostringtag": "^1.0.0" } }, + "is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" + }, "is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -3386,7 +3657,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -3585,6 +3855,11 @@ "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=" }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + }, "json-schema": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz", @@ -3686,6 +3961,11 @@ "type-check": "~0.4.0" } }, + "lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, "loader-utils": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", @@ -4184,7 +4464,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "requires": { "callsites": "^3.0.0" } @@ -4206,6 +4485,17 @@ "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz", "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw==" }, + "parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + } + }, "parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -4232,8 +4522,7 @@ "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-to-regexp": { "version": "0.1.7", @@ -4243,8 +4532,7 @@ "path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, "pbkdf2": { "version": "3.1.2", @@ -4612,7 +4900,6 @@ "version": "1.21.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz", "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==", - "dev": true, "requires": { "is-core-module": "^2.8.0", "path-parse": "^1.0.7", @@ -4622,8 +4909,7 @@ "resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, "responselike": { "version": "1.0.2", @@ -5029,8 +5315,7 @@ "supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, "swarm-js": { "version": "0.1.40", @@ -5837,6 +6122,11 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true + }, + "yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" } } } diff --git a/package.json b/package.json index e36968e..d136105 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ }, "dependencies": { "@chakra-ui/react": "^1.7.4", + "@emotion/react": "^11.7.1", + "@emotion/styled": "^11.6.0", "framer-motion": "^5.6.0", "next": "12.0.8", "react": "17.0.2", diff --git a/pages/_app.js b/pages/_app.js index 1e1cec9..fc8f88b 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,7 +1,11 @@ import '../styles/globals.css' - +import {ChakraProvider} from "@chakra-ui/react" function MyApp({ Component, pageProps }) { - return <Component {...pageProps} /> + return ( + <ChakraProvider> + <Component {...pageProps} /> + </ChakraProvider> + ) } export default MyApp diff --git a/pages/index.js b/pages/index.js index 1c23a2c..ee4c3ff 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,5 +1,6 @@ import Head from 'next/head' import Image from 'next/image' +import {Box,VStack,Input,Heading} from "@chakra-ui/react" import Converter from "../components/Converter"; import styles from '../styles/Home.module.css' export default function Home() { @@ -16,28 +17,10 @@ export default function Home() { Assignment </h1> - <div className={styles.grid}> - <div className={styles.card}> - <h2>Converter →</h2> - <Converter/> - </div> - - - </div> + <Box w='50%' mt='2' p={4} borderWidth={"1px"} borderRadius={'lg'} overflow={'hidden'}> + <Converter/> + </Box> </main> - - <footer className={styles.footer}> - <a - href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - Powered by{' '} - <span className={styles.logo}> - <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> - </span> - </a> - </footer> </div> ) } From 9eda6a1ed7592d6f024ab90662f988106c5a0314 Mon Sep 17 00:00:00 2001 From: Ravi <ravichandraraviraviravi@gmail.com> Date: Sun, 16 Jan 2022 19:40:38 +0530 Subject: [PATCH 2/2] Updated with latest label changes --- README.md | 34 ---------------------------------- components/Converter.js | 2 +- components/ErrorModal.js | 10 ---------- components/WalletModal.js | 9 ++++++--- styles/Modal.module.css | 38 -------------------------------------- 5 files changed, 7 insertions(+), 86 deletions(-) delete mode 100644 components/ErrorModal.js delete mode 100644 styles/Modal.module.css diff --git a/README.md b/README.md index b12f3e3..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,34 +0,0 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/components/Converter.js b/components/Converter.js index 4d0a6d1..dbb32ce 100644 --- a/components/Converter.js +++ b/components/Converter.js @@ -28,7 +28,7 @@ export default function Converter(){ <Currency handleOnChange={busdOnChange} setErrors={setErrors} data={!isValueFromBase?data:data&&Math.round(data*3*100)/100} label="BUSD"/> </form> - <button onClick={onOpen}>Connect</button> + <button onClick={onOpen}>Show Wallet Details</button> <WalletModal onClose={onClose} isOpen={isOpen}/> </VStack> ) diff --git a/components/ErrorModal.js b/components/ErrorModal.js deleted file mode 100644 index fdc6be0..0000000 --- a/components/ErrorModal.js +++ /dev/null @@ -1,10 +0,0 @@ -import styles from "../styles/Home.module.css"; -export default function ErrorModal({errors}){ - - return ( - <div id='error'> - {errors.map(item=><span className={styles.err} >{item}</span>)} - </div> - - ) -} \ No newline at end of file diff --git a/components/WalletModal.js b/components/WalletModal.js index 0eec6f0..984dda8 100644 --- a/components/WalletModal.js +++ b/components/WalletModal.js @@ -1,4 +1,3 @@ -import styles from "../styles/Modal.module.css"; import { useEffect, useState } from "react"; import { Modal, @@ -41,8 +40,12 @@ export default function WalletModal({onClose,isOpen}){ <ModalBody> <VStack> {chainId?<Button bgColor="red" color='white' onClick={handleDisconnect}>Disconnect Wallet</Button>:<Button onClick={handleOnClick}>Connect to Metamask</Button>} - <Text>Chain Id : {chainId}</Text> - <Text>Balance : {balance+" ETH"}</Text> + { + chainId&&<> + <Text>Chain Id : {chainId}</Text> + <Text>Balance : {balance&&balance+" ETH"}</Text> + </> + } </VStack> </ModalBody> </ModalContent> diff --git a/styles/Modal.module.css b/styles/Modal.module.css deleted file mode 100644 index e48ae3d..0000000 --- a/styles/Modal.module.css +++ /dev/null @@ -1,38 +0,0 @@ -.modal{ - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - opacity: 1; - z-index: 10; -} -.close { - background-color: inherit; - border: 0px ; - color: inherit; - float: right; - font-size: 28px; - font-weight: bold; -} - -.modalBody{ - margin: 15% auto; - background-color: rgb(190, 189, 189); - border: 2px solid rgb(58, 57, 57); - width: 80%; - height: 50%; -} - -.main{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100%; -} - -.connect{ - flex-grow: 0; - flex-basis: 1; -} \ No newline at end of file