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