[web] style #accounts

juzybits · Oct 20, 2023 · 754fb42 · 754fb42
1 parent f9163b8
commit 754fb42
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -197,6 +197,9 @@ https://github.com/ronanyeah/sui-zk-wallet
 zklogin-demo | @Scale3-Labs<br/>
 https://github.com/Scale3-Labs/zklogin-demo
 
+suidouble-zklogin | @suidouble<br/>
+https://github.com/suidouble/suidouble-zklogin
+
 ### Articles
 
 zkLogin Best Practices and Business Considerations for Builders<br/>

diff --git a/web/src/App.less b/web/src/App.less
@@ -37,7 +37,7 @@ h1 {
 
 #login-buttons {
  gap: 10px;
- .login-btn {
+ .btn-login {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
@@ -54,6 +54,37 @@ h1 {
  }
 }
 
+#accounts {
+ .account {
+ width: 100%;
+ > div {
+ word-break: break-all;
+ padding: 0.2rem 0;
+ font-family: monospace;
+ font-size: 1.1em;
+ }
+ label.provider {
+ display: inline-block;
+ color: white;
+ border-radius: 6px;
+ padding: 0.15rem 0.4rem;
+ }
+ .btn-send {
+ border: 2px solid black;
+ color: black;
+ background-color: white;
+ font-size: 1rem;
+ font-weight: bold;
+ padding: 0.3rem 0.8rem;
+ margin: 0.5rem 0 1rem;
+ &:hover {
+ cursor: pointer;
+ background-color: gold;
+ }
+ }
+ }
+}
+
 &.google {
  background-color: #db4437;
 }

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -296,7 +296,7 @@ export const App: React.FC = () =>
  <h2>Log in:</h2>
  {openIdProviders.map(provider =>
  <button
- className={`login-btn ${provider}`}
+ className={`btn-login ${provider}`}
  onClick={() => beginZkLogin(provider)}
  key={provider}
  >
@@ -306,14 +306,12 @@ export const App: React.FC = () =>
  </div>
  <div id='accounts' className='section'>
  <h2>Accounts:</h2>
- {accounts.map(account =>
- <div className='account' key={account.userAddr}>
- <div className='account-details'>
- <div>Provider: {account.provider}</div>
- <div>Sui address: {shortenAddress(account.userAddr)}</div>
- <div>User ID (sub): {account.sub}</div>
- </div>
- <button onClick={() => submitTransaction(account)}>
+ {accounts.map(acct =>
+ <div className='account' key={acct.userAddr}>
+ <div><label className={`provider ${acct.provider}`}>{acct.provider}</label></div>
+ <div>Address: {shortenAddress(acct.userAddr)}</div>
+ <div>User ID: {acct.sub}</div>
+ <button className='btn-send' onClick={() => submitTransaction(acct)}>
  Send transaction
  </button>
  <hr/>