Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show avatar in sign in button
Alexis Sellier committed 4 years ago
commit d1994fa31060c29d29cee7be2b65c4373993df0f
parent 60ac86c3d7b8baf4b70a9dc39b4615a64b3a10f7
5 files changed +25 -10
modified package-lock.json
@@ -5,7 +5,6 @@
  "requires": true,

  "packages": {

    "": {
- 
      "name": "radicle-interface",

      "version": "1.0.0",

      "dependencies": {

        "@datamodels/identity-profile-basic": "^0.1.2",
modified public/index.css
@@ -403,6 +403,11 @@ label.input {
  }

}
+ 
span.align {
+ 
	display: flex;
+ 
	align-items: center;
+ 
	justify-content: flex-start;
+ 
}

span.small, .text-xsmall {

	font-size: 0.75rem;

}
modified src/Address.svelte
@@ -13,6 +13,7 @@
  export let noBadge = false;

  export let noAvatar = false;

  export let compact = false;
+ 
  export let small = false;

  // This property allows components eg. Header.svelte to pass a resolved profile object.

  export let profile: Profile | null = null;
@@ -55,7 +56,7 @@
  }

</style>
- 
<div class="address" title={address} class:no-badge={noBadge}>
+ 
<div class="address" title={address} class:no-badge={noBadge} class:text-small={small}>

  {#if !noAvatar}

    {#if resolve && profile?.avatar}

      <Avatar inline source={profile.avatar} {address}/>
modified src/SiweConnect.svelte
@@ -1,4 +1,5 @@
<script lang="ts">
+ 
  import Avatar from "@app/Avatar.svelte";

  import type { Seed } from "@app/base/seeds/Seed";

  import type { Config } from "@app/config";

  import { signInWithEthereum } from "@app/siwe";
@@ -10,6 +11,7 @@
  export let caption = "Sign in";

  export let tooltip = "";

  export let disabled = false;
+ 
  export let address: string | null = null;



  let connection: Connection = Connection.Disconnected;

</script>
@@ -34,9 +36,14 @@
    }

  }}

>
- 
  {#if connection === Connection.Connecting}
- 
    <Loading small />
- 
  {:else}
- 
    {caption}
- 
  {/if}
+ 
  <span class="align">
+ 
    {#if address}
+ 
      <Avatar address={address} source={address} inline />
+ 
    {/if}
+ 
    {#if connection === Connection.Connecting}
+ 
      <Loading small />
+ 
    {:else}
+ 
      {caption}
+ 
    {/if}
+ 
  </span>

</button>
modified src/base/seeds/View.svelte
@@ -63,6 +63,9 @@
  .session-info {

    display: flex;

    flex-direction: row;
+ 
    background: var(--color-secondary-background);
+ 
    padding: 0.25rem 0.5rem;
+ 
    border-radius: var(--border-radius);

  }

  .desktop {

    display: block !important;
@@ -109,11 +112,11 @@
        {#if session?.signer}

          {#if siweSession}

            <div class="session-info">
- 
              <span class="signed-in">Signed in as</span>
- 
              <Address address={siweSession.address} {config} compact resolve />
+ 
              <span class="signed-in text-small">Signed in as</span>
+ 
              <Address address={siweSession.address} {config} small compact resolve />

            </div>

          {:else}
- 
            <SiweConnect {seed} {config} />
+ 
            <SiweConnect {seed} address={session.address} {config} />

          {/if}

        {:else}

          <SiweConnect disabled {seed} {config} tooltip={"Connect your wallet to sign in"} />