2 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { UtilityService } from './_services/utility.service';
2 | import { Component, OnInit } from '@angular/core';
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent implements OnInit {
9 | title = 'nft-web-app';
10 | loaderText: string = 'Loading...'; // decorate the property with @Input()
11 | constructor(private utility: UtilityService) {
12 | utility.loader_callback.subscribe(data => {
13 | this.loaderText = data
14 | });
15 | }
16 |
17 | ngOnInit(): void {
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/pages/main/about-us/about-us.component.ts:
--------------------------------------------------------------------------------
1 | import { UtilityService } from './../../../_services/utility.service';
2 | import { Component, OnInit } from '@angular/core';
3 |
4 | @Component({
5 | templateUrl: './about-us.component.html',
6 | styleUrls: ['./about-us.component.css'],
7 | })
8 | export class AboutUsComponent implements OnInit {
9 | constructor(private utility: UtilityService) {
10 | this.utility.updatePageSEO(
11 | 'NFT Marketplace | Buy and Sell your NFT, and NFT Money. NFT Collections, Crypto artworks.',
12 | 'At Defy, we work every day to solve NFT Trading problems.'
13 | );
14 | }
15 |
16 | ngOnInit(): void {}
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/_pipe/safe-html.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
2 | import { DomSanitizer } from '@angular/platform-browser';
3 |
4 | @Pipe({ name: 'safeHtml' })
5 | export class SafeHtmlPipe implements PipeTransform {
6 | constructor(private sanitized: DomSanitizer) {}
7 | transform(value: string) {
8 | console.log(value);
9 |
10 | if (value) {
11 | return this.sanitized.bypassSecurityTrustHtml(
12 | value
13 | .replace(new RegExp('<', 'g'), '<')
14 | .replace(new RegExp('>', 'g'), '>')
15 | );
16 | }
17 | else {
18 | return '';
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/pages/main/privacy-policy/privacy-policy.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { UtilityService } from './../../../_services/utility.service';
3 | @Component({
4 | templateUrl: './privacy-policy.component.html',
5 | styleUrls: ['./privacy-policy.component.css'],
6 | })
7 | export class PrivacyPolicyComponent implements OnInit {
8 | constructor(private utility: UtilityService) {
9 | this.utility.updatePageSEO(
10 | 'Privacy Policy | Buy and Sell your NFT, and NFT Money. NFT Collections, Crypto artworks.',
11 | 'At Defy, we work every day to solve NFT Trading problems.'
12 | );
13 | }
14 |
15 | ngOnInit(): void {}
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/_services/contact.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { map } from 'rxjs/operators';
4 | import { environment } from '../../environments/environment';
5 |
6 | @Injectable({
7 | providedIn: 'root',
8 | })
9 | export class ContactService {
10 | public readonly apiUrl = environment.API_BASE_URL;
11 |
12 | constructor(public http: HttpClient) {}
13 |
14 | // send contact request
15 | createContact(nftBody: Object) {
16 | return this.http.post(`${this.apiUrl}contacts`, nftBody).pipe(
17 | map((response: Response) => {
18 | return response;
19 | })
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/pages/main/term-condition/term-condition.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { UtilityService } from './../../../_services/utility.service';
3 | @Component({
4 | templateUrl: './term-condition.component.html',
5 | styleUrls: ['./term-condition.component.css'],
6 | })
7 | export class TermConditionComponent implements OnInit {
8 | constructor(private utility: UtilityService) {
9 | this.utility.updatePageSEO(
10 | 'Terms & Condition | Buy and Sell your NFT, and NFT Money. NFT Collections, Crypto artworks.',
11 | 'At Defy, we work every day to solve NFT Trading problems.'
12 | );
13 | }
14 |
15 | ngOnInit(): void {}
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | ./node_modules
10 | node_modules
11 |
12 | # IDEs and editors
13 | /.idea
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage/*
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | # e2e
36 | /e2e/*.js
37 | /e2e/*.map
38 |
39 | #System Files
40 | .DS_Store
41 | Thumbs.db
42 |
43 | .env
44 |
--------------------------------------------------------------------------------
/src/app/pages/main/faq/faq.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { FaqComponent } from './faq.component';
4 |
5 | describe('FaqComponent', () => {
6 | let component: FaqComponent;
7 | let fixture: ComponentFixture
3 |
4 |
5 |
6 |
19 |
7 |
17 |
18 |
8 |
16 |
9 |
14 |
15 |
2 |
--------------------------------------------------------------------------------
/src/app/pages/main/term-condition/term-condition.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
25 |
5 |
9 |
10 |
11 |
12 |
13 |
14 |
23 |
24 |
15 |
22 | Privacy policy
16 |Last updated: August 05, 2021
17 | 18 | 19 | 20 | 21 |
2 |
--------------------------------------------------------------------------------
/src/app/pages/main/marketplace/marketplace.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MarketplaceComponent } from './marketplace.component';
4 |
5 | describe('MarketplaceComponent', () => {
6 | let component: MarketplaceComponent;
7 | let fixture: ComponentFixture
3 |
4 |
25 |
5 |
9 |
10 |
11 |
12 |
13 |
14 |
23 |
24 |
15 |
22 | Terms Condition
16 |Last updated: August 05, 2021
17 | 18 | 19 | 20 | 21 |
2 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 |
4 |
30 |
5 |
28 |
29 |
6 |
27 |
7 |
25 |
26 |
2 |
--------------------------------------------------------------------------------
/src/app/pages/auth/forgot-password/forgot-password.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, Validators} from '@angular/forms';
3 | import { AuthenticationService, UtilityService } from '../../../_services';
4 | import { Router } from '@angular/router';
5 |
6 | @Component({
7 | templateUrl: './forgot-password.component.html',
8 | styleUrls: ['./forgot-password.component.css']
9 | })
10 | export class ForgotPasswordComponent implements OnInit {
11 |
12 | constructor(private authService: AuthenticationService, private utility: UtilityService, private formBuilder: FormBuilder, private router: Router) {
13 |
14 | this.utility.updatePageSEO(
15 | 'Forgot Password | NFT Marketplace',
16 | 'Forgot Password | NFT Marketplace',
17 | '',
18 | ''
19 | );
20 | }
21 |
22 | form: FormGroup;
23 |
24 | ngOnInit(): void {
25 |
26 | this.form = this.formBuilder.group({
27 | email: [null, [Validators.required, Validators.email, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$')]]
28 | });
29 | }
30 |
31 | get getForm() {
32 | return this.form.controls;
33 | }
34 |
35 | submitAction() {
36 | if (this.form.valid) {
37 | this.utility.startLoader()
38 | this.authService.sendPasswordResetEmail(this.form.value.email).subscribe(
39 | (res) => {
40 | this.utility.stopLoader()
41 | this.utility.showSuccessAlert('Success!', 'Email Sent successfully', );
42 | this.form.reset()
43 | },
44 | (error) => {
45 | this.utility.stopLoader()
46 | this.utility.showErrorAlert('Error', error);
47 | }
48 | );
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/assets/img/avatar.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/app/pages/main/main.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ElementRef } from '@angular/core';
2 | declare var $: any;
3 | @Component({
4 | selector: 'app-main',
5 | templateUrl: './main.component.html',
6 | styleUrls: ['./main.component.css']
7 | })
8 | export class MainComponent implements OnInit {
9 |
10 | constructor( private elementRef: ElementRef ) { }
11 |
12 | ngOnInit(): void {
13 | }
14 |
15 | ngAfterViewInit(): void {
16 | // $(this.elementRef.nativeElement).find('[data-toggle="tooltip"]').tooltip();
17 | $('body').tooltip({
18 | selector: '.tooltp'
19 | });
20 |
21 | $(document).mouseup(function(e) {
22 | var container = $('.nav-item .dropdown-box');
23 | // if the target of the click isn't the container nor a descendant of the container
24 | if (!container.is(e.target) && container.has(e.target).length === 0) {
25 | $('.nav-item .dropdown-box').fadeOut();
26 | }
27 |
28 | $('.header__btn').unbind()
29 | .click(function () {
30 | console.log('click1');
31 |
32 | $(this).toggleClass('header__btn--active');
33 | $('.header__menu').toggleClass('header__menu--active');
34 | });
35 |
36 | $('.nav-action')
37 | .unbind()
38 | .click(function () {
39 | console.log('click');
40 | $('.header__btn').toggleClass('header__btn--active');
41 | $('.header__menu').toggleClass('header__menu--active');
42 | });
43 |
44 | $('.header__search .close, .header__action--search button').on(
45 | 'click',
46 | function () {
47 | $('.header__search').toggleClass('header__search--active');
48 | }
49 | );
50 | });
51 |
52 |
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/pages/main/nft-preview/nft-preview.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { NftService, UtilityService, ConnectService } from '../../../_services';
3 | import { Router, ActivatedRoute } from '@angular/router';
4 | declare var $: any;
5 | import { environment } from './../../../../environments/environment';
6 |
7 | @Component({
8 | templateUrl: './nft-preview.component.html',
9 | styleUrls: ['./nft-preview.component.css'],
10 | })
11 | export class NftPreviewComponent implements OnInit {
12 | constructor(
13 | private nftService: NftService,
14 | private utility: UtilityService,
15 | private router: Router,
16 | private activatedRoute: ActivatedRoute,
17 | private connectService: ConnectService
18 | ) {}
19 |
20 | // get user id from localstorage
21 | userId = JSON.parse(localStorage.getItem('user'))
22 | ? JSON.parse(localStorage.getItem('user'))['id']
23 | : '';
24 | user = JSON.parse(localStorage.getItem('user'))
25 | ? JSON.parse(localStorage.getItem('user'))
26 | : '';
27 | imgBaseUrl = environment.IMG_BASE_URL;
28 | nft: any = {};
29 |
30 | ngOnInit(): void {
31 | this.getNftById();
32 | }
33 |
34 | getNftById() {
35 | this.utility.startLoader();
36 | this.nftService
37 | .getNftById(this.activatedRoute.snapshot.paramMap.get('product_id'))
38 | .subscribe(
39 | (res) => {
40 | this.nft = res;
41 | this.utility.updatePageSEO(
42 | this.nft.name + ' | NFT Marketplace',
43 | this.nft.description
44 | );
45 | this.utility.stopLoader();
46 | },
47 | (error) => {
48 | console.log(error);
49 | this.utility.stopLoader();
50 | this.utility.showErrorAlert('Error', error);
51 | }
52 | );
53 | }
54 |
55 | }
56 |
--------------------------------------------------------------------------------
/src/assets/img/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/_helpers/jwt.interceptor.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {
3 | HttpRequest,
4 | HttpHandler,
5 | HttpEvent,
6 | HttpInterceptor,
7 | HttpHeaders,
8 | } from '@angular/common/http';
9 | import { Observable } from 'rxjs';
10 | import { environment } from 'src/environments/environment';
11 |
12 | @Injectable()
13 | export class JwtInterceptor implements HttpInterceptor {
14 | public headers: HttpHeaders;
15 | intercept(
16 | request: HttpRequest
3 |
4 |
32 |
5 |
30 |
31 |
6 |
29 |
7 |
27 |
28 |
2 |
--------------------------------------------------------------------------------
/src/app/_services/user.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { DomSanitizer } from '@angular/platform-browser';
3 | import { HttpClient } from '@angular/common/http';
4 | import { map } from 'rxjs/operators';
5 | import { environment } from '../../environments/environment';
6 |
7 | @Injectable()
8 | export class UserService {
9 | public readonly apiUrl = environment.API_BASE_URL;
10 |
11 | constructor(public http: HttpClient, public sanitizer: DomSanitizer) {
12 | // set token if saved in local storage
13 | }
14 |
15 | // Get user by id
16 | getUserById(userId: String) {
17 | return this.http.get(`${this.apiUrl}users/${userId}`).pipe(
18 | map((response: Response) => {
19 | return response;
20 | })
21 | );
22 | }
23 |
24 | // Get user profile
25 | getUserProfileInfo(walletAddress: string) {
26 | return this.http
27 | .get(`${this.apiUrl}users/user-profile?walletAddress=${walletAddress}`)
28 | .pipe(
29 | map((response: Response) => {
30 | return response;
31 | })
32 | );
33 | }
34 |
35 | // Add New User
36 | updateUser(userId: String, userBody: Object) {
37 | return this.http.patch(`${this.apiUrl}users/${userId}`, userBody).pipe(
38 | map((response: Response) => {
39 | return response;
40 | })
41 | );
42 | }
43 |
44 | // Add Picture
45 | uploadPicture(file: File, type: any) {
46 | var fd = new FormData();
47 | fd.append('file', file);
48 | fd.append('type', type);
49 | return this.http.post(`${this.apiUrl}users/update-picture`, fd).pipe(
50 | map((response: Response) => {
51 | return response;
52 | })
53 | );
54 | }
55 |
56 | // get setting info
57 | getSettingInfo() {
58 | return this.http.get(`${this.apiUrl}users/get-admin-setting`).pipe(
59 | map((response: Response) => {
60 | return response;
61 | })
62 | );
63 | }
64 |
65 | // get setting info
66 | getArtistProfile(userId) {
67 | return this.http
68 | .get(`${this.apiUrl}users/get-artist-profile/${userId}`)
69 | .pipe(
70 | map((response: Response) => {
71 | return response;
72 | })
73 | );
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/_services/utility.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, Output, EventEmitter } from '@angular/core';
2 | import { ToastrService } from 'ngx-toastr';
3 | import { TranslateService } from '@ngx-translate/core';
4 | import { NgxUiLoaderService } from "ngx-ui-loader";
5 | import { PageService } from 'ngx-seo-page';
6 | declare var $: any;
7 |
8 | @Injectable({
9 | providedIn: 'root'
10 | })
11 | export class UtilityService {
12 |
13 | @Output() loader_callback: EventEmitter
3 |
4 |
40 |
5 |
38 |
39 |
6 |
37 |
7 |
8 |
34 |
35 |
36 |
5 |
9 |
10 |
11 |
12 |
6 |
8 | Featured NFT
7 |
13 |
14 |
15 |
47 |
48 |
16 |
46 |
17 |
42 |
43 |
44 |
45 |
18 |
19 |
20 |
21 | 
22 |
23 |
24 |
25 |
26 |
41 |
27 |
40 | {{ item.name && item.name !== '' ? item.name : '' }}
28 | 29 |
30 | 
31 | {{ item.currentOwner.name }}
32 |
33 |
31 | {{ item.currentOwner.name }}
32 |
34 |
39 |
35 | Reserve price
36 | {{ item.price.toFixed(5) }} ETH
37 |
38 |
2 |
--------------------------------------------------------------------------------
/src/assets/css/owl.carousel.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Owl Carousel v2.3.4
3 | * Copyright 2013-2018 David Deutsch
4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
5 | */
6 | .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /***************************************************************************************************
2 | * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
3 | */
4 | import '@angular/localize/init';
5 | /**
6 | * This file includes polyfills needed by Angular and is loaded before the app.
7 | * You can add your own extra polyfills to this file.
8 | *
9 | * This file is divided into 2 sections:
10 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
11 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
12 | * file.
13 | *
14 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
15 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
16 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
17 | *
18 | * Learn more in https://angular.io/guide/browser-support
19 | */
20 |
21 | /***************************************************************************************************
22 | * BROWSER POLYFILLS
23 | */
24 |
25 | /**
26 | * IE11 requires the following for NgClass support on SVG elements
27 | */
28 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
29 |
30 | /**
31 | * Web Animations `@angular/platform-browser/animations`
32 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
33 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
34 | */
35 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
36 |
37 | /**
38 | * By default, zone.js will patch all possible macroTask and DomEvents
39 | * user can disable parts of macroTask/DomEvents patch by setting following flags
40 | * because those flags need to be set before `zone.js` being loaded, and webpack
41 | * will put import in the top of bundle, so user need to create a separate file
42 | * in this directory (for example: zone-flags.ts), and put the following flags
43 | * into that file, and then add the following code before importing zone.js.
44 | * import './zone-flags';
45 | *
46 | * The flags allowed in zone-flags.ts are listed here.
47 | *
48 | * The following flags will work for all browsers.
49 | *
50 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
51 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
52 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
53 | *
54 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
55 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
56 | *
57 | * (window as any).__Zone_enable_cross_context_check = true;
58 | *
59 | */
60 |
61 | /***************************************************************************************************
62 | * Zone JS is required by default for Angular itself.
63 | */
64 | import 'zone.js/dist/zone'; // Included with Angular CLI.
65 |
66 |
67 | /***************************************************************************************************
68 | * APPLICATION IMPORTS
69 | */
70 |
--------------------------------------------------------------------------------
/src/app/pages/main/faq/faq.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
56 |
5 |
54 |
55 |
6 |
53 |
7 |
51 |
52 |
2 | (
63 | document.getElementById('sign__file-upload')
64 | )).files[0];
65 | console.log(file);
66 |
67 | if (file.size <= 102400000){
68 | var self = this;
69 | const reader = new FileReader();
70 | let byteArray;
71 |
72 | reader.addEventListener(
73 | 'loadend',
74 | async function () {
75 | // convert image file to base64 string
76 |
77 | byteArray = self.convertDataURIToBinary(reader.result);
78 | self.utility.startLoader('Uploading document....');
79 | var result = await ipfs.add(byteArray);
80 | self.utility.startLoader(
81 | 'Document uploaded sucessfully. Please wait...'
82 | );
83 | self.utility.startLoader(
84 | 'Data encryption in progress. Please wait...'
85 | );
86 | var fianalJSON = self.createForm.value;
87 | fianalJSON[
88 | 'image'
89 | ] = `https://gateway.ipfs.io/ipfs/${result['path']}`;
90 | fianalJSON['status'] = `AVAILABLE`;
91 | fianalJSON['fileType'] = file.type;
92 | fianalJSON['currentOwnerWalletAddress'] = self.connectService.account;
93 | self.utility.startLoader('Almost finished. Please wait...');
94 | self.createNFT(fianalJSON);
95 | },
96 | false
97 | );
98 | if (file) {
99 | reader.readAsDataURL(file);
100 | }
101 | } else {
102 | this.utility.showErrorAlert('Error', 'File size must be less than 100Mb');
103 | }
104 |
105 |
106 |
107 | }
108 |
109 | createNFT(data) {
110 | var self = this;
111 | this.utility.startLoader();
112 | this.nftService.createNft(data).subscribe(
113 | (res) => {
114 | this.utility.stopLoader();
115 | Swal.fire({
116 | icon: 'success',
117 | title: 'Congratulations!',
118 | text: 'You have minted NFT successfully.',
119 | }).then((result) => {
120 | this.router.navigate(['/manage-profile']);
121 | });
122 | },
123 | (error) => {
124 | this.utility.stopLoader();
125 | this.utility.showErrorAlert('Error', error);
126 | }
127 | );
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/src/app/pages/main/marketplace/marketplace.component.ts:
--------------------------------------------------------------------------------
1 | import { environment } from 'src/environments/environment';
2 | import { Component, OnInit } from '@angular/core';
3 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
4 | import { NftService, UtilityService } from '../../../_services';
5 | @Component({
6 | templateUrl: './marketplace.component.html',
7 | styleUrls: ['./marketplace.component.css'],
8 | })
9 | export class MarketplaceComponent implements OnInit {
10 | constructor(
11 | private nftService: NftService,
12 | private utility: UtilityService,
13 | private formBuilder: FormBuilder
14 | ) {
15 | this.utility.updatePageSEO(
16 | 'NFT Marketplace | Buy and Sell your NFT, and NFT Money. NFT Collections, Crypto artworks.',
17 | 'Buy, Sell and trade your NFTs and NFT Money Secured with blockchain.'
18 | );
19 | }
20 |
21 | activeTab = 'grid';
22 | nfts: any = [];
23 | baseImageUrl = environment.IMG_BASE_URL;
24 | currentDate = new Date();
25 | filteredNfts: any = [];
26 | collectionList: any = [];
27 | selectedCollection: any = [];
28 | selectedCategory: any = [];
29 | filterForm: FormGroup;
30 | p: number = 1;
31 | categoryList = ['Image', 'Video'];
32 |
33 | ngOnInit(): void {
34 | this.filterForm = this.formBuilder.group({
35 | filterItems: [[]],
36 | sort: ['new'],
37 | });
38 | this.getAllNfts();
39 | }
40 |
41 | getAllNfts() {
42 | var self = this;
43 | this.utility.startLoader();
44 | this.nftService.getNfts().subscribe(
45 | (res) => {
46 | this.utility.stopLoader();
47 | this.nfts = res;
48 | this.filteredNfts = res;
49 | this.getFilterList();
50 | },
51 | (error) => {
52 | this.utility.stopLoader();
53 | this.utility.showErrorAlert('Error', error);
54 | }
55 | );
56 | }
57 |
58 | getFilterList() {
59 | this.nfts.forEach((element) => {
60 | if (!this.collectionList[element.currentOwner.id]) {
61 | this.collectionList[element.currentOwner.id] =
62 | element.currentOwner.name;
63 | }
64 | });
65 | }
66 |
67 | onChangeArtist(event, item: any) {
68 | // Use appropriate model type instead of any
69 | if (this.selectedCollection.indexOf(item) > -1) {
70 | const index = this.selectedCollection.indexOf(item);
71 | if (index > -1) {
72 | this.selectedCollection.splice(index, 1);
73 | }
74 | } else {
75 | this.selectedCollection.push(item);
76 | }
77 | }
78 |
79 | onChangeCategory(event, item: any) {
80 | // Use appropriate model type instead of any
81 | if (this.selectedCategory.indexOf(item) > -1) {
82 | const index = this.selectedCategory.indexOf(item);
83 | if (index > -1) {
84 | this.selectedCategory.splice(index, 1);
85 | }
86 | } else {
87 | this.selectedCategory.push(item);
88 | }
89 | }
90 |
91 | applyFilter() {
92 | this.getFilteredItems();
93 | }
94 |
95 | async getFilteredItems() {
96 | var self = this;
97 | if (this.selectedCollection.length > 0) {
98 | self.filteredNfts = self.nfts.filter((element) => {
99 | return self.selectedCollection.indexOf(element.currentOwner.id) > -1;
100 | });
101 | } else {
102 | self.filteredNfts = self.nfts;
103 | }
104 |
105 | if (this.selectedCategory.length > 0) {
106 | self.filteredNfts = self.filteredNfts.filter((element) => {
107 | return self.selectedCategory.indexOf(element.category) > -1;
108 | });
109 | }
110 |
111 | if (this.filterForm.value.sort === 'new') {
112 | self.filteredNfts.sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1));
113 | } else if (this.filterForm.value.sort === 'old') {
114 | self.filteredNfts.sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1));
115 | } else if (this.filterForm.value.sort === 'high') {
116 | self.filteredNfts.sort((a, b) => (a.price < b.price ? 1 : -1));
117 | } else if (this.filterForm.value.sort === 'low') {
118 | await self.filteredNfts.sort((a, b) => (a.price > b.price ? 1 : -1));
119 | }
120 | }
121 |
122 | convertDate(date) {
123 | return new Date(date);
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "cli": {
4 | "analytics": "35254c2d-8c84-49e3-ae12-64100162cc98"
5 | },
6 | "version": 1,
7 | "newProjectRoot": "projects",
8 | "projects": {
9 | "nft-web-app": {
10 | "projectType": "application",
11 | "schematics": {},
12 | "root": "",
13 | "sourceRoot": "src",
14 | "prefix": "app",
15 | "architect": {
16 | "build": {
17 | "builder": "@angular-devkit/build-angular:browser",
18 | "options": {
19 | "outputPath": "dist/nft-web-app",
20 | "index": "src/index.html",
21 | "main": "src/main.ts",
22 | "polyfills": "src/polyfills.ts",
23 | "tsConfig": "tsconfig.app.json",
24 | "aot": true,
25 | "assets": [
26 | "src/favicon.ico",
27 | "src/assets"
28 | ],
29 | "styles": [
30 | "src/styles.css",
31 | "node_modules/ngx-toastr/toastr.css"
32 | ],
33 | "scripts": [
34 | ]
35 | },
36 | "configurations": {
37 | "production": {
38 | "fileReplacements": [
39 | {
40 | "replace": "src/environments/environment.ts",
41 | "with": "src/environments/environment.prod.ts"
42 | }
43 | ],
44 | "optimization": true,
45 | "outputHashing": "all",
46 | "sourceMap": false,
47 | "namedChunks": false,
48 | "extractLicenses": true,
49 | "vendorChunk": false,
50 | "buildOptimizer": true,
51 | "budgets": [
52 | {
53 | "type": "initial",
54 | "maximumWarning": "2mb",
55 | "maximumError": "5mb"
56 | },
57 | {
58 | "type": "anyComponentStyle",
59 | "maximumWarning": "6kb",
60 | "maximumError": "10kb"
61 | }
62 | ]
63 | }
64 | }
65 | },
66 | "serve": {
67 | "builder": "@angular-devkit/build-angular:dev-server",
68 | "options": {
69 | "browserTarget": "nft-web-app:build"
70 | },
71 | "configurations": {
72 | "production": {
73 | "browserTarget": "nft-web-app:build:production"
74 | }
75 | }
76 | },
77 | "extract-i18n": {
78 | "builder": "@angular-devkit/build-angular:extract-i18n",
79 | "options": {
80 | "browserTarget": "nft-web-app:build"
81 | }
82 | },
83 | "test": {
84 | "builder": "@angular-devkit/build-angular:karma",
85 | "options": {
86 | "main": "src/test.ts",
87 | "polyfills": "src/polyfills.ts",
88 | "tsConfig": "tsconfig.spec.json",
89 | "karmaConfig": "karma.conf.js",
90 | "assets": [
91 | "src/favicon.ico",
92 | "src/assets"
93 | ],
94 | "styles": [
95 | "src/styles.css"
96 | ],
97 | "scripts": []
98 | }
99 | },
100 | "lint": {
101 | "builder": "@angular-devkit/build-angular:tslint",
102 | "options": {
103 | "tsConfig": [
104 | "tsconfig.app.json",
105 | "tsconfig.spec.json",
106 | "e2e/tsconfig.json"
107 | ],
108 | "exclude": [
109 | "**/node_modules/**"
110 | ]
111 | }
112 | },
113 | "e2e": {
114 | "builder": "@angular-devkit/build-angular:protractor",
115 | "options": {
116 | "protractorConfig": "e2e/protractor.conf.js",
117 | "devServerTarget": "nft-web-app:serve"
118 | },
119 | "configurations": {
120 | "production": {
121 | "devServerTarget": "nft-web-app:serve:production"
122 | }
123 | }
124 | }
125 | }
126 | }
127 | },
128 | "defaultProject": "nft-web-app"
129 | }
--------------------------------------------------------------------------------
/src/app/pages/main/create-nft/create-nft.component.html:
--------------------------------------------------------------------------------
1 | {
29 | return this.http
30 | .post(this.apiUrl + 'auth/login', {
31 | email: email,
32 | password: password
33 | })
34 | .pipe(
35 | map((response: Response) => {
36 | this.token = response['tokens']['access']['token'];
37 | this.refresh_token = response['tokens']['refresh']['token'];
38 | let expiresIn = response['tokens']['access']['expires'];
39 | if (
40 | (this.token && (response['user']['role'] === 'user') ||
41 | response['user']['role'] === 'artist')
42 | ) {
43 | // store expiresIn and jwt token in local storage to keep user logged in between page refreshes
44 | localStorage.setItem(
45 | 'user',
46 | JSON.stringify({
47 | expires_in: expiresIn,
48 | token: this.token,
49 | refresh_token: this.refresh_token,
50 | email: response['user']['email'],
51 | name: response['user']['name'],
52 | role: response['user']['role'],
53 | profile_pic: response['user']['profile_pic'],
54 | email_verified_at: response['user']['email_verified_at'],
55 | id: response['user']['id'],
56 | })
57 | );
58 | }
59 | return response;
60 | })
61 | );
62 | }
63 |
64 | register(username: string, email: string, password: string, role: string): Observable {
65 | return this.http
66 | .post(this.apiUrl + 'auth/register', {
67 | email: email,
68 | name: username,
69 | password: password,
70 | role: role,
71 | })
72 | .pipe(
73 | map((response: Response) => {
74 | // register successful if there's a jwt token in the response
75 | return response;
76 | })
77 | );
78 | }
79 |
80 | logout(): Observable {
81 | // clear token remove user from local storage to log user out
82 | console.log(this.refresh_token);
83 | return this.http
84 | .post(this.apiUrl + 'auth/logout', { refreshToken: this.refresh_token })
85 | .pipe(
86 | map((response: Response) => {
87 | console.log(response);
88 | this.token = null;
89 | this.refresh_token = null;
90 | localStorage.removeItem('user');
91 | return response;
92 | })
93 | );
94 | }
95 |
96 | sendPasswordResetEmail(email: string): Observable {
97 | return this.http
98 | .post(this.apiUrl + 'auth/forgot-password', { email: email })
99 | .pipe(
100 | map((response: Response) => {
101 | return response;
102 | })
103 | );
104 | }
105 |
106 | resetPassword(
107 | newPassword: string,
108 | token: string
109 | ): Observable {
110 | return this.http
111 | .post(`${this.apiUrl}auth/reset-password?token=${token}`, {
112 | password: newPassword,
113 | })
114 | .pipe(
115 | map((response: Response) => {
116 | return response;
117 | })
118 | );
119 | }
120 |
121 | emailVerifcation(
122 | token: string
123 | ): Observable {
124 | return this.http
125 | .get(`${this.apiUrl}auth/email-verification/${token}`)
126 | .pipe(
127 | map((response: Response) => {
128 | return response;
129 | })
130 | );
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/app/_components/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
54 |
--------------------------------------------------------------------------------
3 |
4 |
--------------------------------------------------------------------------------
/src/app/pages/main/nft-preview/nft-preview.component.html:
--------------------------------------------------------------------------------
1 |
5 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
15 |
17 | FAQ's
16 |
24 |
77 |
25 |
40 |
41 |
26 |
29 |
30 | What collections are listed on the marketplace?
27 |Only the collections affiliated with Defydefi launchpad are listed on the marketplace.
28 |
31 |
34 |
35 | Can I trade/list NFT to all contracts?
32 |No, only a smart contract affiliated with Defydefi, like Bimp, is eligible.
33 |
36 |
39 | What network is this running?
37 |Binance Smart Chain Network
38 |
42 |
57 |
58 |
43 |
46 |
47 | Can I trade the NFTs that were airdropped to me?
44 |Yes, only if the NFT is affiliated with DefyDefi. NFTs earned outside our platform will not be recognized.
45 |
48 |
51 |
52 | How can I view my nft?
49 |Simply open your wallet's browser, head to NFTmoney.bimp.finance, connect your wallet, and your NFTs will be shown at the bottom panel. To claim, go to Wallet > NFTs > Add NFT > Paste the Address, and copy the NFT ID given on the browser.
50 |
53 |
56 | How can I get NFT?
54 |You can buy NFT at DefyDefi.io and Bimp.Finance, win it through lottery at app.defydefi.io, or get it for free by tuning in to our Social Media giveaways.
55 |
59 |
76 |
60 |
63 |
64 | What currency is used in the marketplace?
61 |ETH is used for trading.
62 |
65 |
68 |
69 | How to start?
66 |Setup your wallet by creating an account and changing the settings to Binance Smart Chain. Here's a tutorial on how to setup BSC on a MetaMask wallet: https://www.facebook.com/100558448943373/posts/121774333488451/ (Uploading right now sa YT 'yung tutorial)
67 |
70 |
73 |
74 |
75 | How to partner with DefyDefi?
71 |Contact us through email info@defydefi.com and attach the proposal, or join us at Telegram t.me/BimpFinance and look for an admin.
72 |
78 |
82 |
83 |
84 |
79 |
81 | Note: Legit Defy staff will neither contact you first nor ask for money. Admins have "will not DM you first" on their names.
80 |
2 |
92 |
93 |
--------------------------------------------------------------------------------
/src/app/_components/header/header.component.css:
--------------------------------------------------------------------------------
1 | ::ng-deep .avatar-content {
2 | margin-left: -12px !important;
3 | border-radius: 8px !important;
4 | align-items: center !important;
5 | width: 40px !important;
6 | height: 40px !important;
7 | }
8 | ::ng-deep .avatar-container {
9 | width: auto !important;
10 | height: auto !important;
11 | }
12 | ::ng-deep .header__profile-btn p {
13 | margin-left: 10px !important;
14 | }
15 |
16 | .search input:focus {
17 | outline: none;
18 | border-color: #66b1ee;
19 | -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
20 | -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
21 | -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
22 | -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
23 | box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
24 | }
25 |
26 | .search input:focus+.results {
27 | display: block
28 | }
29 |
30 | .search .results {
31 | display: none;
32 | position: absolute;
33 | top: 62px;
34 | left: 0;
35 | right: 0;
36 | z-index: 10;
37 | padding: 0;
38 | margin: 0;
39 | border-width: 1px;
40 | border-style: solid;
41 | border-color: #cbcfe2 #c8cee7 #c4c7d7;
42 | border-radius: 3px;
43 | background-color: #fdfdfd;
44 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
45 | }
46 |
47 | .search .results li {
48 | display: block
49 | }
50 |
51 | .search .results li:first-child {
52 | margin-top: -1px
53 | }
54 |
55 | .search .results li:first-child:before,
56 | .search .results li:first-child:after {
57 | display: block;
58 | content: '';
59 | width: 0;
60 | height: 0;
61 | position: absolute;
62 | left: 50%;
63 | margin-left: -5px;
64 | border: 5px outset transparent;
65 | }
66 |
67 | .search .results li:first-child:before {
68 | border-bottom: 5px solid #c4c7d7;
69 | top: -11px;
70 | }
71 |
72 | .search .results li:first-child:after {
73 | border-bottom: 5px solid #fdfdfd;
74 | top: -10px;
75 | }
76 |
77 | .search .results li:first-child:hover:before,
78 | .search .results li:first-child:hover:after {
79 | display: none
80 | }
81 |
82 | .search .results li:last-child {
83 | margin-bottom: -1px
84 | }
85 |
86 | .search .results a {
87 | display: block;
88 | position: relative;
89 | margin: 0 -1px;
90 | padding: 6px 40px 6px 10px;
91 | color: #808394;
92 | font-size: 14px;
93 | font-weight: bolder;
94 | color: black;
95 | border: 1px solid transparent;
96 | border-radius: 3px;
97 | }
98 |
99 | .search .results a span {
100 | font-weight: 200;
101 | font-size: 12px;
102 | color: #807676;
103 | }
104 |
105 | .search .results a:before {
106 | content: '';
107 | width: 18px;
108 | height: 18px;
109 | position: absolute;
110 | top: 50%;
111 | right: 10px;
112 | margin-top: -9px;
113 | background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
114 | }
115 |
116 | .search .results a:hover {
117 | text-decoration: none;
118 | color: #fff;
119 | text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
120 | border-color: #2380dd #2179d5 #1a60aa;
121 | background-color: #338cdf;
122 | }
123 | .search .results a:hover span {
124 | color: white;
125 | }
126 |
127 | :-moz-placeholder {
128 | color: #a7aabc;
129 | font-weight: 200;
130 | }
131 |
132 | ::-webkit-input-placeholder {
133 | color: #a7aabc;
134 | font-weight: 200;
135 | }
136 |
137 | .lt-ie9 .search input {
138 | line-height: 26px
139 | }
--------------------------------------------------------------------------------
/src/app/_components/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { environment } from 'src/environments/environment';
2 | import { Component, Injectable, OnInit } from '@angular/core';
3 | import { UtilityService, AuthenticationService, ConnectService, NftService } from '../../_services';
4 | import { Router } from '@angular/router';
5 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
6 | declare var $: any;
7 | declare let window:any;
8 |
9 | @Injectable({
10 | providedIn: 'root',
11 | })
12 | @Component({
13 | selector: 'app-header',
14 | templateUrl: './header.component.html',
15 | styleUrls: ['./header.component.css'],
16 | })
17 | export class HeaderComponent implements OnInit {
18 | constructor(
19 | private utility: UtilityService,
20 | private authService: AuthenticationService,
21 | private router: Router,
22 | private formBuilder: FormBuilder,
23 | private nftService: NftService,
24 | private connectService: ConnectService,
25 | ) {}
26 |
27 | userName: string;
28 | userPic: string =
29 | JSON.parse(localStorage.getItem('user')) &&
30 | JSON.parse(localStorage.getItem('user'))['profile_pic']
31 | ? environment.IMG_BASE_URL +
32 | JSON.parse(localStorage.getItem('user'))['profile_pic']
33 | : '/assets/img/avatars/avatar.jpg';
34 | userRole: string;
35 | searchTerm: string;
36 | balance: any = 0;
37 | walletAddres: any = '';
38 | searchForm: FormGroup;
39 | searchResults: any = [];
40 |
41 | async ngOnInit() {
42 | console.log(localStorage.getItem('user'));
43 | this.searchForm = this.formBuilder.group({
44 | search: [Validators.required],
45 | });
46 | this.userName = JSON.parse(localStorage.getItem('user'))
47 | ? JSON.parse(localStorage.getItem('user')) ['name']
48 | : '';
49 | this.userRole = JSON.parse(localStorage.getItem('user'))
50 | ? JSON.parse(localStorage.getItem('user'))['role']
51 | : '';
52 |
53 | this.walletAddres = await this.connectService.getAddress();
54 | }
55 | async connectToWallet(){
56 | $('#connect_to_wallet').modal('hide');
57 | this.walletAddres = await this.connectService.getAddress();
58 | };
59 | async ngAfterViewInit() {
60 | // this.walletAddres = await this.connectService.getAddress();
61 | }
62 | connectWallet() {
63 | $('#connect_to_wallet').modal('show');
64 | }
65 |
66 | logoutAction() {
67 | this.authService.logout().subscribe(
68 | (res) => {
69 | this.utility.stopLoader();
70 | this.utility.showSuccessAlert('Success', 'Logout Successfully');
71 | window.location.reload();
72 | },
73 | (error) => {
74 | localStorage.removeItem('user');
75 | this.utility.stopLoader();
76 | this.utility.showErrorAlert('Error', error);
77 | window.location.reload();
78 | }
79 | );
80 | }
81 |
82 | search() {
83 | if (this.searchTerm !== '') {
84 | this.router.navigate(['search', this.searchTerm]);
85 | }
86 | }
87 |
88 | redirect(id) {
89 | console.log(id);
90 |
91 | this.router.navigate(['/marketplace', id]);
92 | }
93 |
94 | setSearchValue(text) {
95 | this.searchTerm = text;
96 | if (text !== '') {
97 | this.searchResult();
98 | } else {
99 | this.searchResults = [];
100 | }
101 | }
102 |
103 | searchResult() {
104 | this.nftService.searchNft(this.searchTerm).subscribe(
105 | (res) => {
106 | this.searchResults = [];
107 | this.searchResults = res;
108 | },
109 | (error) => {
110 | this.utility.showErrorAlert('Error', error);
111 | }
112 | );
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/assets/css/bootstrap-reboot.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Reboot v4.5.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2020 The Bootstrap Authors
4 | * Copyright 2011-2020 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
7 | */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
8 | /*# sourceMappingURL=bootstrap-reboot.min.css.map */
--------------------------------------------------------------------------------
/src/app/pages/main/search-result/search-result.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3 | import { NftService, UtilityService } from '../../../_services';
4 | import { Router, ActivatedRoute } from '@angular/router';
5 | import { environment } from 'src/environments/environment';
6 | @Component({
7 | templateUrl: './search-result.component.html',
8 | styleUrls: ['./search-result.component.css'],
9 | })
10 | export class SearchResultComponent implements OnInit {
11 | constructor(
12 | private nftService: NftService,
13 | private utility: UtilityService,
14 | private formBuilder: FormBuilder,
15 | private activatedRoute: ActivatedRoute
16 | ) {
17 | this.utility.updatePageSEO(
18 | 'NFT Marketplace | Buy and Sell your NFT, and NFT Money. NFT Collections, Crypto artworks.',
19 | 'Buy, Sell and trade your NFTs and NFT Money Secured with blockchain.'
20 | );
21 | this.activatedRoute.params.subscribe((p) => this.getAllNfts());
22 | }
23 |
24 | activeTab = 'grid';
25 | nfts: any = [];
26 | currentDate = new Date();
27 | filteredNfts: any = [];
28 | collectionList: any = [];
29 | selectedCollection: any = [];
30 | filterForm: FormGroup;
31 | imgBaseUrl = environment.IMG_BASE_URL;
32 | p: number = 1;
33 |
34 | ngOnInit(): void {
35 | this.filterForm = this.formBuilder.group({
36 | filterItems: [[]],
37 | sort: ['new'],
38 | });
39 | }
40 |
41 | ngOnChanges(): void {
42 | this.getAllNfts();
43 | }
44 |
45 | getAllNfts() {
46 | var self = this;
47 | this.utility.startLoader();
48 | this.nftService
49 | .searchNft(this.activatedRoute.snapshot.paramMap.get('term'))
50 | .subscribe(
51 | (res) => {
52 | this.utility.stopLoader();
53 | this.nfts = res;
54 | this.filteredNfts = res;
55 | this.getFilterList();
56 | },
57 | (error) => {
58 | this.utility.stopLoader();
59 | this.utility.showErrorAlert('Error', error);
60 | }
61 | );
62 | }
63 |
64 | getFilterList() {
65 | this.nfts.forEach((element) => {
66 | if (!this.collectionList[element.currentOwner.id]) {
67 | this.collectionList[element.currentOwner.id] =
68 | element.currentOwner.name;
69 | }
70 | });
71 | }
72 |
73 | onChangeCategory(event, item: any) {
74 | // Use appropriate model type instead of any
75 | if (this.selectedCollection.indexOf(item) > -1) {
76 | const index = this.selectedCollection.indexOf(item);
77 | if (index > -1) {
78 | this.selectedCollection.splice(index, 1);
79 | }
80 | } else {
81 | this.selectedCollection.push(item);
82 | }
83 | }
84 |
85 | applyFilter() {
86 | this.getFilteredItems();
87 | }
88 |
89 | async getFilteredItems() {
90 | var self = this;
91 | if (this.selectedCollection.length > 0) {
92 | self.filteredNfts = self.nfts.filter((element) => {
93 | return self.selectedCollection.indexOf(element.currentOwner.id) > -1;
94 | });
95 | } else {
96 | self.filteredNfts = self.nfts;
97 | }
98 |
99 | if (this.filterForm.value.sort === 'new') {
100 | self.filteredNfts.sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1));
101 | } else if (this.filterForm.value.sort === 'old') {
102 | self.filteredNfts.sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1));
103 | } else if (this.filterForm.value.sort === 'high') {
104 | self.filteredNfts.sort((a, b) => (a.price < b.price ? 1 : -1));
105 | } else if (this.filterForm.value.sort === 'low') {
106 | await self.filteredNfts.sort((a, b) => (a.price > b.price ? 1 : -1));
107 | }
108 | }
109 |
110 | convertDate(date) {
111 | return new Date(date);
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "align": {
8 | "options": [
9 | "parameters",
10 | "statements"
11 | ]
12 | },
13 | "array-type": false,
14 | "arrow-return-shorthand": true,
15 | "curly": true,
16 | "deprecation": {
17 | "severity": "warning"
18 | },
19 | "eofline": true,
20 | "import-blacklist": [
21 | true,
22 | "rxjs/Rx"
23 | ],
24 | "import-spacing": true,
25 | "indent": {
26 | "options": [
27 | "spaces"
28 | ]
29 | },
30 | "max-classes-per-file": false,
31 | "max-line-length": [
32 | true,
33 | 140
34 | ],
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-console": [
47 | true,
48 | "debug",
49 | "info",
50 | "time",
51 | "timeEnd",
52 | "trace"
53 | ],
54 | "no-empty": false,
55 | "no-inferrable-types": [
56 | true,
57 | "ignore-params"
58 | ],
59 | "no-non-null-assertion": true,
60 | "no-redundant-jsdoc": true,
61 | "no-switch-case-fall-through": true,
62 | "no-var-requires": false,
63 | "object-literal-key-quotes": [
64 | true,
65 | "as-needed"
66 | ],
67 | "quotemark": [
68 | true,
69 | "single"
70 | ],
71 | "semicolon": {
72 | "options": [
73 | "always"
74 | ]
75 | },
76 | "space-before-function-paren": {
77 | "options": {
78 | "anonymous": "never",
79 | "asyncArrow": "always",
80 | "constructor": "never",
81 | "method": "never",
82 | "named": "never"
83 | }
84 | },
85 | "typedef": [
86 | true,
87 | "call-signature"
88 | ],
89 | "typedef-whitespace": {
90 | "options": [
91 | {
92 | "call-signature": "nospace",
93 | "index-signature": "nospace",
94 | "parameter": "nospace",
95 | "property-declaration": "nospace",
96 | "variable-declaration": "nospace"
97 | },
98 | {
99 | "call-signature": "onespace",
100 | "index-signature": "onespace",
101 | "parameter": "onespace",
102 | "property-declaration": "onespace",
103 | "variable-declaration": "onespace"
104 | }
105 | ]
106 | },
107 | "variable-name": {
108 | "options": [
109 | "ban-keywords",
110 | "check-format",
111 | "allow-pascal-case"
112 | ]
113 | },
114 | "whitespace": {
115 | "options": [
116 | "check-branch",
117 | "check-decl",
118 | "check-operator",
119 | "check-separator",
120 | "check-type",
121 | "check-typecast"
122 | ]
123 | },
124 | "component-class-suffix": true,
125 | "contextual-lifecycle": true,
126 | "directive-class-suffix": true,
127 | "no-conflicting-lifecycle": true,
128 | "no-host-metadata-property": true,
129 | "no-input-rename": true,
130 | "no-inputs-metadata-property": true,
131 | "no-output-native": true,
132 | "no-output-on-prefix": true,
133 | "no-output-rename": true,
134 | "no-outputs-metadata-property": true,
135 | "template-banana-in-box": true,
136 | "template-no-negated-async": true,
137 | "use-lifecycle-interface": true,
138 | "use-pipe-transform-interface": true,
139 | "directive-selector": [
140 | true,
141 | "attribute",
142 | "app",
143 | "camelCase"
144 | ],
145 | "component-selector": [
146 | true,
147 | "element",
148 | "app",
149 | "kebab-case"
150 | ]
151 | }
152 | }
153 |
--------------------------------------------------------------------------------
/src/app/pages/main/create-nft/create-nft.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {
3 | UtilityService,
4 | NftService,
5 | ConnectService,
6 | } from '../../../_services';
7 | import { Router } from '@angular/router';
8 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
9 | const IpfsHttpClient = require('ipfs-http-client');
10 | const ipfs = new IpfsHttpClient({
11 | host: 'ipfs.infura.io',
12 | port: 5001,
13 | protocol: 'https',
14 | });
15 | import Swal from 'sweetalert2';
16 |
17 | @Component({
18 | templateUrl: './create-nft.component.html',
19 | styleUrls: ['./create-nft.component.css'],
20 | })
21 | export class CreateNftComponent implements OnInit {
22 | constructor(
23 | private utility: UtilityService,
24 | private formBuilder: FormBuilder,
25 | private router: Router,
26 | private nftService: NftService,
27 | private connectService: ConnectService
28 | ) {}
29 |
30 | createForm: FormGroup;
31 |
32 | ngOnInit(): void {
33 | // intialize form
34 | this.createForm = this.formBuilder.group({
35 | name: [null, [Validators.required]],
36 | description: [null, [Validators.required]],
37 | image: [null, [Validators.required]],
38 | price: [null, [Validators.required]],
39 | category: [null, [Validators.required]],
40 | link: [null],
41 | });
42 | }
43 |
44 | get getCreateForm() {
45 | return this.createForm.controls;
46 | }
47 |
48 | convertDataURIToBinary(dataURI) {
49 | var base64Index = dataURI.indexOf(';base64,') + ';base64,'.length;
50 | var base64 = dataURI.substring(base64Index);
51 | var raw = window.atob(base64);
52 | var rawLength = raw.length;
53 | var array = new Uint8Array(new ArrayBuffer(rawLength));
54 |
55 | for (let i = 0; i < rawLength; i++) {
56 | array[i] = raw.charCodeAt(i);
57 | }
58 | return array;
59 | }
60 |
61 | upload() {
62 | const file = (
3 |
4 |
21 |
22 |
5 |
10 |
11 |
12 |
13 |
14 |
15 |
19 |
20 |
16 |
18 | {{ nft.name }}
17 |
23 |
24 |
90 |
91 |
25 |
31 |
32 |
33 |
34 |
26 | 
27 |
29 |
30 |
35 |
88 |
89 |
36 |
87 |
37 |
40 |
41 | Descriptions
38 | 39 |-
42 |
-
43 | Creator
44 | 45 |48 |
46 | {{ nft?.currentOwner?.name }}
47 |
49 |
59 |
84 |
85 |
86 |
60 |
82 |
83 |
2 |
--------------------------------------------------------------------------------
/src/app/_services/authentication.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
3 | import { Observable } from 'rxjs';
4 | import { map } from 'rxjs/operators';
5 | import { environment } from '../../environments/environment';
6 |
7 | @Injectable()
8 | export class AuthenticationService {
9 | public token: string;
10 | public refresh_token: string;
11 | public headers: HttpHeaders;
12 | public readonly apiUrl = environment.API_BASE_URL;
13 |
14 | constructor(public http: HttpClient) {
15 | // set token if saved in local storage
16 | var currentUser = JSON.parse(localStorage.getItem('user'));
17 | this.token = currentUser && currentUser.token;
18 | this.refresh_token = currentUser && currentUser.refresh_token;
19 | }
20 |
21 | isLoggedIn() {
22 | if (localStorage.getItem('user')) {
23 | return true;
24 | }
25 | return false;
26 | }
27 |
28 | login(email: string, password: string): Observable
3 |
4 |
97 |
5 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
15 |
17 | Create collectible item
16 |
20 |
21 |
22 |
23 |
94 |
95 |
96 |