From 2feb7b6feb48df5d485b4ede28606245a5c7cbec Mon Sep 17 00:00:00 2001
From: RetricSu <inneverland2013@gmail.com>
Date: Sun, 9 Oct 2022 09:28:42 +0800
Subject: [PATCH] chore: add wallect icon for connector

---
 .../src/assets/wallets/imtoken.svg            |  9 ++
 .../src/assets/wallets/metamask.svg           | 19 ++++
 .../src/assets/wallets/safepal.svg            |  4 +
 .../src/assets/wallets/wallet-connect.svg     |  1 +
 .../components/WalletConnect/connector.tsx    | 94 +++++++++++++------
 .../src/components/WalletConnect/index.tsx    |  6 +-
 6 files changed, 99 insertions(+), 34 deletions(-)
 create mode 100644 apps/godwoken-bridge/src/assets/wallets/imtoken.svg
 create mode 100644 apps/godwoken-bridge/src/assets/wallets/metamask.svg
 create mode 100644 apps/godwoken-bridge/src/assets/wallets/safepal.svg
 create mode 100644 apps/godwoken-bridge/src/assets/wallets/wallet-connect.svg

diff --git a/apps/godwoken-bridge/src/assets/wallets/imtoken.svg b/apps/godwoken-bridge/src/assets/wallets/imtoken.svg
new file mode 100644
index 00000000..d6561000
--- /dev/null
+++ b/apps/godwoken-bridge/src/assets/wallets/imtoken.svg
@@ -0,0 +1,9 @@
+<svg width="513" height="362" viewBox="0 0 513 362" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M508.501 14.2778C525.228 240.849 379.587 347.939 249.024 359.359C127.639 369.975 13.3804 295.388 3.3566 180.791C-4.91197 86.115 53.6025 45.8083 99.5766 41.7904C146.862 37.6455 186.598 70.2546 190.045 109.736C193.365 147.696 169.68 164.973 153.206 166.411C140.179 167.553 123.79 159.644 122.31 142.663C121.041 128.071 126.582 126.083 125.228 110.582C122.817 82.9852 98.7518 79.7708 85.5771 80.9128C69.6321 82.3085 40.7026 100.918 44.7629 147.273C48.8443 194.029 93.6765 230.974 152.445 225.835C215.865 220.294 260.021 170.915 263.341 101.658C263.311 97.99 264.083 94.3596 265.604 91.0212L265.625 90.9366C266.308 89.486 267.107 88.0928 268.014 86.7706C269.368 84.7404 271.102 82.4988 273.344 80.0457C273.365 79.9823 273.365 79.9823 273.407 79.9823C275.035 78.1425 277.002 76.1546 279.222 74.0188C306.925 47.8808 406.698 -13.7635 501.057 5.75544C503.051 6.18293 504.854 7.24383 506.195 8.77978C507.537 10.3157 508.346 12.2444 508.501 14.2778" fill="url(#paint0_linear_88_1633)"/>
+<defs>
+<linearGradient id="paint0_linear_88_1633" x1="495.636" y1="12.0198" x2="167.313" y2="476.751" gradientUnits="userSpaceOnUse">
+<stop stop-color="#11C4D1"/>
+<stop offset="1" stop-color="#0062AD"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/godwoken-bridge/src/assets/wallets/metamask.svg b/apps/godwoken-bridge/src/assets/wallets/metamask.svg
new file mode 100644
index 00000000..162f8a2f
--- /dev/null
+++ b/apps/godwoken-bridge/src/assets/wallets/metamask.svg
@@ -0,0 +1,19 @@
+
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 318.6 318.6">
+  <style>
+    .st1,.st6{fill:#e4761b;stroke:#e4761b;stroke-linecap:round;stroke-linejoin:round}.st6{fill:#f6851b;stroke:#f6851b}
+  </style>
+  <path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round" d="m274.1 35.5-99.5 73.9L193 65.8z"/>
+  <path d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z" class="st1"/>
+  <path d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z" class="st1"/>
+  <path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round" d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z"/>
+  <path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z"/>
+  <path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round" d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z"/>
+  <path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round" d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z"/>
+  <path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z" class="st6"/>
+  <path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round" d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z"/>
+  <path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z"/>
+  <path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round" d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z"/>
+  <path d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z" class="st6"/>
+</svg>
diff --git a/apps/godwoken-bridge/src/assets/wallets/safepal.svg b/apps/godwoken-bridge/src/assets/wallets/safepal.svg
new file mode 100644
index 00000000..9840ad15
--- /dev/null
+++ b/apps/godwoken-bridge/src/assets/wallets/safepal.svg
@@ -0,0 +1,4 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M175.358 0C163.184 -1.12679e-06 151.509 4.83616 142.901 13.4445L7.68217 148.666C2.56067 153.787 -4.19303e-05 160.5 5.14944e-10 167.213C4.19313e-05 173.925 2.56083 180.638 7.68232 185.76L96.2953 274.373V117.495C96.2953 105.788 105.712 96.2969 117.419 96.2969C166.881 96.2969 287.278 96.2969 303.701 96.2969L399.996 0.00136472L175.358 0Z" fill="#4A21EF"/>
+<path d="M96.2995 303.703H282.507C294.214 303.703 303.705 294.212 303.705 282.504V125.626L392.318 214.24C397.439 219.362 400 226.074 400 232.787C400 239.5 397.439 246.212 392.318 251.334L257.099 386.555C248.491 395.163 236.816 400 224.642 400L0.00420026 399.998L96.2995 303.703Z" fill="#4A21EF"/>
+</svg>
diff --git a/apps/godwoken-bridge/src/assets/wallets/wallet-connect.svg b/apps/godwoken-bridge/src/assets/wallets/wallet-connect.svg
new file mode 100644
index 00000000..2c5d4949
--- /dev/null
+++ b/apps/godwoken-bridge/src/assets/wallets/wallet-connect.svg
@@ -0,0 +1 @@
+<svg fill="none" height="332" viewBox="0 0 480 332" width="480" xmlns="http://www.w3.org/2000/svg"><path d="m126.613 93.9842c62.622-61.3123 164.152-61.3123 226.775 0l7.536 7.3788c3.131 3.066 3.131 8.036 0 11.102l-25.781 25.242c-1.566 1.533-4.104 1.533-5.67 0l-10.371-10.154c-43.687-42.7734-114.517-42.7734-158.204 0l-11.107 10.874c-1.565 1.533-4.103 1.533-5.669 0l-25.781-25.242c-3.132-3.066-3.132-8.036 0-11.102zm280.093 52.2038 22.946 22.465c3.131 3.066 3.131 8.036 0 11.102l-103.463 101.301c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896c-.783-.767-2.052-.767-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0l-103.4657-101.302c-3.1311-3.066-3.1311-8.036 0-11.102l22.9456-22.466c3.1311-3.065 8.2077-3.065 11.3388 0l73.4333 71.897c.782.767 2.051.767 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897c.783.767 2.052.767 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z" fill="#3396ff"/></svg>
diff --git a/apps/godwoken-bridge/src/components/WalletConnect/connector.tsx b/apps/godwoken-bridge/src/components/WalletConnect/connector.tsx
index 479e8940..b6ce8cee 100644
--- a/apps/godwoken-bridge/src/components/WalletConnect/connector.tsx
+++ b/apps/godwoken-bridge/src/components/WalletConnect/connector.tsx
@@ -1,31 +1,45 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
 import { COLOR } from "../../style/variables";
-import { SecondeButton } from "../../style/common";
-import { URI_AVAILABLE } from "@web3-react/walletconnect";
-import { Popover } from "antd";
+import { ConfirmModal } from "../../style/common";
 import { connectors } from "./connectors";
+import { ReactComponent as MetaMaskIcon } from "../../assets/wallets/metamask.svg";
+import { ReactComponent as WalletConnectIcon } from "../../assets/wallets/wallet-connect.svg";
+import { ReactComponent as ImTokenIcon } from "../../assets/wallets/imtoken.svg";
+import { ReactComponent as SafePalIcon } from "../../assets/wallets/safepal.svg";
 
 const StyleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const WalletBoxWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  > a,
-  > button {
+  width: 150px;
+  height: 100px;
+  color: ${COLOR.primary};
+  text-decoration: none;
+  cursor: pointer;
+  padding: 0 10px;
+  border-radius: 8px;
+  margin: 10px 10px;
+  text-align: center;
+  line-height: 33px;
+  font-size: 14px;
+  font-weight: bold;
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: ${COLOR.primary};
+  }
+  > svg {
+    width: 120px;
+    height: 80px;
+  }
+  .title {
     color: ${COLOR.primary};
-    text-decoration: none;
-    cursor: pointer;
-    height: 33px;
-    padding: 0 10px;
-    border-radius: 8px;
-    margin: 4px 0px;
-    text-align: center;
-    line-height: 33px;
-    font-size: 14px;
-    font-weight: bold;
-    &:hover {
-      background: rgba(0, 0, 0, 0.1);
-      color: ${COLOR.primary};
-    }
   }
 `;
 
@@ -59,20 +73,35 @@ export const SelectMenu: React.FC<SelectMenuProps> = ({ handleClick }) => {
 
   return (
     <StyleWrapper>
-      <SecondeButton onClick={connectMetamask}>Metamask</SecondeButton>
-      <SecondeButton onClick={connectImToken}>ImToken</SecondeButton>
-      <SecondeButton onClick={connectSafePal}>SafePal</SecondeButton>
-      <SecondeButton onClick={connectWalletConnect}>WalletConnect</SecondeButton>
+      <WalletBoxWrapper onClick={connectMetamask}>
+        <MetaMaskIcon />
+        <div className="title">Metamask</div>
+      </WalletBoxWrapper>
+
+      <WalletBoxWrapper onClick={connectImToken}>
+        <ImTokenIcon />
+        <div className="title">ImToken</div>
+      </WalletBoxWrapper>
+
+      <WalletBoxWrapper onClick={connectSafePal}>
+        <SafePalIcon />
+        <div className="title">SafePal</div>
+      </WalletBoxWrapper>
+
+      <WalletBoxWrapper onClick={connectWalletConnect}>
+        <WalletConnectIcon />
+        <div className="title">WalletConnect</div>
+      </WalletBoxWrapper>
     </StyleWrapper>
   );
 };
 
-type ConnectorPopoverProps = {
+type ConnectorModalProps = {
   connectBtnQuerySelector: string;
   popoverVisible: boolean;
   setPopoverVisible: (v: boolean) => void;
 };
-export const ConnectorPopover: React.FC<ConnectorPopoverProps> = ({
+export const ConnectorModal: React.FC<ConnectorModalProps> = ({
   connectBtnQuerySelector,
   popoverVisible,
   setPopoverVisible,
@@ -91,12 +120,15 @@ export const ConnectorPopover: React.FC<ConnectorPopoverProps> = ({
   });
 
   return (
-    <Popover
-      content={() => <SelectMenu handleClick={closeSelectMenu}></SelectMenu>}
-      trigger="click"
-      overlayClassName="popover-menu"
+    <ConfirmModal
+      title={"Choose Wallet"}
       visible={popoverVisible}
-      placement="top"
-    ></Popover>
+      onOk={closeSelectMenu}
+      onCancel={closeSelectMenu}
+      footer={null}
+      width={400}
+    >
+      <SelectMenu handleClick={closeSelectMenu}></SelectMenu>
+    </ConfirmModal>
   );
 };
diff --git a/apps/godwoken-bridge/src/components/WalletConnect/index.tsx b/apps/godwoken-bridge/src/components/WalletConnect/index.tsx
index 41bda2b1..9e300cbc 100644
--- a/apps/godwoken-bridge/src/components/WalletConnect/index.tsx
+++ b/apps/godwoken-bridge/src/components/WalletConnect/index.tsx
@@ -5,7 +5,7 @@ import { useLightGodwoken } from "../../hooks/useLightGodwoken";
 import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { availableVersions } from "../../utils/environment";
-import { ConnectorPopover } from "./connector";
+import { ConnectorModal } from "./connector";
 import { connectors } from "./connectors";
 import { URI_AVAILABLE } from "@web3-react/walletconnect";
 
@@ -79,11 +79,11 @@ export const WalletConnect: React.FC = () => {
       <SecondeButton className="connect-wallet" onClick={connect}>
         Connect
       </SecondeButton>
-      <ConnectorPopover
+      <ConnectorModal
         connectBtnQuerySelector=".connect-wallet"
         popoverVisible={openWalletSelector}
         setPopoverVisible={setOpenWalletSelector}
-      ></ConnectorPopover>
+      ></ConnectorModal>
     </StyleWrapper>
   );
 };