Merge branch 'feat/wallet-connect' of github.com:blockchain/blockchai…

…n-wallet-v4-frontend into feat/wallet-connect
blockchain · Nov 19, 2021 · f85df5f · f85df5f
2 parents cbf4c03 + 0d1a55a
commit f85df5f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 45 deletions.
diff --git a/...in-wallet-v4-frontend/src/modals/Eth/WalletConnect/Steps/ApproveTransactionStep/index.tsx b/...in-wallet-v4-frontend/src/modals/Eth/WalletConnect/Steps/ApproveTransactionStep/index.tsx
@@ -5,17 +5,17 @@ import { Button, Text } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
   width: 100%;
-  height: 100%;
+  height: 100vh;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 `
 
 const ApproveTransactionStep = (props) => {
   const { data: requestDetails, sessionDetails } = props
   const txDetails = requestDetails.params[0]
-  console.log('approve this tx step!!!', requestDetails)
   const approveRequest = () => {
     props.walletConnectActions.respondToTxSendRequest({ action: 'APPROVE', requestDetails })
   }
@@ -25,43 +25,48 @@ const ApproveTransactionStep = (props) => {
 
   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: '1.5rem' }}>
-        {sessionDetails.peerMeta.name} Transaction Request
-      </Text>
-      <Text weight={800} color='grey600' size='16px' style={{ marginBottom: '0.5rem' }}>
-        Transaction Details
-      </Text>
-      <Text weight={600} color='grey600' size='12px' style={{ marginBottom: '3.5rem' }}>
-        <pre>{JSON.stringify(txDetails, null, 2)}</pre>
-      </Text>
-      <Button
-        fullwidth
-        height='48px'
-        data-e2e='acceptTransaction'
-        nature='primary'
-        size='16px'
-        style={{ marginBottom: '1rem' }}
-        onClick={approveRequest}
-      >
-        Approve Transaction
-      </Button>
-      <Button
-        fullwidth
-        height='48px'
-        data-e2e='rejectTransaction'
-        nature='warning'
-        size='16px'
-        onClick={rejectRequest}
-      >
-        Reject Transaction
-      </Button>
+      <div style={{ height: '33%' }} />
+      <div style={{ height: '33%' }}>
+        <img
+          alt='Dapp Logo'
+          height='100px'
+          width='auto'
+          style={{ marginBottom: '0.5rem' }}
+          src='https://example.walletconnect.org/favicon.ico'
+        />
+        <Text weight={600} color='grey900' size='20px' style={{ marginBottom: '1rem' }}>
+          Sushi 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={{ height: '33%', width: '100%' }}>
+        <Button
+          fullwidth
+          height='48px'
+          data-e2e='rejectTransaction'
+          nature='light-red'
+          size='16px'
+          onClick={rejectRequest}
+          style={{ marginBottom: '1rem' }}
+        >
+          Cancel
+        </Button>
+        <Button
+          fullwidth
+          height='48px'
+          data-e2e='acceptTransaction'
+          nature='primary'
+          size='16px'
+          onClick={approveRequest}
+        >
+          Confirm
+        </Button>
+      </div>
     </Wrapper>
   )
 }

diff --git a/...ockchain-wallet-v4-frontend/src/modals/Eth/WalletConnect/Steps/SessionDashboard/index.tsx b/...ockchain-wallet-v4-frontend/src/modals/Eth/WalletConnect/Steps/SessionDashboard/index.tsx
@@ -5,7 +5,7 @@ import { Text } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 120px);
   align-items: center;
   justify-content: center;
   display: flex;
@@ -23,8 +23,11 @@ const SessionDashboardStep = (props) => {
         style={{ marginBottom: '0.5rem' }}
         src={sessionDetails.peerMeta.icons[0]}
       />
-      <Text weight={600} color='grey600' size='20px'>
-        Connected to {sessionDetails.peerMeta.name}. Waiting for instructions...
+      <Text weight={600} color='grey900' size='20px'>
+        {sessionDetails.peerMeta.name} is Now Connected to Your Wallet.
+      </Text>
+      <Text weight={600} color='grey600' size='14px' style={{ marginTop: '10px' }}>
+        Waiting for instructions...
       </Text>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Eth/WalletConnect/template.loading.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Eth/WalletConnect/template.loading.tsx
@@ -5,7 +5,7 @@ import { BlockchainLoader, Text } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 80px);
   align-items: center;
   justify-content: center;
   display: flex;
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
 const Loading = () => (
   <Wrapper>
     <BlockchainLoader width='80px' height='80px' />
-    <Text weight={600} color='grey600' style={{ marginTop: '24px' }}>
+    <Text weight={600} color='grey900' style={{ marginTop: '24px' }}>
       Loading Wallet Connect
     </Text>
   </Wrapper>