feat(uikit): Save last connected wallet (#200)

* feat(uikit): Save last connected wallet * test: Update snapshot * style: Update text styles
pancakeswap · Jul 27, 2021 · f3a4689 · f3a4689
1 parent 6ec08b0
commit f3a4689
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 36 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx
@@ -16,20 +16,19 @@ it("renders ConnectModal correctly", () => {
     }
 
     .c12 {
-      max-height: 394px;
+      max-height: 453px;
       overflow-y: auto;
       padding-top: 24px;
       padding-bottom: 24px;
     }
 
-    .c19 {
+    .c20 {
       padding: 24px;
     }
 
     .c14 {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      grid-gap: 8px;
     }
 
     .c5 {
@@ -40,14 +39,14 @@ it("renders ConnectModal correctly", () => {
     }
 
     .c18 {
-      color: #7A6EAA;
+      color: #280D5F;
       font-size: 14px;
-      font-weight: 600;
+      font-weight: 400;
       line-height: 1.5;
       font-size: 14px;
     }
 
-    .c20 {
+    .c21 {
       color: #7A6EAA;
       font-size: 16px;
       font-weight: 400;
@@ -179,7 +178,7 @@ it("renders ConnectModal correctly", () => {
       cursor: not-allowed;
     }
 
-    .c21 {
+    .c22 {
       -webkit-align-items: center;
       -webkit-box-align: center;
       -ms-flex-align: center;
@@ -215,20 +214,20 @@ it("renders ConnectModal correctly", () => {
       width: 100%;
     }
 
-    .c21:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {
+    .c22:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {
       opacity: 0.65;
     }
 
-    .c21:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {
+    .c22:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {
       opacity: 0.85;
       -webkit-transform: translateY(1px);
       -ms-transform: translateY(1px);
       transform: translateY(1px);
       box-shadow: none;
     }
 
-    .c21:disabled,
-    .c21.pancake-button--disabled {
+    .c22:disabled,
+    .c22.pancake-button--disabled {
       background-color: #E9EAEB;
       border-color: #E9EAEB;
       box-shadow: none;
@@ -259,6 +258,18 @@ it("renders ConnectModal correctly", () => {
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;
+      margin-bottom: 8px;
+    }
+
+    .c19 {
+      -webkit-align-self: center;
+      -ms-flex-item-align: center;
+      align-self: center;
+      fill: #7A6EAA;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+      margin-bottom: 8px;
     }
 
     .c3 {
@@ -320,10 +331,10 @@ it("renders ConnectModal correctly", () => {
       display: -webkit-flex;
       display: -ms-flexbox;
       display: flex;
-      height: 80px;
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
       flex-direction: column;
+      height: auto;
       -webkit-box-pack: center;
       -webkit-justify-content: center;
       -ms-flex-pack: center;
@@ -539,7 +550,7 @@ it("renders ConnectModal correctly", () => {
                   </svg>
                   <div
                     class="c18"
-                    color="textSubtle"
+                    color="text"
                     font-size="14px"
                   >
                     Metamask
@@ -569,7 +580,7 @@ it("renders ConnectModal correctly", () => {
                   </svg>
                   <div
                     class="c18"
-                    color="textSubtle"
+                    color="text"
                     font-size="14px"
                   >
                     WalletConnect
@@ -600,7 +611,7 @@ it("renders ConnectModal correctly", () => {
                   </svg>
                   <div
                     class="c18"
-                    color="textSubtle"
+                    color="text"
                     font-size="14px"
                   >
                     TrustWallet
@@ -613,19 +624,19 @@ it("renders ConnectModal correctly", () => {
                 width="100%"
               >
                 <svg
-                  class="c17"
-                  color="text"
+                  class="c19"
+                  color="textSubtle"
                   viewBox="0 0 24 24"
                   width="40px"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z"
+                    d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
                   />
                 </svg>
                 <div
                   class="c18"
-                  color="textSubtle"
+                  color="text"
                   font-size="14px"
                 >
                   More
@@ -634,16 +645,16 @@ it("renders ConnectModal correctly", () => {
             </div>
           </div>
           <div
-            class="c19"
+            class="c20"
           >
             <p
-              class="c20"
+              class="c21"
               color="textSubtle"
             >
               Haven't got a crypto wallet yet?
             </p>
             <a
-              class="c21"
+              class="c22"
               href="https://docs.pancakeswap.finance/get-started/connection-guide"
               rel="noreferrer noopener"
               scale="md"

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx b/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx
@@ -8,8 +8,8 @@ import Heading from "../../components/Heading/Heading";
 import { Button } from "../../components/Button";
 import { ModalBody, ModalCloseButton, ModalContainer, ModalHeader, ModalTitle } from "../Modal";
 import WalletCard, { MoreWalletCard } from "./WalletCard";
-import config from "./config";
-import { Login } from "./types";
+import config, { walletLocalStorageKey } from "./config";
+import { Config, Login } from "./types";
 
 interface Props {
   login: Login;
@@ -21,11 +21,36 @@ const WalletWrapper = styled(Box)`
   border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
 `;
 
-const sortedConfig = config.sort((a, b) => a.priority - b.priority);
+/**
+ * Checks local storage if we have saved the last wallet the user connected with
+ * If we find something we put it at the top of the list
+ *
+ * @returns sorted config
+ */
+const getPreferredConfig = (walletConfig: Config[]) => {
+  const preferredWalletName = localStorage.getItem(walletLocalStorageKey);
+  const sortedConfig = walletConfig.sort((a: Config, b: Config) => a.priority - b.priority);
+
+  if (!preferredWalletName) {
+    return sortedConfig;
+  }
+
+  const preferredWallet = sortedConfig.find((sortedWalletConfig) => sortedWalletConfig.title === preferredWalletName);
+
+  if (!preferredWallet) {
+    return sortedConfig;
+  }
+
+  return [
+    preferredWallet,
+    ...sortedConfig.filter((sortedWalletConfig) => sortedWalletConfig.title !== preferredWalletName),
+  ];
+};
 
 const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayCount = 3 }) => {
   const [showMore, setShowMore] = useState(false);
   const theme = useTheme();
+  const sortedConfig = getPreferredConfig(config);
   const displayListConfig = showMore ? sortedConfig : sortedConfig.slice(0, displayCount);
 
   return (
@@ -37,8 +62,8 @@ const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayC
         <ModalCloseButton onDismiss={onDismiss} />
       </ModalHeader>
       <ModalBody width={["320px", null, "340px"]}>
-        <WalletWrapper py="24px" maxHeight="394px" overflowY="auto">
-          <Grid gridTemplateColumns="1fr 1fr" gridGap="8px">
+        <WalletWrapper py="24px" maxHeight="453px" overflowY="auto">
+          <Grid gridTemplateColumns="1fr 1fr">
             {displayListConfig.map((wallet) => (
               <Box key={wallet.title}>
                 <WalletCard walletConfig={wallet} login={login} onDismiss={onDismiss} />

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx b/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx
@@ -4,7 +4,7 @@ import Button from "../../components/Button/Button";
 import Text from "../../components/Text/Text";
 import MoreHoriz from "../../components/Svg/Icons/MoreHoriz";
 import { ButtonProps } from "../../components/Button";
-import { connectorLocalStorageKey } from "./config";
+import { connectorLocalStorageKey, walletLocalStorageKey } from "./config";
 import { Login, Config, ConnectorNames } from "./types";
 
 interface Props {
@@ -27,15 +27,14 @@ export const MoreWalletCard: React.FC<ButtonProps> = (props) => {
   return (
     <WalletButton variant="tertiary" {...props}>
       <MoreHoriz width="40px" mb="8px" color="textSubtle" />
-      <Text bold color="textSubtle" fontSize="14px">
-        More
-      </Text>
+      <Text fontSize="14px">More</Text>
     </WalletButton>
   );
 };
 
 const WalletCard: React.FC<Props> = ({ login, walletConfig, onDismiss }) => {
   const { title, icon: Icon } = walletConfig;
+
   return (
     <WalletButton
       variant="tertiary"
@@ -49,15 +48,14 @@ const WalletCard: React.FC<Props> = ({ login, walletConfig, onDismiss }) => {
           login(walletConfig.connectorId);
         }
 
-        window.localStorage.setItem(connectorLocalStorageKey, walletConfig.connectorId);
+        localStorage.setItem(walletLocalStorageKey, walletConfig.title);
+        localStorage.setItem(connectorLocalStorageKey, walletConfig.connectorId);
         onDismiss();
       }}
       id={`wallet-connect-${title.toLocaleLowerCase()}`}
     >
       <Icon width="40px" mb="8px" />
-      <Text bold color="textSubtle" fontSize="14px">
-        {title}
-      </Text>
+      <Text fontSize="14px">{title}</Text>
     </WalletButton>
   );
 };

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/config.tsx b/packages/pancake-uikit/src/widgets/WalletModal/config.tsx
@@ -62,4 +62,5 @@ const connectors: Config[] = [
 ];
 
 export default connectors;
-export const connectorLocalStorageKey = "connectorId";
+export const connectorLocalStorageKey = "connectorIdv2";
+export const walletLocalStorageKey = "wallet";