ui/src/components/sponsors.tsx

   1 import { Component } from 'inferno';
   2 import { Subscription } from 'rxjs';
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { WebSocketService } from '../services';
   5 import {
   6   GetSiteResponse,
   7   WebSocketJsonResponse,
   8   UserOperation,
   9 } from '../interfaces';
  10 import { i18n } from '../i18next';
  11 import { T } from 'inferno-i18next';
  12 import { repoUrl, wsJsonToRes, toast } from '../utils';
  13
  14 interface SilverUser {
  15   name: string;
  16   link?: string;
  17 }
  18
  19 let general = [
  20   'William Moore',
  21   'Rachel Schmitz',
  22   'comradeda',
  23   'ybaumy',
  24   'dude in phx',
  25   'twilight loki',
  26   'Andrew Plaza',
  27   'Jonathan Cremin',
  28   'Arthur Nieuwland',
  29   'Ernest Wiśniewski',
  30   'HN',
  31   'Forrest Weghorst',
  32   'Andre Vallestero',
  33   'NotTooHighToHack',
  34 ];
  35 let highlighted = ['DQW', 'DiscountFuneral', 'Oskenso Kashi', 'Alex Benishek'];
  36 let silver: Array<SilverUser> = [
  37   {
  38     name: 'Redjoker',
  39     link: 'https://iww.org',
  40   },
  41 ];
  42 // let gold = [];
  43 // let latinum = [];
  44
  45 export class Sponsors extends Component<any, any> {
  46   private subscription: Subscription;
  47   constructor(props: any, context: any) {
  48     super(props, context);
  49     this.subscription = WebSocketService.Instance.subject
  50       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  51       .subscribe(
  52         msg => this.parseMessage(msg),
  53         err => console.error(err),
  54         () => console.log('complete')
  55       );
  56
  57     WebSocketService.Instance.getSite();
  58   }
  59
  60   componentDidMount() {
  61     window.scrollTo(0, 0);
  62   }
  63
  64   componentWillUnmount() {
  65     this.subscription.unsubscribe();
  66   }
  67
  68   render() {
  69     return (
  70       <div class="container text-center">
  71         {this.topMessage()}
  72         <hr />
  73         {this.sponsors()}
  74         <hr />
  75         {this.bitcoin()}
  76       </div>
  77     );
  78   }
  79
  80   topMessage() {
  81     return (
  82       <div>
  83         <h5>{i18n.t('donate_to_lemmy')}</h5>
  84         <p>
  85           <T i18nKey="sponsor_message">
  86             #<a href={repoUrl}>#</a>
  87           </T>
  88         </p>
  89         <a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
  90           {i18n.t('support_on_liberapay')}
  91         </a>
  92         <a
  93           class="btn btn-secondary ml-2"
  94           href="https://www.patreon.com/dessalines"
  95         >
  96           {i18n.t('support_on_patreon')}
  97         </a>
  98         <a
  99           class="btn btn-secondary ml-2"
 100           href="https://opencollective.com/lemmy"
 101         >
 102           {i18n.t('support_on_open_collective')}
 103         </a>
 104       </div>
 105     );
 106   }
 107   sponsors() {
 108     return (
 109       <div class="container">
 110         <h5>{i18n.t('sponsors')}</h5>
 111         <p>{i18n.t('silver_sponsors')}</p>
 112         <div class="row justify-content-md-center card-columns">
 113           {silver.map(s => (
 114             <div class="card col-12 col-md-2">
 115               <div>
 116                 {s.link ? (
 117                   <a href={s.link} target="_blank" rel="noopener">
 118                     💎 {s.name}
 119                   </a>
 120                 ) : (
 121                   <div>💎 {s.name}</div>
 122                 )}
 123               </div>
 124             </div>
 125           ))}
 126         </div>
 127         <p>{i18n.t('general_sponsors')}</p>
 128         <div class="row justify-content-md-center card-columns">
 129           {highlighted.map(s => (
 130             <div class="card bg-primary col-12 col-md-2 font-weight-bold">
 131               <div>{s}</div>
 132             </div>
 133           ))}
 134           {general.map(s => (
 135             <div class="card col-12 col-md-2">
 136               <div>{s}</div>
 137             </div>
 138           ))}
 139         </div>
 140       </div>
 141     );
 142   }
 143
 144   bitcoin() {
 145     return (
 146       <div>
 147         <h5>{i18n.t('crypto')}</h5>
 148         <div class="table-responsive">
 149           <table class="table table-hover text-center">
 150             <tbody>
 151               <tr>
 152                 <td>{i18n.t('bitcoin')}</td>
 153                 <td>
 154                   <code>1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK</code>
 155                 </td>
 156               </tr>
 157               <tr>
 158                 <td>{i18n.t('ethereum')}</td>
 159                 <td>
 160                   <code>0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01</code>
 161                 </td>
 162               </tr>
 163               <tr>
 164                 <td>{i18n.t('monero')}</td>
 165                 <td>
 166                   <code>
 167                     41taVyY6e1xApqKyMVDRVxJ76sPkfZhALLTjRvVKpaAh2pBd4wv9RgYj1tSPrx8wc6iE1uWUfjtQdTmTy2FGMeChGVKPQuV
 168                   </code>
 169                 </td>
 170               </tr>
 171             </tbody>
 172           </table>
 173         </div>
 174       </div>
 175     );
 176   }
 177
 178   parseMessage(msg: WebSocketJsonResponse) {
 179     console.log(msg);
 180     let res = wsJsonToRes(msg);
 181     if (msg.error) {
 182       toast(i18n.t(msg.error), 'danger');
 183       return;
 184     } else if (res.op == UserOperation.GetSite) {
 185       let data = res.data as GetSiteResponse;
 186       document.title = `${i18n.t('sponsors')} - ${data.site.name}`;
 187     }
 188   }
 189 }