geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wallet screen

Browse Source
This commit is contained in:
João Geonizeli
2021-08-11 20:51:42 -03:00
parent 38b60ca0fa
commit a057931c51
19 changed files with 656 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/src/Routes.tsx
View File

@@ -2,14 +2,17 @@ import type { FC } from "react";
import React from "react";
import { Switch, Route } from "react-router-dom";
import { Home } from "./pages";
import { Home, Wallet } from "./pages";
export const Routes: FC = () => {
return (
<Switch>
<Route path="/">
<Route exact path="/">
<Home />
</Route>
<Route exact path="/wallet">
<Wallet />
</Route>
</Switch>
);
};

4
app/javascript/src/components/SideNav.tsx
View File

@@ -14,10 +14,6 @@ const MenuItems: MenuItem[] = [
label: "Início",
path: "/",
},
{
label: "Stake",
path: "/stake",
},
{
label: "Carteira",
path: "/wallet",

94
app/javascript/src/pages/Wallet/Wallet.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { graphql } from "babel-plugin-relay/macro";
import type { FC } from "react";
import React from "react";
import { useLazyLoadQuery } from "react-relay";
import { tokens } from "../../constants/pancake/Tokens";
import type { WalletQuery } from "./__generated__/WalletQuery.graphql";
export const Wallet: FC = () => {
const { balances } = useLazyLoadQuery<WalletQuery>(
graphql`
query WalletQuery {
balances {
nodes {
id
amount
currency {
name
}
}
}
}
`,
{}
);
const tokensList = Object.values(tokens);
return (
<div className="flex flex-col h-full w-full overflow-x-hidden mt-16">
<div className="container mx-auto px-4 sm:px-8 max-w-3xl">
<div className="py-8">
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
<div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
<table className="min-w-full leading-normal">
<thead>
<tr>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Moeda
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Saldo
</th>
</tr>
</thead>
<tbody>
{balances.nodes?.map((balance) => {
const token = tokensList.find(
({ symbol }) => symbol === balance?.currency.name
);
return (
<tr key={balance?.id}>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<div className="flex items-center">
<div className="flex-shrink-0">
<a href="/" className="block relative">
<img
alt="profil"
src={`https://pancakeswap.finance/images/tokens/${token?.address["56"]}.svg`}
className="mx-auto object-cover rounded-full h-10 w-10 "
/>
</a>
</div>
<div className="ml-3">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.currency.name}
</p>
</div>
</div>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.amount}
</p>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
};

165
app/javascript/src/pages/Wallet/__generated__/WalletQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,165 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from "relay-runtime";
export type WalletQueryVariables = {};
export type WalletQueryResponse = {
readonly balances: {
readonly nodes: ReadonlyArray<{
readonly id: string;
readonly amount: number;
readonly currency: {
readonly name: string;
};
} | null> | null;
};
};
export type WalletQuery = {
readonly response: WalletQueryResponse;
readonly variables: WalletQueryVariables;
};
/*
query WalletQuery {
balances {
nodes {
id
amount
currency {
name
id
}
}
}
}
*/
const node: ConcreteRequest = (function(){
var v0 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "WalletQuery",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BalanceConnection",
"kind": "LinkedField",
"name": "balances",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Balance",
"kind": "LinkedField",
"name": "nodes",
"plural": true,
"selections": [
(v0/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
(v2/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "WalletQuery",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BalanceConnection",
"kind": "LinkedField",
"name": "balances",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Balance",
"kind": "LinkedField",
"name": "nodes",
"plural": true,
"selections": [
(v0/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
(v2/*: any*/),
(v0/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "6b8d0c664bd2d9df4d323c19c4a823a5",
"id": null,
"metadata": {},
"name": "WalletQuery",
"operationKind": "query",
"text": "query WalletQuery {\n balances {\n nodes {\n id\n amount\n currency {\n name\n id\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = '428f4f1ab769f9056dd38ec641a30733';
export default node;

1
app/javascript/src/pages/Wallet/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Wallet";

1
app/javascript/src/pages/index.ts
View File

@@ -1 +1,2 @@
export * from "./Home";
export * from "./Wallet";

1
app/javascript/src/pages/index.tsx
View File

@@ -1 +0,0 @@
export * from "./Home";