From db7408e3f1a382e6cba3588b588f3568525f05fe Mon Sep 17 00:00:00 2001 From: Lewis Freiberg Date: Sat, 15 Aug 2020 23:21:25 +0200 Subject: [PATCH 01/13] Add Wallet Icons + Add ReactSVG --- yam-www/package.json | 1 + yam-www/src/assets/img/metamask.svg | 1 + yam-www/src/assets/img/walletconnect.svg | 1 + yam-www/src/assets/img/walletlink.svg | 1 + yam-www/yarn.lock | 18 +++++++++++++++++- 5 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 yam-www/src/assets/img/metamask.svg create mode 100644 yam-www/src/assets/img/walletconnect.svg create mode 100644 yam-www/src/assets/img/walletlink.svg diff --git a/yam-www/package.json b/yam-www/package.json index 2bb4679e..2806d034 100644 --- a/yam-www/package.json +++ b/yam-www/package.json @@ -17,6 +17,7 @@ "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", + "react-svg": "^11.0.35", "styled-components": "^5.1.1", "typescript": "^3.9.7", "use-wallet": "^0.8.0", diff --git a/yam-www/src/assets/img/metamask.svg b/yam-www/src/assets/img/metamask.svg new file mode 100644 index 00000000..61b1a7d4 --- /dev/null +++ b/yam-www/src/assets/img/metamask.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yam-www/src/assets/img/walletconnect.svg b/yam-www/src/assets/img/walletconnect.svg new file mode 100644 index 00000000..f0851ac2 --- /dev/null +++ b/yam-www/src/assets/img/walletconnect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yam-www/src/assets/img/walletlink.svg b/yam-www/src/assets/img/walletlink.svg new file mode 100644 index 00000000..1c73e804 --- /dev/null +++ b/yam-www/src/assets/img/walletlink.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yam-www/yarn.lock b/yam-www/yarn.lock index 7929569e..d0bf87a8 100644 --- a/yam-www/yarn.lock +++ b/yam-www/yarn.lock @@ -1044,7 +1044,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5": version "7.11.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== @@ -1665,6 +1665,13 @@ dependencies: defer-to-connect "^1.0.1" +"@tanem/svg-injector@^8.0.62": + version "8.0.63" + resolved "https://registry.yarnpkg.com/@tanem/svg-injector/-/svg-injector-8.0.63.tgz#d288decdc534195b261b38ebb1e777dbb9ddf6f7" + integrity sha512-k3wglWiUw1OOmCfjSSGWdkbdw/r9YyTgQU8KPu+nHDkCWfiLc1zJpIS35autHvIor54FLBsyIlnBz8buCr8/pw== + dependencies: + "@babel/runtime" "^7.11.2" + "@testing-library/dom@*": version "7.21.8" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.21.8.tgz#b64b266264bff9135eba3b5c6d4ddc995a3371e6" @@ -11678,6 +11685,15 @@ react-scripts@3.4.1: optionalDependencies: fsevents "2.1.2" +react-svg@^11.0.35: + version "11.0.35" + resolved "https://registry.yarnpkg.com/react-svg/-/react-svg-11.0.35.tgz#dfdda7b2f77a4be7b843fd9995147d5714bc4de7" + integrity sha512-5WpRWH5Q7yByoj1FdB/FRLm20X+H8UsI81sQ+0dw0PL4OVjF4n6WTk4pr4/x17vklR3yGcY3cGyaDdnZZryp/w== + dependencies: + "@babel/runtime" "^7.11.2" + "@tanem/svg-injector" "^8.0.62" + prop-types "^15.7.2" + react@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" From 6778cd0d3d3353556015900b1dfbfe54ce326318 Mon Sep 17 00:00:00 2001 From: Lewis Freiberg Date: Sat, 15 Aug 2020 23:23:03 +0200 Subject: [PATCH 02/13] Create WalletProviderModal --- .../TopBar/components/WalletProviderModal.tsx | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 yam-www/src/components/TopBar/components/WalletProviderModal.tsx diff --git a/yam-www/src/components/TopBar/components/WalletProviderModal.tsx b/yam-www/src/components/TopBar/components/WalletProviderModal.tsx new file mode 100644 index 00000000..4376a4c8 --- /dev/null +++ b/yam-www/src/components/TopBar/components/WalletProviderModal.tsx @@ -0,0 +1,92 @@ +import React, { useCallback, useMemo } from 'react' +import styled from 'styled-components' + +import { useWallet } from 'use-wallet' + +import { ReactSVG } from 'react-svg' +import metamask from '../../../assets/img/metamask.svg' +import walletconnect from '../../../assets/img/walletconnect.svg' +import walletlink from '../../../assets/img/walletlink.svg' + +import Button from '../../Button' +import CardIcon from '../../CardIcon' +import IconButton from '../../IconButton' +import { AddIcon, RemoveIcon } from '../../icons' +import Label from '../../Label' +import Modal, { ModalProps } from '../../Modal' +import ModalTitle from '../../ModalTitle' + +const WalletProviderModal: React.FC = ({ onDismiss }) => { + const handleCancelClick = useCallback(() => { + onDismiss!() + }, [onDismiss]) + + const { connect } = useWallet() + + return ( + + + + connect('injected')}> + + + + + + + + connect('walletconnect')}> + + + + + + + + connect('walletlink')}> + + + + + + + + + + + )} ) } +const StyledProviderRow = styled.div` + display: flex; + flex-direction: row; + justify-content: space-around; +` + +const StyledProviderIcon = styled.div` + height: 25px; + width: 25px; + margin-right: 5px; +` + const StyledAccountButton = styled.div`` -export default AccountButton \ No newline at end of file +export default AccountButton From 883fd25b199e25950a126c822c3095278f69883c Mon Sep 17 00:00:00 2001 From: Lewis Freiberg Date: Sun, 16 Aug 2020 14:53:09 +0200 Subject: [PATCH 09/13] Remove doubled up Page components --- yam-www/src/views/Home/Home.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/yam-www/src/views/Home/Home.tsx b/yam-www/src/views/Home/Home.tsx index fb1f6bf4..9021d725 100644 --- a/yam-www/src/views/Home/Home.tsx +++ b/yam-www/src/views/Home/Home.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import { useWallet } from 'use-wallet' -import Page from '../../components/Page' import PageHeader from '../../components/PageHeader' import Spacer from '../../components/Spacer' @@ -41,7 +40,7 @@ const Home: React.FC = () => { }, [yam]) return ( - + <>
{ />
- + ) } From b6176b1bf1e75881b0b69b6f6de894556c132dbb Mon Sep 17 00:00:00 2001 From: Lewis Freiberg Date: Sun, 16 Aug 2020 14:53:55 +0200 Subject: [PATCH 10/13] Remove Page component & make button show modal --- yam-www/src/views/Farms/Farms.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/yam-www/src/views/Farms/Farms.tsx b/yam-www/src/views/Farms/Farms.tsx index 40322205..ec472b03 100644 --- a/yam-www/src/views/Farms/Farms.tsx +++ b/yam-www/src/views/Farms/Farms.tsx @@ -5,11 +5,12 @@ import { useRouteMatch, } from 'react-router-dom' import { useWallet } from 'use-wallet' +import WalletProviderModal from '../../components/TopBar/components/WalletProviderModal' import farmer from '../../assets/img/farmer.png' +import useModal from '../../hooks/useModal' import Button from '../../components/Button' -import Page from '../../components/Page' import PageHeader from '../../components/PageHeader' import Farm from '../Farm' @@ -18,10 +19,10 @@ import FarmCards from './components/FarmCards' const Farms: React.FC = () => { const { path } = useRouteMatch() - const { account, connect } = useWallet() + const { account } = useWallet() + const [onPresentWalletProvider] = useModal() return ( - {!!account ? ( <> @@ -43,13 +44,9 @@ const Farms: React.FC = () => { flex: 1, justifyContent: 'center', }}> - - - )} - - ) + const { account, connector, status } = useWallet() + console.log(status) + // Catch connection & error + switch (status) { + case 'disconnected': + return ( + + + + + ) + break + case 'error': + return ( + +