add poap badges verification

app/app/urls.py

@@ -155,6 +155,11 @@
         r'^api/v0.1/profile/(?P<handle>.*)/verify_user_twitter',
         dashboard.views.verify_user_twitter,
         name='verify_user_twitter'
+    ),    
+    url(
+        r'^api/v0.1/profile/(?P<handle>.*)/verify_user_poap',
+        dashboard.views.verify_user_poap,
+        name='verify_user_poap'
     ),
     url(r'^api/v0.1/profile/(?P<handle>.*)', dashboard.views.profile_details, name='profile_details'),
     url(r'^api/v0.1/user_card/(?P<handle>.*)', dashboard.views.user_card, name='user_card'),

app/assets/v2/js/pages/profile-trust.js

@@ -288,6 +288,168 @@ Vue.component('twitter-verify-modal', {
   }
 });
 
+Vue.component('poap-verify-modal', {
+  delimiters: [ '[[', ']]' ],
+  data: function() {
+    return {
+      showValidation: false,
+      validationStep: 'validate-address',
+      ethAddress: '',
+      signature: '',
+      validationError: ''
+    };
+  },
+  mounted: function() {
+
+    $(document).on('click', '#verify-poap-link', function(event) {
+      event.preventDefault();
+      this.showValidation = true;
+    }.bind(this));
+  },
+  template: `<b-modal id="poap-modal" @hide="dismissVerification()" :visible="showValidation" center hide-header hide-footer>
+                <template v-slot:default="{ hide }">
+                  <div class="mx-5 mt-5 mb-4 text-center">
+                    <div class="mb-3">
+                      <img src="/static/v2/images/project_logos/poap.svg" alt="POAP Logo" width="100">
+                      <h1 class="font-bigger-4 font-weight-bold">Verify your POAP badges</h1>
+                    </div>
+                    <div v-if="validationStep === 'validate-address'">
+                      <p class="mb-4 font-subheader text-left">
+                        POAP is a software system that allows humans to collect badges (in the form of non fungible tokens) every time they participate in an activity, in person or remotely. <a href="https://www.poap.xyz/#faqs" target="_blank">Learn more.</a>
+                      </p>
+                      <p class="mb-4 font-subheader text-left">
+                        We want to verify your POAP badges. To do so, you must first connect with your preferred web3 account that holds at least one POAP badge that transfered to your account at least 15 days ago, then we'll validate it's here.
+                      </p>
+
+                      <div class="mt-2 mb-2">
+                        <a @click="clickedPullEthAddress" role="button" style="font-size: 1.3em" class="button button--primary mb-2" target="_blank">
+                          Pull from Wallet
+                        </a>
+                      </div>
+                    </div>
+                    <div v-if="validationStep === 'validate-poap' || validationStep == 'perform-validation'">
+                      <p class="mb-4">
+                        Now we'll validate that you have the poap badges. Press validate. 
+                      </p>
+                      <p class="mb-4">
+                        You can change your wallet by pressing change wallet.
+                      </p>
+                      <div class="input-group">
+                        <div class="input-group-prepend">
+                          <span class="input-group-text form-control" id="basic-addon1">@</span>
+                        </div>
+                        <input type="text" class="form-control" placeholder="eth-address" aria-label="handle" aria-describedby="basic-addon1" required maxlength="255" v-model="ethAddress">
+                      </div>
+                      <b-button @click="clickedChangeWallet" :disabled="validationStep === 'perform-validation'" class="btn-gc-green mt-3 mb-2" size="lg">
+                        Change Wallet
+                      </b-button>
+                      <br />
+                      <div v-if="validationError !== ''" style="color: red">
+                        <small>[[validationError]]</small>
+                      </div>
+                      <b-button @click="clickedValidate" :disabled="validationStep === 'perform-validation'" class="btn-gc-blue mt-3 mb-2" size="lg">
+                        <b-spinner v-if="validationStep === 'perform-validation'" type="grow"></b-spinner>
+                        Validate
+                      </b-button>
+                      <br />
+                      <a href="" v-if="validationError !== ''" @click="clickedGoBack">
+                        Go Back
+                      </a>
+                    </div>
+                    <div v-if="validationStep === 'validation-complete'">
+                      Your POAP verification was successful. Thank you for helping make Gitcoin more sybil resistant!
+                      <a href="" class="btn btn-gc-blue px-5 mt-3 mb-2 mx-2" role="button" style="font-size: 1.3em">Done</a>
+                    </div>
+                  </div>
+                </template>
+            </b-modal>`,
+  methods: {
+    dismissVerification() {
+      this.showValidation = false;
+    },
+    clickedGoBack(event) {
+      event.preventDefault();
+      this.validationStep = 'validate-address';
+      this.ethAddress = '';
+      this.validationError = '';
+    },
+    getEthAddress(){
+      const accounts = web3.eth.getAccounts();
+      $.when(accounts).then((result) => { 
+          const ethAddress = result[0];
+          this.ethAddress = ethAddress;
+          this.validationStep = 'validate-poap';
+          this.showValidation = true;
+      }).catch((_error) => {
+          this.validationError = 'Error getting ethereum accounts';
+          this.validationStep = 'validate-address';
+          this.showValidation = true;
+      });
+
+    },
+    generateSignature(){
+      // Create a signature using the provided web3 account
+      web3.eth.personal.sign('verify_poap_badges', this.ethAddress)
+         .then(signature => {
+            this.signature = signature;
+            this.verifyPOAP();
+         });
+    },
+    connectWeb3Wallet(){
+      this.showValidation = false;
+      onConnect().then((result) => {
+          this.getEthAddress();
+      }).catch((_error) => {
+          this.validationError = 'Error connecting ethereum accounts';
+          this.validationStep = 'validate-address';
+          this.showValidation = true;
+      });
+    },
+    clickedPullEthAddress(event) {
+      // Prompt web3 login if not connected
+      event.preventDefault();
+      if (!provider) {
+         this.connectWeb3Wallet();
+      }else{
+         this.getEthAddress();
+      }
+    },
+    clickedChangeWallet(event){
+      event.preventDefault();
+      this.connectWeb3Wallet();
+    },
+    clickedValidate(event) {
+      event.preventDefault();
+      this.validationError = '';
+      this.validationStep = 'perform-validation';
+      this.generateSignature();
+    },
+    verifyPOAP() {
+      const csrfmiddlewaretoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+      const payload = JSON.stringify({
+        'eth_address': this.ethAddress,
+        'signature': this.signature 
+      });
+      const headers = {'X-CSRFToken': csrfmiddlewaretoken};
+
+      const verificationRequest = fetchData(`/api/v0.1/profile/${trustHandle}/verify_user_poap`, 'POST', payload, headers);
+
+      $.when(verificationRequest).then(response => {
+        if (response.ok) {
+          this.validationStep = 'validation-complete';
+        } else {
+          this.validationError = response.msg;
+          this.validationStep = 'validate-poap';
+        }
+
+      }).catch((_error) => {
+        console.log(_error);
+        this.validationError = 'There was an error; please try again later';
+        this.validationStep = 'validate-poap';
+      });
+    }
+  }
+});
 // TODO: This component consists primarily of code taken from the SMS verification flow in the cart.
 // This approach is not DRY, and after Grants Round 7 completes, the cart should be refactored to include
 // this as a shared component, rather than duplicating the code.
@@ -517,4 +679,4 @@ if (document.getElementById('gc-trust-verify-modal')) {
     el: '#gc-trust-verify-modal',
     data: { }
   });
-}
+}

app/dashboard/migrations/0155_auto_20201014_0946.py

@@ -0,0 +1,19 @@
+# Generated by Django 2.2.4 on 2020-10-14 09:46
+
+import django.contrib.postgres.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dashboard', '0154_profile_override_dict'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='profile',
+            name='is_poap_verified',
+            field=models.BooleanField(default=False),
+        )
+    ]

app/dashboard/models.py

@@ -2908,6 +2908,7 @@ class Profile(SuperModel):
     brightid_uuid=models.UUIDField(default=uuid.uuid4, unique=True)
     is_brightid_verified=models.BooleanField(default=False)
     is_twitter_verified=models.BooleanField(default=False)
+    is_poap_verified=models.BooleanField(default=False)
     twitter_handle=models.CharField(blank=True, null=True, max_length=15)
     bio = models.TextField(default='', blank=True, help_text=_('User bio.'))
     interests = ArrayField(models.CharField(max_length=200), blank=True, default=list)
@@ -5616,6 +5617,11 @@ def investigate_sybil(instance):
             total_sybil_score -= 1
             htmls.append('(REDEMPTIONx1)')
 
+        htmls.append(f'POAP Verified: {instance.is_poap_verified}')
+        if instance.is_poap_verified:
+            total_sybil_score -= 1
+            htmls.append('(REDEMPTIONx1)')
+
         if instance.squelches.filter(active=True).exists():
             htmls.append('USER HAS ACTIVE SQUELCHES')
             total_sybil_score += 3

app/dashboard/templates/profiles/tab_trust.html

@@ -5,6 +5,7 @@
     <div id="gc-trust-verify-modal">
       <sms-verify-modal></sms-verify-modal>
       <twitter-verify-modal></twitter-verify-modal>
+      <poap-verify-modal></poap-verify-modal>
     </div>
     <h3 class="py-3 font-weight-bold">Trust Bonus</h3>
     The higher the Trust
@@ -143,7 +144,37 @@ <h5>Coming Soon ™️</h5>
 
       {% include "profiles/trust_soon_row.html" with service="Activity on Gitcoin" %}
       {% include "profiles/trust_soon_row.html" with service="Idena Network" %}
-      {% include "profiles/trust_soon_row.html" with service="POAP" %}
+      <!-- POAP ROW -->
+      <div class="row mt-2 mb-4">
+        <div class="col-12 col-md-1 mx-auto text-center pt-1">
+          <span>
+            <img src="/static/v2/images/project_logos/poap.svg" alt="POAP Logo" class="img-fluid">
+          </span>
+        </div>
+        <div class="col-12 col-md-7 mb-3 mb-md-0">
+          <div class="font-weight-bold">
+            Verify With POAP
+          </div>
+          <div>
+            Verify your POAP badges.
+          </div>
+        </div>
+        <div class="col-6 col-md-2 text-center">
+          <div class="font-weight-bold">
+            +5%
+          </div>
+          <div style="color:grey">
+            <small>Grants CLR Match</small>
+          </div>
+        </div>
+        <div class="col-6 col-md-2">
+          {% if is_poap_verified %}
+            <span style="color:limegreen"><i class="fas fa-check"></i> Verified</span>
+          {% else %}
+            <a href="" role="button" id="verify-poap-link" class="button button--primary text-nowrap">Verify</a>
+          {% endif %}
+        </div>
+      </div>
       {% include "profiles/trust_soon_row.html" with service="Upala" %}
       {% include "profiles/trust_soon_row.html" with service="Duniter" %}
       {% include "profiles/trust_soon_row.html" with service="Equality Protocol" %}