flip/near-bos-gateway
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/near-bos-gateway.git synced 2026-02-06 03:07:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

basic Flipside skin

Browse Source
This commit is contained in:
Sebastian Ruiz 2023-07-27 15:17:23 -03:00
parent c7dd4d67db
commit 6bb494b102
19 changed files with 79 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
README.md
View File

@ -1,84 +1,18 @@
# Browser
# BOS
A framework for reusable components to render and modify SocialDB by Near Social.
A Flipside flavored BOS gateway
[https://docs.near.org/bos](https://docs.near.org/bos)
## Setup & Development
Initialize repo:
```
yarn
```
Start development version:
```
yarn start
```
## Widget example
Profile view
```jsx
let accountId = props.accountId || "eugenethedream";
let profile = socialGetr(`${accountId}/profile`);
(
<div>
<img src={profile.image.url}/>
<span>{profile.name}</span> <span>(@{accountId})</span>
</div>
);
```
Profile editor
```jsx
let accountId = context.accountId;
if (!accountId) {
return "Please sign in with NEAR wallet";
}
const profile = socialGetr(`${accountId}/profile`);
if (profile === null) {
return "Loading";
}
initState({
name: profile.name,
url: profile.image.url,
});
const data = {
profile: {
name: state.name,
image: {
url: state.url,
},
},
};
return (
<div>
<div>account = {accountId}</div>
<div>
Name:
<input type="text" value={state.name} />
</div>
<div>
Image URL:
<input type="text" value={state.url} />
</div>
<div>Preview</div>
<div>
<img src={state.url} alt="profile image" /> {state.name}
</div>
<div>
<CommitButton data={data}>Save profile</CommitButton>
</div>
</div>
);
```

2
package.json
View File

@ -1,5 +1,5 @@
{
"name": "frontend",
"name": "flipside-bos-gateway",
"version": "0.12.3",
"homepage": "/",
"private": true,

2
public/CNAME
View File

@ -1 +1 @@
near.social
flipside-bos-gateway

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

26
public/index.html
View File

@ -2,27 +2,27 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.png" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
<!-- <meta name="description" content="Social data protocol built on NEAR" /> -->
<!-- <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@NearSocial_" />
<meta name="twitter:image" content="https://near.social/assets/logo.png" />
<meta property="og:image" content="https://near.social/assets/logo.png" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Near Social" /> -->
<!-- <meta
property="og:description"
content="Social data protocol built on NEAR"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@NearSocial_">
<meta name="twitter:image" content="https://near.social/assets/logo.png">
<meta property="og:image" content="https://near.social/assets/logo.png">
<meta property="og:type" content="website">
<meta property="og:title" content="Near Social" />
<meta property="og:description" content="Social data protocol built on NEAR" />
<link rel="apple-touch-icon" href="favicon.png" />
/> -->
<link rel="apple-touch-icon" href="favicon.ico" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="manifest.json" />
<title>Near Social</title>
<title>Flipside BOS Gateway</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

4
public/manifest.json
View File

@ -3,9 +3,9 @@
"name": "Near Social",
"icons": [
{
"src": "favicon.png",
"src": "favicon.ico",
"sizes": "1024x1024",
"type": "image/png"
"type": "image/x-icon"
}
],
"start_url": ".",

2
src/App.js
View File

@ -32,7 +32,7 @@ import { NetworkId, Widgets } from "./data/widgets";
import { useEthersProviderContext } from "./data/web3";
export const refreshAllowanceObj = {};
const documentationHref = "https://social.near-docs.io/";
const documentationHref = "https://docs.near.org/bos";
function App(props) {
const [connected, setConnected] = useState(false);

20
src/components/icons/FlipsideLogo.js Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
export function FlipsideLogo() {
return (
<svg
width="29"
height="20"
viewBox="0 0 1381 1466"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M690.25 1465.71C634.766 1465.71 580.704 1451.49 530.91 1424.45C419.941 1361.86 271.983 1277.92 159.592 1213.9C61.427 1158.41 0.251953 1054.56 0.251953 943.59V522.478C0.251953 411.509 61.427 307.654 159.592 252.169C270.56 189.572 418.519 105.634 530.91 41.6133C629.075 -13.8711 750.002 -13.8711 849.589 41.6133C960.558 104.211 1108.52 188.149 1220.91 252.169C1269.28 279.2 1307.69 317.613 1334.72 361.715L848.167 641.983C751.425 697.467 691.673 802.745 690.25 910.869V1465.71ZM1378.83 869.611V942.167C1378.83 1053.14 1317.65 1156.99 1219.49 1212.48C1108.52 1275.07 960.558 1359.01 848.167 1423.03C838.208 1428.72 826.827 1434.41 816.868 1438.68V1307.8C816.868 1242.35 853.858 1179.75 909.342 1147.03C1048.76 1065.94 1188.19 987.693 1327.61 906.6C1346.1 896.642 1363.18 883.838 1378.83 869.611ZM1377.4 482.643C1378.82 495.447 1380.25 509.674 1380.25 522.478V597.88C1380.25 680.395 1334.72 757.219 1263.59 798.477C1124.17 879.57 984.744 957.817 845.322 1038.91C835.363 1044.6 826.827 1050.29 818.291 1057.4V910.869C818.291 845.426 855.28 781.405 912.187 748.683L1377.4 482.643Z"
fill="white"
/>
</svg>
);
}

3
src/components/icons/Flipside_icon_white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1381" height="1466" viewBox="0 0 1381 1466" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M690.25 1465.71C634.766 1465.71 580.704 1451.49 530.91 1424.45C419.941 1361.86 271.983 1277.92 159.592 1213.9C61.427 1158.41 0.251953 1054.56 0.251953 943.59V522.478C0.251953 411.509 61.427 307.654 159.592 252.169C270.56 189.572 418.519 105.634 530.91 41.6133C629.075 -13.8711 750.002 -13.8711 849.589 41.6133C960.558 104.211 1108.52 188.149 1220.91 252.169C1269.28 279.2 1307.69 317.613 1334.72 361.715L848.167 641.983C751.425 697.467 691.673 802.745 690.25 910.869V1465.71ZM1378.83 869.611V942.167C1378.83 1053.14 1317.65 1156.99 1219.49 1212.48C1108.52 1275.07 960.558 1359.01 848.167 1423.03C838.208 1428.72 826.827 1434.41 816.868 1438.68V1307.8C816.868 1242.35 853.858 1179.75 909.342 1147.03C1048.76 1065.94 1188.19 987.693 1327.61 906.6C1346.1 896.642 1363.18 883.838 1378.83 869.611ZM1377.4 482.643C1378.82 495.447 1380.25 509.674 1380.25 522.478V597.88C1380.25 680.395 1334.72 757.219 1263.59 798.477C1124.17 879.57 984.744 957.817 845.322 1038.91C835.363 1044.6 826.827 1050.29 818.291 1057.4V910.869C818.291 845.426 855.28 781.405 912.187 748.683L1377.4 482.643Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

28
src/components/icons/NearSocialLogo.js
View File

@ -1,28 +0,0 @@
import React from "react";
export function NearSocialLogo() {
return (
<svg
width="29"
height="20"
viewBox="0 0 29 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55396 17.509L2 9.99996L9.55396 2.49097"
stroke="#3D7FFF"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.536 2.49097L27 9.99996L19.536 17.509"
stroke="#3D7FFF"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

39
src/components/navigation/Logotype.js
View File

File diff suppressed because one or more lines are too long

4
src/components/navigation/mobile/Navigation.js
View File

@ -2,7 +2,7 @@ import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { MobileMenuButton } from "./MobileMenuButton";
import { NearSocialLogo } from "../../icons/NearSocialLogo";
import { FlipsideLogo } from "../../icons/FlipsideLogo";
import { NotificationWidget } from "../NotificationWidget";
import { SignInButton } from "../SignInButton";
@ -49,7 +49,7 @@ export function Navigation(props) {
currentPage={props.currentPage}
/>
<Link to="/" className="logo-link">
<NearSocialLogo />
<FlipsideLogo />
</Link>
{props.signedIn ? (
<NotificationWidget

2
src/data/web3.js
View File

@ -6,7 +6,7 @@ import walletConnectModule from "@web3-onboard/walletconnect";
import ledgerModule from "@web3-onboard/ledger";
import { ethers } from "ethers";
import ls from "local-storage";
import icon from "../images/near_social_icon.svg";
import icon from "../images/flipside_icon_white.svg";
const web3onboardKey = "web3-onboard:connectedWallets";

3
src/images/flipside_icon_white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="331" height="203" viewBox="0 0 1381 1466" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M690.25 1465.71C634.766 1465.71 580.704 1451.49 530.91 1424.45C419.941 1361.86 271.983 1277.92 159.592 1213.9C61.427 1158.41 0.251953 1054.56 0.251953 943.59V522.478C0.251953 411.509 61.427 307.654 159.592 252.169C270.56 189.572 418.519 105.634 530.91 41.6133C629.075 -13.8711 750.002 -13.8711 849.589 41.6133C960.558 104.211 1108.52 188.149 1220.91 252.169C1269.28 279.2 1307.69 317.613 1334.72 361.715L848.167 641.983C751.425 697.467 691.673 802.745 690.25 910.869V1465.71ZM1378.83 869.611V942.167C1378.83 1053.14 1317.65 1156.99 1219.49 1212.48C1108.52 1275.07 960.558 1359.01 848.167 1423.03C838.208 1428.72 826.827 1434.41 816.868 1438.68V1307.8C816.868 1242.35 853.858 1179.75 909.342 1147.03C1048.76 1065.94 1188.19 987.693 1327.61 906.6C1346.1 896.642 1363.18 883.838 1378.83 869.611ZM1377.4 482.643C1378.82 495.447 1380.25 509.674 1380.25 522.478V597.88C1380.25 680.395 1334.72 757.219 1263.59 798.477C1124.17 879.57 984.744 957.817 845.322 1038.91C835.363 1044.6 826.827 1050.29 818.291 1057.4V910.869C818.291 845.426 855.28 781.405 912.187 748.683L1377.4 482.643Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
src/images/near_social_combo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 9.0 KiB

4
src/images/near_social_icon.svg
View File

@ -1,4 +0,0 @@
<svg width="331" height="203" viewBox="0 0 331 203" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M107.137 185L18 101.5L107.137 18" stroke="#3D7FFF" stroke-width="35" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M224.924 18L313 101.5L224.924 185" stroke="#3D7FFF" stroke-width="35" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 362 B

30
src/pages/ViewPage.js
View File

@ -4,34 +4,6 @@ import { useParams } from "react-router-dom";
import { useQuery } from "../hooks/useQuery";
export default function ViewPage(props) {
const { widgetSrc } = useParams();
const query = useQuery();
const [widgetProps, setWidgetProps] = useState({});
const src = widgetSrc || props.widgets.default;
const setWidgetSrc = props.setWidgetSrc;
const viewSourceWidget = props.widgets.viewSource;
useEffect(() => {
setWidgetProps(Object.fromEntries([...query.entries()]));
}, [query]);
useEffect(() => {
setTimeout(() => {
setWidgetSrc(
src === viewSourceWidget && query.get("src")
? {
edit: query.get("src"),
view: null,
}
: {
edit: src,
view: src,
}
);
}, 1);
}, [src, query, setWidgetSrc, viewSourceWidget]);
return (
<div className="container-xl">
<div className="row">
@ -42,7 +14,7 @@ export default function ViewPage(props) {
paddingTop: "var(--body-top-padding)",
}}
>
<Widget key={src} src={src} props={widgetProps} />{" "}
<p>TBD</p>
</div>
</div>
</div>

2
webpack.config.js
View File

@ -81,7 +81,7 @@ module.exports = function (env) {
}),
new HTMLWebpackPlugin({
template: `${paths.publicPath}/index.html`,
favicon: `${paths.publicPath}/favicon.png`,
favicon: `${paths.publicPath}/favicon.ico`,
robots: `${paths.publicPath}/robots.txt`,
}),
new webpack.ProgressPlugin(),