friends.html

---
layout: default
---

<main class="site pad">
  <div class="friends">
    <div class="friends-heading">
      <h1>Friends of Grin</h1>
      <p>The following companies, institutions, or individuals have generously donated financial resources to the Grin project under our community funding model. We're grateful for their support, and are proud to display their logos or names as supporters of Grin.</p>
    </div>
    <div class="hall-of-fame">
      <h2>Hall of Fame</h2>
      <span class="hall-of-fame-subheading">Grin's biggest supporters.</span>
      <section id="leaderboard" class="hall-of-fame-content">
        <div class="leaderboard-content">
          <div class="leaderboard-row">
            <div class="leaderboard-loading">
            </div>
          </div>
          <br />
          <div class="leaderboard-row">
            <div class="leaderboard-loading">
            </div>
          </div>
          <br />
          <div class="leaderboard-row">
            <div class="leaderboard-loading">
            </div>
          </div>
          <br />
          <div class="leaderboard-row">
            <div class="leaderboard-loading">
            </div>
          </div>
          <br />
          <div class="leaderboard-row">
            <div class="leaderboard-loading">
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="comp-and-ind">
      <h2>Companies & Individuals</h2>
      <div class="scroller">
        <a href="https://www.bitonic.nl/">
          <img src="assets/images/logos/bitonic-white.png" title="Bitonic">
        </a>
        <a href="https://www.kryptonite1.co/">
          <img src="assets/images/logos/kr1_med.png" title="KR1">
        </a>
        <a href="https://www.tmgox.com/">
          <img src="assets/images/logos/tmgox-logo.jpg" title="TMGOX">
        </a>
        <a href="https://gpu.one/">
          <img src="assets/images/logos/gpuOne-white.png" title="GPU.one">
        </a>
        <a href="https://www.megapool.info/">
          <img class="no-frame" src="assets/images/logos/Mega-Pool-Logo-trans.png" title="Mega Pool">
        </a>
        <a href="https://www.grinmint.com/">
          <img src="assets/images/logos/grinmint_logo_square.svg" title="Grinmint by BlockCypher">
        </a>
        <a href="https://kyokan.io/">
          <img src="assets/images/logos/kyokan_teal_white.png" title="Kyokan">
        </a>
        <a href="http://innosilicon.com/">
          <img src="assets/images/logos/Innosilicon.png" title="Innosilicon">
        </a>
        <a href="https://galleon.exchange/">
          <img src="assets/images/logos/galleon.png" title="Galleon">
        </a>
        <a href="https://mining.luxor.tech">
          <img class="no-frame" src="assets/images/logos/luxor_logo.png" title="Luxor">
        </a>
        <a href="https://beam-mw.com/">
          <img src="assets/images/logos/beam_logo.png" title="Beam">
        </a>
        <a href="https://continue.capital/">
          <img src="assets/images/logos/continuecapital.png" title="Continue Capital">
        </a>
        <a href="http://cyphercapital.net/">
          <img src="assets/images/logos/cypher_capital.png" title="Cypher Capital">
        </a>
        <a href="https://hashrabbit.co/">
          <img src="assets/images/logos/hashrabbit.png" title="Cypher Capital">
        </a>
        <a href="https://lemniscap.com/">
          <img src="assets/images/logos/lemniscap.png" title="Lemniscap">
        </a>
        <a href="#">
          <img class="no-frame" src="assets/images/logos/chanceventures.png" title="Chance Ventures">
        </a>
        <a href="https://www.wings.ai/">
          <img class="no-frame" src="assets/images/logos/wingsai-grey.png" title="Wings">
        </a>
        <a href="https://www.cgs.group/">
          <img src="assets/images/logos/cgs-logo-white.svg" title="CGS Group">
        </a>
        <a href="https://www.coingecko.com/en/coins/grin">
          <img class="no-frame" src="assets/images/logos/CoinGecko-WhiteText-small.png" title="CoinGecko">
        </a>
        <a href="https://hashoutliers.com">
          <img class="no-frame" src="assets/images/logos/Outliers-256x.png" title="Outliers">
        </a>
        <a href="https://www.bhex.com/">
          <img class="no-frame" src="assets/images/logos/bhex-384x.png" title="Blue Helix Exchange(BHEX)">
        </a>
        <a href="https://www.sparkpool.com/">
          <img class="no-frame" src="assets/images/logos/Sparkpool-660x.png" title="SparkPool">
        </a>
        <a href="https://qtum.org/">
          <img class="no-frame" src="assets/images/logos/qtum.png" title="Qtum">
        </a>
        <a href="https://bit.fish/">
          <img src="assets/images/logos/bitfish.png" title="bitfish">
        </a>
        <a href="https://bminer.me/">
          <img class="no-frame" src="assets/images/logos/bminer-white-only.png" title="bminer">
        </a>
        <a href="https://prokapi.com/">
          <img src="assets/images/logos/prokapi-white.png" title="Prokapi">
        </a>
        <a href="https://hashtagchain.com/">
          <img class="no-frame" src="assets/images/logos/hashtag-capital.png" title="Hashtag Capital">
        </a>
        <a href="https://www.f2pool.com/">
          <img src="assets/images/logos/f2pool.png" title="F2Pool">
        </a>
        <a href="https://www.minerbabe.com/">
          <img class="no-frame" src="assets/images/logos/minerbabe-white.png" title="Minerbabe">
        </a>
        <a href="https://0301.farm/">
          <img class="no-frame" src="assets/images/logos/0301-transparent.png" title="0301 - Mining Farm">
        </a>
        <a href="https://2miners.com">
          <img class="no-frame" src="assets/images/logos/logo-2miners-red.svg" title="2Miners">
        </a>
        <a href="https://poloniex.com">
          <img class="no-frame" src="assets/images/logos/poloniex.png" title="Poloniex">
        </a>
        <a href="https://www.grinamsterdam.com/">
          <img class="no-frame" src="assets/images/logos/grin_amsterdam_logo_white.png" title="Grin Amsterdam">
        </a>
        <a href="https://www.exsilico.com/">
          <img class="no-frame" src="assets/images/logos/exsilico.png" title="exsilico">
        </a>
        <a href="https://www.gate.io/">
          <img class="no-frame" src="assets/images/logos/gateio_logo.png" title="Gate.io">
        </a>
        <a href="https://grinnode.live/">
          <img class="no-frame" src="assets/images/logos/grinnodelive.png" title="Grinnode.live">
        </a>
        <a href="https://nervos.org/">
          <img class="no-frame" src="assets/images/logos/nervos_logo_vertical_dark.svg" title="Nervos">
        </a>
      </div>
      <div class="individuals">
        Redouan Ahaloui
        Aurel
        Leonid Beder
        Roy Blankman
        Ivan Brightly
        Guy Corem
        Chance Du
        Adonis Ferreira
        fengqingyang
        Roderik van der Graaf
        PANDA
        Poseidon Ho
        hwph
        Michalis Kargakis
        Baek Kyoum Kim
        Sehwan Kim (misskiwi)
        Mitchell Krawiec-Thayer Ph.D. (Isthmus)
        John Lee (jl2fa)
        Jie Liu
        Jameson Lopp
        juelianshana
        Chris McCann
        Jack Misteli Jean-Guillaume
        Bart Mol
        Yan Pritzker
        Hendrik Richter
        Niels de Ruiter
        Alex (X) Sherman
        Daisuke Shosaki
        Max Tannahill
        Tensor Turbulence
        Qi Tian
        Aaron Ting
        Shaishav Todi
        Xiake Coin
        Alexander Zaidelson
        zhuroulao
      </div>
    </div>
  </div>
</main>

<script crossorigin src="https://unpkg.com/papaparse@4.6.3/papaparse.min.js"></script>
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
  function formatNumber(x) {
    if (typeof x === 'number') {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
    console.error('Expected `x` to be a number but got `' + x + '`');
    return x;
  }

  function parseCsv(csv) {
    // Use trimHeaders <5.0.0, and transformHeader >=5.0.0
    return Papa.parse(csv, {
      trimHeaders: true,
      header: true,
      skipEmptyLines: true,
    }).data;
  }

  function parseDate(date) {
    if (date) {
      return date.substr(0, 4) + '-' + date.substr(4, 2) + '-' + date.substr(6, 2);
    }
    return '-';
  }

  const $leaderboard = document.getElementById('leaderboard');

  function App() {
    const [leaderboard, setLeaderboard] = React.useState([]);

    // Url to .csv files
    const incomeUrl = 'https://raw.githubusercontent.com/mimblewimble/grin-pm/master/financials/income_log.csv';
    const entitiesUrl = 'assets/csv/entities.csv';
    const miscUrl = 'https://raw.githubusercontent.com/mimblewimble/grin-pm/master/financials/misc_support.csv';

    React.useEffect(() => {
      // Fetch data on mount
      Promise.all([
        fetch(incomeUrl).then((res) => res.text()).then((res) => parseCsv(res)),
        fetch(entitiesUrl).then((res) => res.text()).then((res) => parseCsv(res)),
        fetch(miscUrl).then((res) =>  res.text()).then((res) =>  parseCsv(res)),
      ]).then((res) => {
        const donations = res[0];
        const entities = res[1];
        const misc = res[2];

        // Append donations to the correct company/individual
        donations.concat(misc).forEach((donation) => {
          const index = entities.findIndex((o) => (o.name.toLowerCase() === donation.source.toLowerCase()));
          try {
            (entities[index].donations)
            ? entities[index].donations.push(donation)
            : entities[index].donations = [donation];
          } catch (e) {
            console.error('Missing entity in \`entities.csv\`: ' + donation.source);
          }
        });

        // Add helper properties `total`, `numberOfDonations`, `lastDonation`
        // that are displayed on leaderboard
        return entities
          .map((o) => {
            return Object.assign({}, o, {
              total: (o.donations && o.donations.reduce((acc, cur) => acc + parseInt(cur.USD_equivalent), 0)) || 0,
              numberOfDonations: (o.donations) ? o.donations.length : 0,
              lastDonation: (o.donations) ? Math.max.apply(null, o.donations.map((d) => d.date)).toString() : null,
            });
            // Threshold for leaderboard is set here
          })
          .filter((o) => o.total >= 25000)
          .sort(function(a, b) { return a.total - b.total })
          .reverse()
          .map(function(o, i) { o.rank = i + 1; return o; });
      }).then((res) => {
        if (res.length) {
          setLeaderboard(res);
        } else {
          setLeaderboard([null]);
        }
      });
    }, []);

    return (
      <React.Fragment>
        {(leaderboard.length === 0)
          ? <Loading />
          : <Leaderboard leaderboard={leaderboard} />}
      </React.Fragment>
    );
  }

  function Loading() {
    return (
      <div className="leaderboard-content">
        <div className="leaderboard-row">
          <div className="leaderboard-loading">
          </div>
        </div>
        <br/>
        <div className="leaderboard-row">
          <div className="leaderboard-loading">
          </div>
        </div>
        <br/>
        <div className="leaderboard-row">
          <div className="leaderboard-loading">
          </div>
        </div>
        <br/>
        <div className="leaderboard-row">
          <div className="leaderboard-loading">
          </div>
        </div>
        <br/>
        <div className="leaderboard-row">
          <div className="leaderboard-loading">
          </div>
        </div>
      </div>
    );
  }

  function Leaderboard(props) {
    const [itemsToShow, setItemsToShow] = React.useState(10);

    return (
      <React.Fragment>
        <div className="leaderboard-content">
          {/* (props.leaderboard[0] === null) ? (
            Array.apply(null, Array(10)).map((_, i) => {
              return (
                <a key={i} className="empty" href="/funding">
                  {i + 1}. Empty slot.
                </a>
              );
            })
          ) : null */}
          {(props.leaderboard[0] !== null) ? (
            props.leaderboard.slice(0, itemsToShow).map((data, i) => {
              return (
                <LeaderboardRow key={data.id} data={data} i={i} />
              )
            })
          ) : null}
          {/* (props.leaderboard[0] !== null && props.leaderboard.length < 10) ? (
            Array.apply(null, Array(10 - props.leaderboard.length)).map((_, i) => {
              return (
                <a key={i} className="empty" href="/funding">
                  {props.leaderboard.length + i + 1}. Empty slot.
                </a>
              );
            })
          ) : null */}
        </div>
        {(props.leaderboard.length > itemsToShow) ? (
          <div className="friends-show-more">
            <button
              id="friends-show-more-btn"
              onClick={function() { setItemsToShow(itemsToShow + 5); }}
            >
              Show more
            </button>
          </div>
        ) : null}
      </React.Fragment>
    );

    function LeaderboardRow(props) {
      const [showDonations, setShowDonations] = React.useState(false);

      return (
        <div className="leaderboard-row">
          <div className="header">
            <div className="logo">
              <a href={props.data.href}>
                <img src={props.data.profile_src} />
              </a>
            </div>
            <div className="header-info">
              <span className="heading">
                <span className="rank">{props.i + 1}. </span>
                <a href={props.data.href}>{props.data.name}</a>
              </span>
              <span className="desc">{props.data.description}</span>
              <div className="total">{'Σ $' + formatNumber(props.data.total)}</div>
            </div>
          </div>
          <div className="info">
            <div className="data">
              <span className="subheading"># donations</span>
              <button
                className="donation-number"
                onClick={() => { setShowDonations(!showDonations); }}
              >
                {props.data.numberOfDonations}
                {(props.data.donations)
                  ? <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                  : null}
              </button>
            </div>
            <div className="data">
              <span className="subheading">Last donation</span>
              <span>{parseDate(props.data.lastDonation)}</span>
            </div>
          </div>
          {(props.data.donations && showDonations) ? (
            <div className="donations">
              {props.data.donations.map((donation) => (
                <div className="donation" key={donation.income_id + donation.source}>
                  <strong>{'$' + formatNumber(parseInt(donation.USD_equivalent)) + ' '}</strong>
                  ({donation.amount + ' ' + donation.currency}){': '}
                  {(donation.url && donation.url !== '-') ? (
                    <a href={donation.url}>{donation.comment}</a>
                  ) : <span>{donation.comment}</span>}
                </div>
              ))}
            </div>
          ) : null}
        </div>
      );
    }
  }
  ReactDOM.render(<App />, $leaderboard);
</script>