From 08e3ff9f628c58125830194ec86a7535ed8ab170 Mon Sep 17 00:00:00 2001 From: Ilja Date: Mon, 14 Mar 2022 14:31:07 +0200 Subject: [PATCH] Cleanup, verify sol connection is working --- .../react-wallet-v2/src/components/Layout.tsx | 6 +- .../src/components/ProposalSelectSection.tsx | 46 ++++++++++ .../src/pages/walletconnect.tsx | 1 + .../src/views/SessionProposalModal.tsx | 92 ++++++------------- 4 files changed, 80 insertions(+), 65 deletions(-) create mode 100644 wallets/react-wallet-v2/src/components/ProposalSelectSection.tsx diff --git a/wallets/react-wallet-v2/src/components/Layout.tsx b/wallets/react-wallet-v2/src/components/Layout.tsx index 4b65214..ef957e6 100644 --- a/wallets/react-wallet-v2/src/components/Layout.tsx +++ b/wallets/react-wallet-v2/src/components/Layout.tsx @@ -36,7 +36,6 @@ export default function Layout({ children, initialized }: Props) { justifyContent: initialized ? 'normal' : 'center', alignItems: initialized ? 'normal' : 'center', borderRadius: 0, - paddingBottom: 5, '@xs': { borderRadius: '$lg', @@ -53,7 +52,8 @@ export default function Layout({ children, initialized }: Props) { paddingLeft: 2, paddingRight: 2, '@xs': { - padding: '20px' + padding: '20px', + paddingBottom: '40px' } }} > @@ -68,6 +68,8 @@ export default function Layout({ children, initialized }: Props) { position: 'sticky', justifyContent: 'flex-end', alignItems: 'flex-end', + boxShadow: '0 -30px 20px #111111', + zIndex: 200, bottom: 0, left: 0 }} diff --git a/wallets/react-wallet-v2/src/components/ProposalSelectSection.tsx b/wallets/react-wallet-v2/src/components/ProposalSelectSection.tsx new file mode 100644 index 0000000..9fe6422 --- /dev/null +++ b/wallets/react-wallet-v2/src/components/ProposalSelectSection.tsx @@ -0,0 +1,46 @@ +import AccountSelectCard from '@/components/AccountSelectCard' +import { Col, Divider, Row, Text } from '@nextui-org/react' +import { Fragment } from 'react' + +/** + * Types + */ +interface IProps { + name: string + chain: string + addresses: string[] + selectedAddresses: string[] + onSelect: (address: string) => void +} + +/** + * Component + */ +export default function ProposalSelectSection({ + name, + addresses, + selectedAddresses, + chain, + onSelect +}: IProps) { + return ( + + + + + + {`Select ${name} Accounts`} + {addresses.map((address, index) => ( + onSelect(`${chain}:${address}`)} + selected={selectedAddresses.includes(`${chain}:${address}`)} + /> + ))} + + + + ) +} diff --git a/wallets/react-wallet-v2/src/pages/walletconnect.tsx b/wallets/react-wallet-v2/src/pages/walletconnect.tsx index 5585960..a8b7940 100644 --- a/wallets/react-wallet-v2/src/pages/walletconnect.tsx +++ b/wallets/react-wallet-v2/src/pages/walletconnect.tsx @@ -32,6 +32,7 @@ export default function WalletConnectPage() { setUri(e.target.value)} value={uri} diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx index a9bd7d0..1451df6 100644 --- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx @@ -1,5 +1,5 @@ -import AccountSelectCard from '@/components/AccountSelectCard' import ProjectInfoCard from '@/components/ProjectInfoCard' +import ProposalSelectSection from '@/components/ProposalSelectSection' import RequesDetailsCard from '@/components/RequestDetalilsCard' import RequestMethodCard from '@/components/RequestMethodCard' import RequestModalContainer from '@/components/RequestModalContainer' @@ -12,13 +12,14 @@ import { eip155Addresses } from '@/utils/EIP155WalletUtil' import { isCosmosChain, isEIP155Chain, isSolanaChain } from '@/utils/HelperUtil' import { solanaAddresses } from '@/utils/SolanaWalletUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil' -import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react' +import { Button, Divider, Modal, Text } from '@nextui-org/react' import { Fragment, useState } from 'react' export default function SessionProposalModal() { const [selectedEIP155, setSelectedEip155] = useState([]) const [selectedCosmos, setSelectedCosmos] = useState([]) const [selectedSolana, setSelectedSolana] = useState([]) + const allSelected = [...selectedEIP155, ...selectedCosmos, ...selectedSolana] // Get proposal data and wallet address from store const proposal = ModalStore.state.data?.proposal @@ -66,7 +67,7 @@ export default function SessionProposalModal() { // Hanlde approve action async function onApprove() { if (proposal) { - const accounts = [...selectedEIP155, ...selectedCosmos] + const accounts = allSelected const response = { state: { accounts @@ -101,70 +102,33 @@ export default function SessionProposalModal() { {chains.map(chain => { if (isEIP155Chain(chain)) { return ( - - - - - - {`Select ${EIP155_CHAINS[chain as TEIP155Chain].name} Accounts`} - {eip155Addresses.map((address, index) => ( - onSelectEIP155(`${chain}:${address}`)} - selected={selectedEIP155.includes(`${chain}:${address}`)} - /> - ))} - - - + ) } else if (isCosmosChain(chain)) { return ( - - - - - - - {`Select ${COSMOS_MAINNET_CHAINS[chain as TCosmosChain].name} Accounts`} - - {cosmosAddresses.map((address, index) => ( - onSelectCosmos(`${chain}:${address}`)} - selected={selectedCosmos.includes(`${chain}:${address}`)} - /> - ))} - - - + ) } else if (isSolanaChain(chain)) { return ( - - - - - - - {`Select ${SOLANA_MAINNET_CHAINS[chain as TSolanaChain].name} Accounts`} - - {solanaAddresses.map((address, index) => ( - onSelectSolana(`${chain}:${address}`)} - selected={selectedSolana.includes(`${chain}:${address}`)} - /> - ))} - - - + ) } })} @@ -180,8 +144,10 @@ export default function SessionProposalModal() { flat color="success" onClick={onApprove} - disabled={![...selectedEIP155, ...selectedCosmos].length} - css={{ opacity: [...selectedEIP155, ...selectedCosmos].length ? 1 : 0.4 }} + disabled={!allSelected.length} + css={{ + opacity: allSelected.length ? 1 : 0.4 + }} > Approve