Fix #11 Copy icon function and alinging the text box, styling

Signed-off-by: George J Padayatti <[email protected]>
L3-iGrant · Nov 14, 2022 · 0bcb1a3 · 0bcb1a3
1 parent 1ffbf42
commit 0bcb1a3
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/src/views/company-views/components/walletdetails/index.tsx b/src/views/company-views/components/walletdetails/index.tsx
@@ -1,9 +1,10 @@
-import { Alert, Button, Drawer, Radio, Row, Space, Input } from 'antd';
+import { Alert, Button, Drawer, Radio, Row, Space, Input, Col, Tooltip } from 'antd';
 import type { RadioChangeEvent } from 'antd';
 import { useEffect, useState } from 'react';
 import styled from "styled-components";
-import { CloseCircleOutlined } from "@ant-design/icons";
+import { CloseCircleOutlined, CopyOutlined } from "@ant-design/icons";
 import companyService from "../../../../services/companyService";
+import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 const { TextArea } = Input;
 
@@ -19,7 +20,7 @@ const StyledAnchor = styled.a`
 `;
 
 const StyledContainer = styled.div`
-    margin-left: 30px;
+    margin-left: 24px;
 `;
 
 const StyledActionButton = styled.div`
@@ -32,6 +33,7 @@ export const WalletDetailsPage = (props: { onClose: any; open: boolean; showWall
     const { defaultWalletData } = props;
     const [selectedValue, setSelectedValue] = useState('a');
     const [connectionUrl, setConnectionUrl] = useState<any>('');
+    const [copied, setCopied] = useState(false);
     const walletData:any = {};
 
     const createInvitation = async () => {
@@ -78,9 +80,11 @@ export const WalletDetailsPage = (props: { onClose: any; open: boolean; showWall
                 This is the details of your company wallet which you can use to share your credentials with any third-party.
             </p>
             <p>
-                <Radio.Group onChange={handleChange} value={selectedValue}>
-                    <Space direction="vertical">
-                        <div>
+                <Radio.Group style={{width: "100%"}} onChange={handleChange} value={selectedValue}>
+                    <Space direction="vertical" style={{width: "100%"}}>
+                        <Row>
+                            <Col span={24}>
+                            <div>
                             <Radio value="a">Default Wallet (Provided by Bolagsverket)</Radio>
                         </div>
                         {Object.keys(defaultWalletData).length !== 0 && selectedValue === 'a' ?
@@ -89,11 +93,20 @@ export const WalletDetailsPage = (props: { onClose: any; open: boolean; showWall
                                     <strong>Wallet Details</strong>
                                 </p>
                                 <StyledWalletDiv>
-                                    <StyledAnchor>{defaultWalletData.AgentServiceEndpoint}</StyledAnchor>
+                                    <StyledAnchor style={{wordBreak: 'break-word'}}>{defaultWalletData.AgentServiceEndpoint}</StyledAnchor>
                                 </StyledWalletDiv>
                                 <StyledWalletDiv>Ledger Name: {defaultWalletData.LedgerName}</StyledWalletDiv>
                                 <StyledWalletDiv>Ledger URL: <StyledAnchor target={"_blank"} href={defaultWalletData.LedgerURL}>{defaultWalletData.LedgerURL}</StyledAnchor></StyledWalletDiv>
                                 <StyledWalletDiv>Connection URL: <TextArea rows={4} bordered={true} style={{border: "0.5px solid black", fontSize: "12px"}} size={"large"} value={connectionUrl} /></StyledWalletDiv>
+                                <StyledWalletDiv style={{display: 'flex', justifyContent: 'flex-end', marginTop: '10px'}}>
+                                    <CopyToClipboard 
+                                        text={connectionUrl} 
+                                        onCopy={() => setCopied(true)}>
+                                        <Tooltip placement="top" trigger={"click"} title={"Copied"}>
+                                            <CopyOutlined style={{ fontSize: '18px', cursor: 'pointer' }}/>
+                                        </Tooltip>
+                                    </CopyToClipboard>
+                                </StyledWalletDiv>
                             </StyledContainer> : null}
                         <div style={{ marginTop: '10px' }}>
                             <Radio value="b">{Object.keys(walletData).length !== 0 ? 'Own External Wallet' : 'Own External Wallet'}</Radio>
@@ -109,6 +122,8 @@ export const WalletDetailsPage = (props: { onClose: any; open: boolean; showWall
                                 <StyledWalletDiv>Ledger Name: {walletData.LedgerName}</StyledWalletDiv>
                                 <StyledWalletDiv>Ledger URL: <StyledAnchor href={walletData.LedgerURL} target="_blank">{walletData.LedgerURL}</StyledAnchor></StyledWalletDiv>
                             </StyledContainer> : null}
+                            </Col>
+                        </Row>
                     </Space>
                 </Radio.Group>
             </p>