Better wallet connect flow

packages/alchemy/src/components/Redemptions/RedemptionsButton.scss

@@ -10,13 +10,14 @@
     position: absolute;
     top: 11px;
     right: -11px;
-    width: 15px;
+    width: fit-content;
     height: 15px;
     border-radius: 20%;
     background-color: $accent-2;
     text-align: center;
     font-size: $caption;
     line-height: initial;
+    padding: 0px 3px;
   }
 }
 

packages/alchemy/src/layouts/App.scss

@@ -310,7 +310,7 @@ body {
           background-color: rgba(252, 253, 255, 1);
           position: absolute;
           top: -3px;
-          right: 12px;
+          right: 25px;
         }
 
         .walletDetails {
@@ -540,6 +540,7 @@ body {
         font-size: 13px;
         position: relative;
         right: 12px;
+        padding-left: 13px;
       }
 
       &.noAccount {

packages/alchemy/src/layouts/Header.tsx

@@ -1,6 +1,6 @@
 import * as uiActions from "@store/ui/uiActions";
 import { threeBoxLogout } from "@store/profiles/profilesActions";
-import { enableWalletProvider, getAccountIsEnabled, logout, getWeb3ProviderInfo, getWeb3Provider, providerHasConfigUi, getArcs } from "arc";
+import { enableWalletProvider, getAccountIsEnabled, logout, getWeb3ProviderInfo, getWeb3Provider, providerHasConfigUi, getArcs, getCachedAccount } from "arc";
 import AccountImage from "components/Account/AccountImage";
 import AccountProfileName from "components/Account/AccountProfileName";
 import RedemptionsButton from "components/Redemptions/RedemptionsButton";
@@ -69,22 +69,18 @@ type IProps = IExternalProps & IStateProps & IDispatchProps & ISubscriptionProps
 
 class Header extends React.Component<IProps, null> {
 
-  constructor (props: IProps) {
+  constructor(props: IProps) {
     super(props);
   }
 
   public componentDidMount() {
     this.setState({ alchemyVersion: PACKAGE_VERSION ?? "Not found" });
+    if (getCachedAccount() && !getAccountIsEnabled()) {
+      this.handleClickLogin();
+    }
   }
 
-  public handleClickLogin = async (_event: any): Promise<void> => {
-    enableWalletProvider({
-      suppressNotifyOnSuccess: true,
-      showNotification: this.props.showNotification,
-    }, undefined);
-  }
-
-  public handleConnect = async (_event: any): Promise<void> => {
+  public handleClickLogin = async (_event?: any): Promise<void> => {
     enableWalletProvider({
       suppressNotifyOnSuccess: true,
       showNotification: this.props.showNotification,
@@ -139,10 +135,10 @@ class Header extends React.Component<IProps, null> {
             />
           </div>
           <div className={css.redemptionsButton}>
-            <RedemptionsButton currentAccountAddress={currentAccountAddress} />
+            {accountIsEnabled && <RedemptionsButton currentAccountAddress={currentAccountAddress} />}
           </div>
           <div className={css.accountInfo}>
-            {currentAccountAddress ?
+            {currentAccountAddress && accountIsEnabled ?
               <span>
                 <div className={css.accountInfoContainer}>
                   <div className={css.accountImage}>
@@ -176,45 +172,36 @@ class Header extends React.Component<IProps, null> {
                     </div>
                   </div>
                   {network &&
-                  <React.Fragment>
-                    <AccountBalances dao={dao ? dao : null} address={currentAccountAddress} network={network} arc={getArcs()[network]} />
-                    <div className={css.currentNetwork}>
-                      <div className={css.title}>Network</div>
-                      {network}
-                    </div>
-                  </React.Fragment>
+                    <React.Fragment>
+                      <AccountBalances dao={dao ? dao : null} address={currentAccountAddress} network={network} arc={getArcs()[network]} />
+                      <div className={css.currentNetwork}>
+                        <div className={css.title}>Network</div>
+                        {network}
+                      </div>
+                    </React.Fragment>
                   }
-                  <div className={css.logoutButtonContainer}>
-                    {accountIsEnabled ?
-                      <div className={css.web3ProviderLogoutSection}>
-                        <div className={css.provider}>
-                          <div className={css.title}>Provider</div>
-                          <div className={css.name}>{web3ProviderInfo.name}</div>
-                        </div>
-                        {providerHasConfigUi(web3Provider) ?
-                          <div className={css.providerconfig}><ProviderConfigButton provider={web3Provider} providerName={web3ProviderInfo.name}></ProviderConfigButton></div>
-                          : ""
-                        }
-                        <div className={css.web3ProviderLogInOut} onClick={this.handleClickLogout}><div className={css.text}>Log out</div> <img src="/assets/images/Icon/logout.svg" /></div>
-                      </div> :
-                      <div className={css.web3ProviderLogInOut} onClick={this.handleConnect}><div className={css.text}>Connect</div> <img src="/assets/images/Icon/login.svg" /></div>}
-                  </div>
+                  {accountIsEnabled && <div className={css.logoutButtonContainer}>
+                    <div className={css.web3ProviderLogoutSection}>
+                      <div className={css.provider}>
+                        <div className={css.title}>Provider</div>
+                        <div className={css.name}>{web3ProviderInfo.name}</div>
+                      </div>
+                      {
+                        providerHasConfigUi(web3Provider) &&
+                        <div className={css.providerconfig}><ProviderConfigButton provider={web3Provider} providerName={web3ProviderInfo.name}></ProviderConfigButton></div>
+                      }
+                      <div className={css.web3ProviderLogInOut} onClick={this.handleClickLogout}><div className={css.text}>Disconnect Wallet</div> <img src="/assets/images/Icon/logout.svg" /></div>
+                    </div>
+                  </div>}
                 </div>
               </span> : <span></span>
             }
-            {!currentAccountAddress ?
-              <div className={css.web3ProviderLogin}>
+            {
+              (!currentAccountAddress || !accountIsEnabled) && <div className={css.web3ProviderLogin}>
                 <button onClick={this.handleClickLogin} data-test-id="loginButton">
-                  Log in <img src="/assets/images/Icon/login-white.svg" />
+                  Connect Wallet
                 </button>
               </div>
-              : (!accountIsEnabled) ?
-                <div className={css.web3ProviderLogin}>
-                  <button onClick={this.handleConnect} data-test-id="connectButton">
-                    <span className={css.connectButtonText}>Connect</span><img src="/assets/images/Icon/login-white.svg" />
-                  </button>
-                </div>
-                : ""
             }
           </div>
         </nav>

packages/alchemy/test/integration/rewards.e2e.ts

@@ -22,28 +22,6 @@ describe("Header redemptions button", () => {
     await viewAllRedemptionsLink.waitForDisplayed();
     await viewAllRedemptionsLink.click();
   });
-
-  it("should redirect us to the redemptions page on mobile devices", async () => {
-    await browser.setWindowSize(320, 640);
-    const actualWindowSize = await browser.getWindowSize();
-
-    // Skip test if the OS doesn't allow window to be resized
-    if (actualWindowSize.width === 320) {
-      await browser.url("http://127.0.0.1:3000");
-      // For some reason, the connect button shows up after refreshing, even
-      // though we're already logged in.
-      const connectButton = await $("[data-test-id=\"connectButton\"]");
-      await connectButton.click();
-      await connectButton.waitForDisplayed(undefined);
-
-      const redemptionsButton = await $("[data-test-id=\"redemptionsButton\"]");
-      await redemptionsButton.click();
-
-      (await browser.getUrl()).should.equal("http://127.0.0.1:3000/redemptions");
-    }
-
-    await browser.setWindowSize(1920, 1080);
-  });
 });
 
 describe("Redemptions page", () => {
@@ -61,12 +39,8 @@ describe("Redemptions page", () => {
   });
 
   it("should redeem a reward", async () => {
-    await hideCookieAcceptWindow();
-
     await browser.url("http://127.0.0.1:3000/redemptions");
-    const connectButton = await $("*[data-test-id=\"connectButton\"]");
-    await connectButton.waitForDisplayed();
-    await connectButton.click();
+    await hideCookieAcceptWindow();
 
     const proposalId = testAddresses.test.executedProposalId;
     const proposalCard = await $(`[data-test-id="proposal-${proposalId}"]`);