Skip to content

Commit

Permalink
successfull project
Browse files Browse the repository at this point in the history
  • Loading branch information
Thiendekaco committed Aug 27, 2023
1 parent 6ad8e50 commit 93c8b5c
Show file tree
Hide file tree
Showing 25 changed files with 501 additions and 71 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"ipfs-geoip": "^9.0.1",
"ipfs-http-client": "^60.0.1",
"nft.storage": "^7.1.1",
"phosphor-react": "^1.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.15.0",
Expand Down
Binary file modified public/favicon.ico
Binary file not shown.
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>IPFS CHECKER</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file modified public/logo192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/logo512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 7 additions & 4 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@

import './App.css';
import MainPage from "./pages/mainPage.page";
import MainPage from "./pages/mainPage/mainPage.page";
import { Outlet } from "react-router";
import { CheckRareLimitClass } from "./class/checkRareLimit.class";
import {useEffect} from "react";





function App() {

return (
<div className={'app_content'}>
<Outlet />
</div>
<div className={'app_content'}>
<Outlet />
</div>
);
}

Expand Down
1 change: 1 addition & 0 deletions src/class/checkOnlineGateWay.class.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export class CheckOnlineGateWayClass extends BaseChecked{
}
)
BaseChecked.statusCode === 401 ? this.isAuthentication = true : this.isAuthentication = false;

}catch (error){

}
Expand Down
96 changes: 60 additions & 36 deletions src/class/checkRareLimit.class.ts
Original file line number Diff line number Diff line change
@@ -1,40 +1,64 @@
import { BaseChecked } from "./baseCheck.class";
import { createGatewayHostIpfs } from "../ipfs/createGatewayHostIpfs.ipfs";
import { propsOnCheck } from "../types";
import axios from "axios";
import { CID_TO_TEST_LIMIT_2 } from "../utils/constant";

//
// export class CheckRareLimitClass extends BaseChecked{
// private rareLimit : number;
//
// constructor() {
// super();
// this.rareLimit = 0;
// }
//
//
// getRareLimit(): number {
// return this.rareLimit;
// }
//
//
//
// async onCheck({ gateWayUrl, typeCheck, cid }: propsOnCheck ){
// if(!gateWayUrl|| !typeCheck) {
// return ;
// }else{
// this.urlNFT = createGatewayHostIpfs({gateWayUrl, typeCheck, cid});
// // while(true) {
// // try {
// // setTimeout(async () => {
// // await this.getResponseNFT(this.urlNFT);
// // this.rareLimit += 1;
// // }, 1000)
// // } catch (error) {
// // break;
// // }
// // }
//
// }
// this.setIsLoading(true);
// }
// }

export class CheckRareLimitClass extends BaseChecked{
private _timeResult : number;
private _errorRequest : number = 0;
private _totalRequest : number = 1000;
private isLoop : boolean = true;

setTotalRequest(value: number) {
this._totalRequest = value;
}
getTimeResult(): number {
return this._timeResult;
}

constructor() {
super();
this._timeResult = 0;
}


getErrorRequest(): number {
return this._errorRequest;
}

getTotalRequest(): number {
return this._totalRequest;
}

async checkLimitOfHost(date : number, NFTUrl : string){
try{
await Promise.all([ axios.get(this.urlNFT), axios.get(this.urlNFT), axios.get(NFTUrl), axios.get(NFTUrl)]);
}catch(e){
this._errorRequest ++;
console.log(Date.now(), date)
this._timeResult = Date.now() - date;
this.isLoop = false;
console.log('END', this._errorRequest, this._timeResult);
}
}

async onCheck({ gateWayUrl, typeCheck, cid }: propsOnCheck ){
if(!gateWayUrl|| !typeCheck) {
return ;
}else{
console.log('error', this._timeResult);
this.isLoop = true;
this._errorRequest = 0;
this._timeResult = 0;
const dateStart = Date.now();
this.urlNFT = createGatewayHostIpfs({gateWayUrl, typeCheck, cid});
let arrList = [];
for( let i = 0 ; i < this._totalRequest ; i++){
arrList.push(this.checkLimitOfHost(dateStart, createGatewayHostIpfs({gateWayUrl, typeCheck, cid : CID_TO_TEST_LIMIT_2}, )));
}
await Promise.all(arrList);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const CollectionHostwayComponent = () =>{
const [ showUp, setShowUp ] = useState(false);
useEffect(() => {
setShowUp(false);
console.log(param['*'])
setGateway(GateWay);
setParam_(param['*'] ? Number.parseInt((param['*']?.replace('type', ''))) : 0)
setTimeout(()=>{
Expand All @@ -67,9 +68,9 @@ const CollectionHostwayComponent = () =>{
<> {
showUp && <CollectionHostwayStyles>
<NavigateContainer>
<NavigateFormatHostName to='/type1'>Type 1</NavigateFormatHostName>
<NavigateFormatHostName to='/type2'>Type 2</NavigateFormatHostName>
<NavigateFormatHostName to='/type3'>Type 3</NavigateFormatHostName>
<NavigateFormatHostName to='/type1' isChoide={ param['*'] === 'type1' }>Type 1</NavigateFormatHostName>
<NavigateFormatHostName to='/type2' isChoide={ param['*'] === 'type2' }>Type 2</NavigateFormatHostName>
<NavigateFormatHostName to='/type3' isChoide={ param['*'] === 'type3' }>Type 3</NavigateFormatHostName>
</NavigateContainer>
<LabelContainer>
<Label>HOSTNAME</Label>
Expand Down
22 changes: 20 additions & 2 deletions src/component/collectionHostway/CollectionHostway.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { Link } from "react-router-dom";
import { fadeUp } from "../../styles/animation.styles";


export interface linkWasChoice {
isChoide : boolean
}

export const CollectionHostwayStyles = styled.div`
width: 90%;
display: flex;
Expand All @@ -23,12 +27,26 @@ export const NavigateContainer = styled.div`
`


export const NavigateFormatHostName = styled(Link)`
export const NavigateFormatHostName = styled(Link)<linkWasChoice>`
color: ${props => props.theme.color};
text-decoration: none;
margin-right: 20px;
display: block;
font-family: ${props => props.theme.fontFamily};
&:after {
content: '';
display: block;
margin-top: 8px;
height: 1.5px;
width: ${ props => props.isChoide ? '100%' : '0'};
background: ${ props => props.isChoide ? 'white' : 'transparent'};;
transition: width .3s ease, background-color .3s ease;
}
&:hover:after{
width: 100%;
background: white;
}
`

export const ContentContainer = styled.div`
Expand Down
25 changes: 20 additions & 5 deletions src/component/gateWayCanAccess/gateWayCanAccess.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,21 @@ import { useState, useEffect } from "react";
import { propsOnCheck } from "../../types";
import { CheckOnlineGateWayClass } from "../../class/checkOnlineGateWay.class";
import {
ButtonCheckRateLimit,
CheckCordsStyle,
HostNameItemStyles,
HostNameStyles,
ImgCountryHost,
ImgCountryHostNotFound,
MarginBox, URLShow
MarginBox, RateLimitSpan, URLShow
} from "./gateWayCanAccess.styles";
import { CheckCountryHostClass } from "../../class/checkCountryHost.class";
import { propertiesOfOnCheck } from '../../types';
import { toShort } from "@subwallet/react-ui/es/_util/address";
import {BaseChecked} from "../../class/baseCheck.class";
import {CheckCordsHostClass} from "../../class/checkCords.class";
import {CID_TO_TEST_CORDS} from "../../utils/constant";
import { useNavigate } from "react-router";


export const defaultProperties : propertiesOfOnCheck ={
Expand All @@ -29,6 +31,7 @@ export interface gatewayProps {


const GateWayCanAccess = ( { onCheckProps, index} :gatewayProps )=>{
const navigate = useNavigate();
const [ resultCheckLocation, getResultCheckLocation ] = useState<propertiesOfOnCheck>(defaultProperties);
const [ resultCheckAccess, getResultCheckAccess ] = useState<propertiesOfOnCheck>(defaultProperties);
const [ isUrlCanBeAccess, setIsUrlAccess ] = useState(false);
Expand All @@ -47,7 +50,7 @@ const GateWayCanAccess = ( { onCheckProps, index} :gatewayProps )=>{
}
BaseChecked.gatewayArr++;
}
}
}

const getLocationOfHostName = async ()=>{
await gateWayCheckLocation.onCheck({ gateWayUrl: onCheckProps.gateWayUrl, typeCheck: onCheckProps.typeCheck, });
Expand All @@ -62,6 +65,15 @@ const GateWayCanAccess = ( { onCheckProps, index} :gatewayProps )=>{
const openWindowNFT = ()=>{
window.open(resultCheckAccess.data)
}
const navigateToCheckLimitPage = () => {
if(gateWayCheckAccess.getStateIsOnline()){
if(BaseChecked.gatewayArr === 0){
BaseChecked.gatewayArrIndex0 = gateWayCheckAccess.getLinkImage();
}
BaseChecked.gatewayArr++;
}
navigate(`/${onCheckProps.gateWayUrl}+${onCheckProps.typeCheck}`);
}


useEffect(() => {
Expand All @@ -79,17 +91,20 @@ const GateWayCanAccess = ( { onCheckProps, index} :gatewayProps )=>{
}, [gateWayCheckAccess.getLinkImage(), gateWayCheckLocation.getLinkImage(), onCheckProps.typeCheck, isCords.getHadCords()]);



return (
<>
{
isUrlCanBeAccess && <HostNameItemStyles onClick = {()=>openWindowNFT()}>
isUrlCanBeAccess && <HostNameItemStyles >
{ resultCheckAccess.isLoading && <MarginBox /> }
< HostNameStyles >{toShort(onCheckProps.gateWayUrl.replace('*', ''), 25, 0)}</HostNameStyles>
< HostNameStyles onClick = {()=>openWindowNFT()}>{toShort(onCheckProps.gateWayUrl.replace('*', ''), 25, 0)}</HostNameStyles>
<div style={{flexBasis : '300px', flexShrink: '1', flexGrow: '0', maxWidth:'500px'}}>
{ resultCheckLocation.data ? <ImgCountryHost src={ resultCheckLocation.data } alt={ resultCheckLocation.data }/> : <ImgCountryHostNotFound /> }
</div>
<CheckCordsStyle>{ isCords_ && '*' }</CheckCordsStyle>
<CheckCordsStyle>{ isCords_ ? '*' : <MarginBox />}</CheckCordsStyle>
<URLShow>{ resultCheckAccess.data }</URLShow>
<ButtonCheckRateLimit onClick = {navigateToCheckLimitPage}>Rate Limit</ButtonCheckRateLimit>

</HostNameItemStyles>
}
</>
Expand Down
30 changes: 30 additions & 0 deletions src/component/gateWayCanAccess/gateWayCanAccess.styles.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { styled } from "styled-components";
import { slideDown } from "../../styles/animation.styles";
import { Link } from "react-router-dom";


export interface propsIsLoading {
Expand Down Expand Up @@ -76,9 +77,38 @@ export const URLShow = styled.div`
font-family: ${props => props.theme.fontFamily};
font-weight: 300;
flex-basis: 400px;
margin: 17px 0 0 170px;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 50px;
`

export const ButtonCheckRateLimit = styled.div`
flex-basis: 100px;
height: 90%;
font-family: ${props => props.theme.fontFamily};
color: ${props => props.theme.color};
background-color: black;
text-decoration: none;
text-align: center;
margin: 3px 0 0 190px;
border-radius: 10px;
padding-top: 15px;
opacity: 1;
cursor: pointer;
&:hover{
opacity: 0.5;
}
`
export const RateLimitSpan = styled.span`
font-family: ${props => props.theme.fontFamily};
color: ${props => props.theme.color};
font-weight: 300;
flex-basis: 200px;
flex-shrink: 0;
white-space: nowrap;
margin: 19px 0 0 0 ;
`
10 changes: 5 additions & 5 deletions src/component/headerContent/HeaderContent.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ const HeaderContentComponent = ()=>{
}, [ param ]);

setTimeout(()=>{
setCounter(BaseChecked.gatewayArr)
setLinkNFTImage(BaseChecked.gatewayArrIndex0)
}, 4500)
setCounter(BaseChecked.gatewayArr);
setLinkNFTImage(BaseChecked.gatewayArrIndex0);
}, 5500)
return(
<HeaderContentStyles>
<TitleHeaderContainerStyle>
Expand All @@ -48,12 +48,12 @@ const HeaderContentComponent = ()=>{
<InformationItem image={'false'}>
Can Connect
<SpanInformation>
{ counter }
{ counter /2 }
</SpanInformation>
</InformationItem>
<InformationItem image={'true'}>
NFT Image
{linkNFTImage !== '' ? <ImageNFT src={linkNFTImage} /> : <NotFoundImageNFT /> }
{ linkNFTImage !== '' ? <ImageNFT src={linkNFTImage} /> : <NotFoundImageNFT /> }
</InformationItem>
</InformationContent>
</HeaderContentStyles>
Expand Down
7 changes: 4 additions & 3 deletions src/component/headerContent/HeaderContent.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const InformationItem = styled.div<isImage>`
animation: ${ slideDown } ease-in-out 0.3s;
`
export const ImageNFT = styled.img`
width: 30%;
width: 170px;
height: 100%;
margin-top: 10px;
object-fit: cover;
Expand All @@ -58,8 +58,8 @@ export const ImageNFT = styled.img`
}
`
export const NotFoundImageNFT = styled.div`
width: 30%;
height : 100%;
width: 170px;
height: 100%;
margin-top: 10px;;
border-radius: 20px;
background-color: ${ props => props.theme. backgroundColorCollection}; ;
Expand All @@ -73,4 +73,5 @@ export const SpanInformation = styled.span`
white-space: nowrap;
margin: 20px 0 0 0;
animation : ${ fadeUp } ease-in-out 0.3s
`
Loading

0 comments on commit 93c8b5c

Please sign in to comment.