From bb64ecf984d6028f8433ae8cab477da249e55cb2 Mon Sep 17 00:00:00 2001
From: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com>
Date: Wed, 22 Nov 2023 16:15:01 +0530
Subject: [PATCH] feat: add verso wallet links (#1301)

* feat: add verso wallet links

* Adjusted icons acc. to figma css

---------

Co-authored-by: Nilesh Gupta <guptanilesh2312@gmail.com>
---
 src/assets/PushSnaps/VersoIcon.svg            |  9 +++
 .../MetamaskSnap/InstallMetamaskSnapModal.tsx | 57 ++++++++++++++-----
 2 files changed, 53 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/PushSnaps/VersoIcon.svg

diff --git a/src/assets/PushSnaps/VersoIcon.svg b/src/assets/PushSnaps/VersoIcon.svg
new file mode 100644
index 0000000000..10efaae81e
--- /dev/null
+++ b/src/assets/PushSnaps/VersoIcon.svg
@@ -0,0 +1,9 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.0440292" y="0.415161" width="38" height="38" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_21180_9015" transform="scale(0.0103093)"/>
+</pattern>
+<image id="image0_21180_9015" width="97" height="97" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx b/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx
index 02aee66a82..d9d1d08de4 100644
--- a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx
+++ b/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx
@@ -10,6 +10,7 @@ import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
 import { Button } from 'components/SharedStyling';
 import Metamask from 'assets/PushSnaps/metamasksnap.svg';
 import PushIcon from 'assets/PushSnaps/PushIcon.svg';
+import VersoIcon from 'assets/PushSnaps/VersoIcon.svg';
 import AppStoreQRCode from 'assets/PushSnaps/AppStoreQRCode.svg';
 import PlayStoreQRCode from 'assets/PushSnaps/PlayStoreQRCode.svg';
 import AppleIcon from 'assets/PushSnaps/AppleIcon.svg';
@@ -91,6 +92,29 @@ const InstallMetamaskSnapModal = ({
                 </SnapInner>
                 <InstallButton>Install</InstallButton>
             </SnapContainer>
+            <SnapContainer>
+                <SnapInner>
+                    <Logo
+                        src={VersoIcon}
+                        alt="Verso Icon"
+                    />
+                    <SpanV2
+                        fontSize="16px"
+                        fontWeight="400"
+                        color={theme.modalMessageColor}
+                    >
+                        Verso Wallet
+                    </SpanV2>
+                </SnapInner>
+                <SnapInner>
+                    <a href="https://apps.apple.com/ng/app/verso-wallet-crypto-nft/id1539304605" target="_blank">
+                        <AppstoreInstallBtn><Image src={AppleIcon} width="16px" height="20px" alt='App store' /></AppstoreInstallBtn>
+                    </a>
+                    <a href="https://play.google.com/store/apps/details?id=com.btuprotocol.btu_wallet" target="_blank">
+                        <AppstoreInstallBtn><Image src={PlayStore} width="16px" height="20px" alt='Play store' /></AppstoreInstallBtn>
+                    </a>
+                </SnapInner>
+            </SnapContainer>
 
             <ItemHV2 gap='14px'>
 
@@ -179,19 +203,26 @@ const Image = styled.img`
 `
 
 const InstallButton = styled(Button)`
-  width: fit-content;
-  min-width:102px;
-  background: #D53A94;
-  color: #fff;
-  z-Index:0;
-  font-family: 'Strawford';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: normal;
-  border-radius: 8px;
-  padding: 14px 16px;
-  
+    width: fit-content;
+    min-width:102px;
+    background: #D53A94;
+    color: #fff;
+    z-Index:0;
+    font-family: 'Strawford';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: normal;
+    border-radius: 8px;
+    padding: 14px 16px;
+`;
+
+const AppstoreInstallBtn = styled(InstallButton)`
+    background: #000;
+    min-width: 0;
+    margin-left: 6px;
+    height: 36px;
+    width: 36px;
 `;
 
 const QRCodeContainer = styled(ItemVV2)`