From 8d8d090f09ae7878991424558b7a89a97b3d2a08 Mon Sep 17 00:00:00 2001
From: okanzdmr <okanozdemir@anadolu.edu.tr>
Date: Tue, 7 Jun 2022 23:14:45 +0300
Subject: [PATCH] add: wallet options

---
 .../Screens/ConnectWallet/ConnectWallet.tsx   | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/ConnectWallet.tsx b/packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/ConnectWallet.tsx
index 85e3e9ec0d..749e858a50 100644
--- a/packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/ConnectWallet.tsx
+++ b/packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/ConnectWallet.tsx
@@ -1,5 +1,12 @@
 import React from "react";
-import { Typography } from "@material-ui/core";
+import {
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Typography,
+  withStyles,
+} from "@material-ui/core";
 
 import Modal, { useGenericModalStyles } from "../../Modals/Modal";
 import { EAPP_STATE } from "../../../constants";
@@ -13,6 +20,16 @@ const ConnectWallet: React.FC<IConnectWalletProps> = ({
 }: IConnectWalletProps) => {
   const modalClasses = useGenericModalStyles();
 
+  const CustomRadio = withStyles({
+    colorSecondary: {
+      color: "#7F79B0",
+      "&$checked": {
+        color: "#7F79B0",
+      },
+    },
+    checked: {},
+  })(Radio);
+
   const onPrimaryButtonClick = () => {
     document.dispatchEvent(new CustomEvent("SD_CONNECT_TO_WALLET_REQUEST"));
   };
@@ -52,6 +69,25 @@ const ConnectWallet: React.FC<IConnectWalletProps> = ({
             Choose and connect your wallet with Snickerdoodle Data Wallet to
             gain NFTs or other rewards!
           </Typography>
+          <FormControl>
+            <RadioGroup
+              aria-labelledby="demo-controlled-radio-buttons-group"
+              name="controlled-radio-buttons-group"
+              value={"metamask"}
+              onChange={() => {}}
+            >
+              <FormControlLabel
+                value="metamask"
+                control={<CustomRadio color="secondary" />}
+                label="MetaMask"
+              />
+              <FormControlLabel
+                value="phantom"
+                control={<CustomRadio color="secondary" />}
+                label="Phantom"
+              />
+            </RadioGroup>
+          </FormControl>
         </>
       }
     />