Skip to content

Commit

Permalink
Merge branch 'feat/wallet-connect' of github.com:blockchain/blockchai…
Browse files Browse the repository at this point in the history 
…n-wallet-v4-frontend into feat/wallet-connect
  • Loading branch information
@schnogz
schnogz committed Nov 19, 2021
2 parents 88385f9 + 19f010a commit 9ee0752
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 52 deletions.
107 changes: 88 additions & 19 deletions ...in-wallet-v4-frontend/src/modals/Eth/WalletConnect/Steps/ApproveTransactionStep/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,18 @@ import { Button, Text } from 'blockchain-info-components'
const Wrapper = styled.div`
width: 100%;
height: 100vh;
align-items: center;
justify-content: space-between;
display: flex;
flex-direction: column;
overflow: hidden;
`

const TxBlock = styled.div`
display: flex;
justify-content: space-between;
margin: 15px 0px 15px 0px;
`

const ApproveTransactionStep = (props) => {
const { data: requestDetails, sessionDetails } = props
const txDetails = requestDetails.params[0]
Expand All @@ -23,26 +28,90 @@ const ApproveTransactionStep = (props) => {
props.walletConnectActions.respondToTxSendRequest({ action: 'REJECT', requestDetails })
}

const { from } = txDetails // add in later
const { to } = txDetails // add in later
const amount = txDetails.value
const { gas } = txDetails
const { gasPrice } = txDetails
const message = txDetails.data

return (
<Wrapper>
<div style={{ height: '33%' }} />
<div style={{ height: '33%' }}>
<img
alt='Dapp Logo'
height='100px'
width='auto'
style={{ marginBottom: '0.5rem' }}
src={sessionDetails.peerMeta.icons[0]}
/>
<Text weight={600} color='grey900' size='20px' style={{ marginBottom: '1rem' }}>
{sessionDetails.peerMeta.name} wants to connect
</Text>
<Text weight={500} color='grey600' size='14px' style={{ marginBottom: '0.5rem' }}>
url
</Text>
{/* <Text weight={600} color='grey600' size='12px' style={{ marginBottom: '3.5rem' }}>
<pre>{JSON.stringify(txDetails, null, 2)}</pre>
</Text> */}
<div>
<div
style={{
alignItems: 'center',
display: 'flex',
marginBottom: '1rem'
}}
>
<img
alt='Dapp Logo'
height='50px'
width='auto'
src={sessionDetails.peerMeta.icons[0]}
style={{ marginRight: '15px' }}
/>
<Text weight={600} color='grey900' size='20px'>
Signature Request
</Text>
</div>
<div>
<hr />
<TxBlock>
<Text weight={500} color='grey900' size='16px'>
From:
</Text>
<Text weight={500} color='grey900' size='16px'>
ETH Private Wallet
</Text>
</TxBlock>
<hr />
<TxBlock>
<Text weight={500} color='grey900' size='16px'>
To:
</Text>
<Text weight={500} color='grey900' size='16px'>
{sessionDetails.peerMeta.name}
</Text>
</TxBlock>
<hr />
<TxBlock>
<Text weight={500} color='grey900' size='16px'>
Amount:
</Text>
<Text weight={500} color='grey900' size='16px'>
{amount}
</Text>
</TxBlock>
<hr />
<TxBlock>
<Text weight={500} color='grey900' size='16px'>
Gas
</Text>
<Text weight={500} color='grey900' size='16px'>
{gas}
</Text>
</TxBlock>
<hr />
<TxBlock>
<Text weight={500} color='grey900' size='16px'>
Gas Price:
</Text>
<Text weight={500} color='grey900' size='16px'>
{gasPrice}
</Text>
</TxBlock>
<hr />
<div>
<Text weight={500} color='grey900' size='16px'>
Message from {sessionDetails.peerMeta.name}
</Text>
<Text weight={500} color='grey600' size='14px' style={{ marginTop: '10px' }}>
{message}
</Text>
</div>
</div>
</div>
<div style={{ height: '33%', width: '100%' }}>
<Button
Expand Down
84 changes: 51 additions & 33 deletions ...chain-wallet-v4-frontend/src/modals/Eth/WalletConnect/Steps/AuthorizeConnection/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,26 @@ import { Button, Text } from 'blockchain-info-components'

const Wrapper = styled.div`
width: 100%;
height: 100%;
height: 100vh;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center;
justify-content: space-between;
display: flex;
flex-direction: column;
`

const ButtonGroup = styled.div`
margin-bottom: 96px;
width: 100%;
`

const DappInfo = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`

const AuthorizeConnectionStep = ({ data: sessionDetails, uri, walletConnectActions }) => {
const approveRequest = () => {
walletConnectActions.respondToSessionRequest({ action: 'APPROVE', sessionDetails, uri })
Expand All @@ -24,37 +35,44 @@ const AuthorizeConnectionStep = ({ data: sessionDetails, uri, walletConnectActio

return (
<Wrapper>
<img
alt='Dapp Logo'
height='100px'
width='auto'
style={{ marginBottom: '0.5rem' }}
src={sessionDetails.peerMeta.icons[0]}
/>
<Text weight={600} color='grey600' size='20px' style={{ marginBottom: '3.5rem' }}>
{sessionDetails.peerMeta.name} is requesting to connect your ETH Private Key Wallet.
</Text>
<Button
fullwidth
height='48px'
data-e2e='acceptConnection'
nature='primary'
size='16px'
style={{ marginBottom: '1rem' }}
onClick={approveRequest}
>
Approve Connection
</Button>
<Button
fullwidth
height='48px'
data-e2e='rejectConnection'
nature='warning'
size='16px'
onClick={rejectRequest}
>
Reject Connection
</Button>
<DappInfo>
<img
alt='Dapp Logo'
height='100px'
width='auto'
style={{ marginBottom: '0.5rem' }}
src={sessionDetails.peerMeta.icons[0]}
/>
<Text weight={600} color='grey900' size='20px' style={{ marginBottom: '1rem' }}>
{sessionDetails.peerMeta.name} wants to connect.
</Text>
<Text weight={500} color='grey600' size='14px' style={{ marginBottom: '0.5rem' }}>
{sessionDetails.peerMeta.url}
</Text>
</DappInfo>
<ButtonGroup>
<Button
fullwidth
height='48px'
data-e2e='rejectConnection'
nature='light-red'
size='16px'
style={{ marginBottom: '1rem' }}
onClick={rejectRequest}
>
Cancel
</Button>
<Button
fullwidth
height='48px'
data-e2e='acceptConnection'
nature='primary'
size='16px'
onClick={approveRequest}
>
Confirm
</Button>
</ButtonGroup>
</Wrapper>
)
}
Expand Down

0 comments on commit 9ee0752

Please sign in to comment.