chore: misc

* Fix setting emai after registration
* Add better error reporting on the frontend
* Better listing UI on mobile

Author: SychO9

extend.php

@@ -11,11 +11,8 @@
 
 namespace Blomstra\Web3;
 
-use Blomstra\Web3\Exception\InvalidSignatureException;
-use Blomstra\Web3\Query\Web3AccountFilterer;
 use Fig\Http\Message\StatusCodeInterface;
 use Flarum\Api\Serializer\CurrentUserSerializer;
-use Flarum\Api\Serializer\ForumSerializer;
 use Flarum\Extend;
 use Flarum\Frontend\Document;
 
@@ -40,7 +37,8 @@
         ->get('/web3/accounts', 'web3-accounts.index', Api\Controller\ListWeb3AccountsController::class)
         ->post('/web3/accounts', 'web3-accounts.create', Api\Controller\CreateWeb3AccountController::class)
         ->delete('/web3/accounts/{id}', 'web3-accounts.delete', Api\Controller\DeleteWeb3AccountController::class)
-        ->post('/web3/token', 'web3-accounts.token', Api\Controller\CreateTokenWithWeb3Account::class),
+        ->post('/web3/token', 'web3-accounts.token', Api\Controller\CreateTokenWithWeb3Account::class)
+        ->put('/web3/set-email', 'web3.set-email', Api\Controller\SetUserEmailController::class),
 
     (new Extend\Routes('forum'))
         ->post('/web3/login', 'web3-accounts.login', Forum\Controller\LoginWithWeb3AccountController::class)

js/src/forum/components/ChangeEmailModal.tsx

@@ -0,0 +1,67 @@
+import app from 'flarum/forum/app';
+import Button from 'flarum/common/components/Button';
+import BaseChangeEmailModal from 'flarum/forum/components/ChangeEmailModal';
+
+export default class ChangeEmailModal extends BaseChangeEmailModal {
+  content() {
+    if (this.success) {
+      return super.content();
+    }
+
+    return (
+      <div className="Modal-body">
+        <div className="Form Form--centered">
+          <div className="Form-group">
+            <input
+              type="email"
+              name="email"
+              className="FormControl"
+              placeholder={app.session.user!.email()}
+              bidi={this.email}
+              disabled={this.loading}
+            />
+          </div>
+          <div className="Form-group">
+            {Button.component(
+              {
+                className: 'Button Button--primary Button--block',
+                type: 'submit',
+                loading: this.loading,
+              },
+              app.translator.trans('core.forum.change_email.submit_button')
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onsubmit(e: SubmitEvent) {
+    e.preventDefault();
+
+    // If the user hasn't actually entered a different email address, we don't
+    // need to do anything. Woot!
+    if (this.email() === app.session.user!.email()) {
+      this.hide();
+      return;
+    }
+
+    this.loading = true;
+    this.alertAttrs = null;
+
+    app
+      .request({
+        url: app.forum.attribute('apiUrl') + '/web3/set-email',
+        method: 'PUT',
+        body: {
+          data: { email: this.email() },
+        },
+        errorHandler: this.onerror.bind(this),
+      })
+      .then(() => {
+        this.success = true;
+      })
+      .catch(() => {})
+      .then(this.loaded.bind(this));
+  }
+}

js/src/forum/components/ConnectWalletModal.tsx

@@ -8,6 +8,7 @@ import EvmConnectWalletModal from './EvmConnectWalletModal';
 export interface IConnectWalletModalAttrs extends IInternalModalAttrs {
   username: string;
   onattach?: (address: string, signature: string, source: string, type: string) => void;
+  onclose: Function;
 }
 
 type WalletTypeName = 'evm' | 'polkadot';
@@ -20,6 +21,11 @@ const nameToComponent: Record<WalletTypeName, ComponentClass> = {
 export default class ConnectWalletModal<CustomAttrs extends IConnectWalletModalAttrs = IConnectWalletModalAttrs> extends Modal<CustomAttrs> {
   private current: WalletTypeName | null = null;
 
+  hide() {
+    this.attrs.onclose();
+    super.hide();
+  }
+
   className(): string {
     return 'ConnectWalletModal';
   }
@@ -43,7 +49,7 @@ export default class ConnectWalletModal<CustomAttrs extends IConnectWalletModalA
               {app.translator.trans('blomstra-web3.forum.connect-wallet-modal.goback')}
             </Button>
           </div>
-          <ComponentName onerror={this.onerror} {...this.attrs} key={this.current} />
+          <ComponentName onerror={this.onerror.bind(this)} {...this.attrs} key={this.current} />
         </div>
       );
     }

js/src/forum/components/EvmConnectWalletModal.tsx

@@ -39,9 +39,7 @@ import Component from 'flarum/common/Component';
 //   }
 // }
 
-export interface IEvmConnectWalletModalAttrs extends IConnectWalletModalAttrs {
-  onerror: Function;
-}
+export interface IEvmConnectWalletModalAttrs extends IConnectWalletModalAttrs {}
 
 export default class EvmConnectWalletModal<
   CustomAttrs extends IEvmConnectWalletModalAttrs = IEvmConnectWalletModalAttrs
@@ -143,8 +141,9 @@ export default class EvmConnectWalletModal<
       }
 
       if (this.attrs.onattach) this.attrs.onattach(this.currentAddress!, signature, source, type);
-    } catch (e) {
+    } catch (error: any) {
       app.alerts.show({ type: 'error' }, app.translator.trans('blomstra-web3.forum.connect-wallet-modal.could-not-sign'));
+      app.alerts.show({ type: 'error' }, error.message);
     }
 
     m.redraw();

js/src/forum/components/LogInModal.tsx

@@ -78,8 +78,10 @@ export default class LogInModal extends BaseLogInModal {
               },
               errorHandler: this.onerror.bind(this),
             })
-            .then(() => window.location.reload(), this.loaded.bind(this));
+            .then(() => window.location.reload(), this.loaded.bind(this))
+            .finally(() => (this.loading = false));
         },
+        onclose: () => (this.loading = false),
       },
       true
     );

js/src/forum/components/SignUpModal.tsx

@@ -91,8 +91,10 @@ export default class SignUpModal extends BaseSignUpModal {
               },
               errorHandler: this.onerror.bind(this),
             })
-            .then(() => window.location.reload(), this.loaded.bind(this));
+            .then(() => window.location.reload(), this.loaded.bind(this))
+            .finally(() => (this.loading = false));
         },
+        onclose: () => (this.loading = false),
       },
       true
     );

js/src/forum/components/WalletAccounts.tsx

@@ -137,8 +137,9 @@ export default class WalletAccounts<CustomAttrs extends IWalletAccountsAttrs = I
         }
 
         if (this.attrs.onattach) this.attrs.onattach(hexAddress, signature, source, type);
-      } catch (err) {
+      } catch (error: any) {
         app.alerts.show({ type: 'error' }, app.translator.trans('blomstra-web3.forum.connect-wallet-modal.could-not-sign'));
+        app.alerts.show({ type: 'error' }, error.message);
       }
 
       this.loading = false;

js/src/forum/components/alertNoEmail.js

@@ -1,6 +1,6 @@
 import Alert from 'flarum/common/components/Alert';
-import ChangeEmailModal from 'flarum/forum/components/ChangeEmailModal';
 import Button from 'flarum/common/components/Button';
+import ChangeEmailModal from './ChangeEmailModal';
 
 /**
  * Shows an alert if the user signed up with no email address.

less/components/AttachedAccounts.less

@@ -7,7 +7,7 @@
   &-account {
     --icon-size: 32px;
     display: grid;
-    grid-template-columns: var(--icon-size) 1fr 1fr;
+    grid-template-columns: var(--icon-size) 3fr 1fr;
     align-items: center;
     grid-gap: 16px;
     padding: 8px;
@@ -30,6 +30,12 @@
 
     &-address {
       font-weight: bold;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &-content {
+      overflow: hidden;
     }
 
     &-wallet {

locale/en.yml

@@ -43,11 +43,11 @@ blomstra-web3:
       unbind_confirm: Are you sure you want to unbind this address from your account?
     log-in:
       basic-login-link: Switch to basic Login
-      with-wallet: Log in with web3
+      with-wallet: Log In with web3
       select-wallet-account: => blomstra-web3.ref.select-wallet-account
     sign-up:
       basic-signup-link: Switch to basic Signup
-      with-wallet: Sign up with web3
+      with-wallet: Sign Up with web3
       select-wallet-account: => blomstra-web3.ref.select-wallet-account
 
   ref: