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