random default avatars

Author: MattDHill

Diff for: package-lock.json

@@ -14,7 +14,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "bignumber.js": "^9.0.0",
-    "borker-rs-browser": "^0.1.26",
+    "borker-rs-browser": "^0.1.28",
+    "bs58": "^4.0.1",
     "crypto-js": "^3.1.9-1",
     "idb-keyval": "^3.2.0",
     "is-image": "^3.0.0",

Diff for: package.json

@@ -9,6 +9,17 @@
   margin-bottom: 14px;
 }
 
+.list-avatar {
+  position: relative;
+  float: left;
+  margin-right: 14px;
+  margin-bottom: 14px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+  object-fit: cover;
+}
+
 .fab {
   position: fixed;
   bottom: 40px;

Diff for: src/app/App.scss

@@ -3,16 +3,6 @@
   margin-right: 14px;
 }
 
-.bork-avatar {
-  position: relative;
-  float: left;
-  margin-right: 14px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  object-fit: cover;
-}
-
 .bork-username {
   text-decoration: none;
   font-weight: bold;

Diff for: src/app/components/bork-preview/bork-preview.scss

@@ -3,11 +3,11 @@ import { Link } from "react-router-dom"
 import { Bork, BorkType } from '../../../types/types'
 import BorkButtons from '../bork-buttons/bork-buttons'
 import { fromNow } from '../../../util/timestamps'
-import defaultAvatar from '../../../assets/avatar-1.png'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart, faRetweet } from '@fortawesome/free-solid-svg-icons'
 import '../../App.scss'
 import './bork-preview.scss'
+import { getDefaultAvatar } from '../../../util/functions'
 
 export interface BorkPreviewComponentProps {
   bork: Bork
@@ -37,7 +37,7 @@ class BorkPreviewComponent extends React.PureComponent<BorkPreviewComponentProps
 
     const avatar = (
       <Link to={`/profile/${bork.sender.address}`}>
-        <img src={bork.sender.avatarLink || defaultAvatar} className="bork-avatar" alt='avatar' />
+        <img src={bork.sender.avatarLink || getDefaultAvatar(bork.sender.address)} className='list-avatar' alt='avatar' />
       </Link>
     )
 

Diff for: src/app/components/bork-preview/bork-preview.tsx

@@ -2,16 +2,6 @@
   margin-left: 14px;
 }
 
-.bork-avatar {
-  position: relative;
-  float: left;
-  margin-right: 14px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  object-fit: cover;
-}
-
 .bork-username {
   text-decoration: none;
   font-weight: bold;

Diff for: src/app/components/bork/bork.scss

@@ -3,11 +3,11 @@ import { Link } from "react-router-dom"
 import { Bork, BorkType } from '../../../types/types'
 import BorkButtons from '../bork-buttons/bork-buttons'
 import { calendar } from '../../../util/timestamps'
-import defaultAvatar from '../../../assets/avatar-1.png'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faComments } from '@fortawesome/free-solid-svg-icons'
 import '../../App.scss'
 import './bork.scss'
+import { getDefaultAvatar } from '../../../util/functions'
 
 export interface BorkComponentProps {
   bork: Bork
@@ -21,7 +21,7 @@ class BorkComponent extends React.PureComponent<BorkComponentProps> {
 
     const avatar = (
       <Link to={`/profile/${bork.sender.address}`}>
-        <img src={bork.sender.avatarLink || defaultAvatar} className="bork-avatar" alt='avatar' />
+        <img src={bork.sender.avatarLink || getDefaultAvatar(bork.sender.address)} className="list-avatar" alt='avatar' />
       </Link>
     )
 

Diff for: src/app/components/bork/bork.tsx

@@ -30,16 +30,6 @@
   margin: 14px;
 }
 
-.user-item-avatar {
-  position: relative;
-  float: left;
-  margin-right: 14px;
-  margin-bottom: 14px;
-  max-width: 50px;
-  max-height: 50px;
-  border-radius: 50px;
-}
-
 .user-item-follow {
   position: relative;
   float: right;

Diff for: src/app/pages/explore/explore.scss

@@ -3,13 +3,13 @@ import { Link } from 'react-router-dom'
 import { AuthProps, withAuthContext } from '../../contexts/auth-context'
 import { User, Bork, Tag, BorkType } from '../../../types/types'
 import WebService from '../../web-service'
-import defaultAvatar from '../../../assets/avatar-1.png'
 import FollowButton from '../../components/follow-button/follow-button'
 import '../user-list/user-list.scss'
 import './explore.scss'
 import InfiniteScroll from 'react-infinite-scroller'
 import { Tabs, TabList, Tab, TabPanel } from 'react-tabs'
 import BorkList from '../../components/bork-list/bork-list'
+import { getDefaultAvatar } from '../../../util/functions'
 
 export interface ExploreProps extends AuthProps {}
 
@@ -120,7 +120,7 @@ class ExplorePage extends React.Component<ExploreProps, ExploreState> {
                           <FollowButton user={user} />
                         </div>
                         <Link to={`/profile/${user.address}`} style={{ textDecoration: 'none' }}>
-                          <img src={user.avatarLink || defaultAvatar} className="user-item-avatar" alt='avatar' />
+                          <img src={user.avatarLink || getDefaultAvatar(user.address)} className="list-avatar" alt='avatar' />
                           <span style={{ fontWeight: 'bold', color: 'black' }}>{user.name}</span><br />
                           <span style={{ color: 'gray' }}>@{user.address.substring(0, 9)}</span><br />
                           <p style={{ marginLeft: 64, color: 'black' }}>{user.bio}</p>

Diff for: src/app/pages/explore/explore.tsx

@@ -11,7 +11,7 @@ class HomePage extends React.PureComponent {
       <div className="page-content">
         <div className="start-page">
           <h1>Borker <span>beta</span></h1>
-          <div><img className="home-logo" src={logo} alt="logo"></img></div>
+          <div><img className="home-logo" src={logo} alt='borker logo'></img></div>
           <button><Link to="create">Create Wallet</Link></button>
           <br/>
           <br/>

Diff for: src/app/pages/home/home.tsx

@@ -9,8 +9,10 @@
 
 .profile-avatar {
   margin-top: 20px;
-  max-width: 80px;
-  max-height: 80px;
+  width: 80px;
+  height: 80px;
+  border-radius: 50px;
+  object-fit: cover;
 }
 
 .profile-update-list {

Diff for: src/app/pages/profile/profile-show/profile-show.scss

@@ -8,10 +8,10 @@ import WebService from '../../../web-service'
 import BorkList from '../../../components/bork-list/bork-list'
 import FollowButton from '../../../components/follow-button/follow-button'
 import BlockButton from '../../../components/block-button/block-button'
-import defaultAvatar from '../../../../assets/avatar-1.png'
 import 'react-tabs/style/react-tabs.scss'
 import './profile-show.scss'
 import '../../../App.scss'
+import { getDefaultAvatar } from '../../../../util/functions'
 
 export interface ProfileShowProps extends AuthProps {
   user: User
@@ -155,7 +155,7 @@ class ProfileShowPage extends React.Component<ProfileShowProps, ProfileShowState
           )}
         </div>
         <div className="profile-header">
-          <img src={user.avatarLink || defaultAvatar} className="profile-avatar" alt='profile' />
+          <img src={user.avatarLink || getDefaultAvatar(user.address)} className="profile-avatar" alt='avatar' />
           <h2>
             {user.name}
           </h2>

Diff for: src/app/pages/profile/profile-show/profile-show.tsx

@@ -4,10 +4,10 @@ import { Link } from 'react-router-dom'
 import { AuthProps, withAuthContext } from '../../contexts/auth-context'
 import { User, BorkType } from '../../../types/types'
 import WebService from '../../web-service'
-import defaultAvatar from '../../../assets/avatar-1.png'
 import FollowButton from '../../components/follow-button/follow-button'
 import InfiniteScroll from 'react-infinite-scroller'
 import './user-list.scss'
+import { getDefaultAvatar } from '../../../util/functions'
 
 export enum FollowsType {
   following = 'following',
@@ -105,9 +105,9 @@ class UserListPage extends React.Component<UserListProps, UserListState> {
                     style={{ textDecoration: 'none' }}
                   >
                     <img
-                      src={user.avatarLink || defaultAvatar}
-                      className="user-item-avatar"
-                      alt="avatar"
+                      src={user.avatarLink || getDefaultAvatar(user.address)}
+                      className="list-avatar"
+                      alt='avatar'
                     />
                     <span style={{ fontWeight: 'bold', color: 'black' }}>
                       {user.name}

Diff for: src/app/pages/user-list/user-list.tsx

@@ -0,0 +1,8 @@
+const bs58 = require('bs58')
+
+export function getDefaultAvatar (address: string) {
+  const buffer: Buffer = bs58.decode(address)
+  const hex = buffer.toString('hex')
+  const char = hex.charAt(4)
+  return require(`../assets/avatar-${char}.png`)
+}