Skip to content

Instantly share code, notes, and snippets.

View srph's full-sized avatar
🛠️
Building @Stride-Labs Frontend

Kier Borromeo srph

🛠️
Building @Stride-Labs Frontend
View GitHub Profile
@srph
srph / parser.ts
Created November 25, 2022 17:27
Stride: stride.vesting.StridePeriodicVestingAccount
import { Pubkey } from '@cosmjs/amino'
import { Uint64 } from '@cosmjs/math'
import { decodePubkey } from '@cosmjs/proto-signing'
import { assert } from '@cosmjs/utils'
import { stride } from '@stride/proto'
import { BaseAccount, ModuleAccount } from 'cosmjs-types/cosmos/auth/v1beta1/auth'
import {
BaseVestingAccount,
ContinuousVestingAccount,
DelayedVestingAccount,
@srph
srph / index.ts
Created November 15, 2022 05:05
date-fns: Convert duration months to days
import { intervalToDuration, isAfter, eachDayOfInterval, addMonths } from 'date-fns'
const remaining = intervalToDuration({
start: now,
end: target
})
const days =
remaining.months && remaining.days
? remaining.days +
@srph
srph / auth0.tsx
Created November 12, 2022 04:46
auth0-nextjs: Authorize by role
export const getServerSideProps = withPageAuthRequired({
async getServerSideProps(ctx) {
const whitelisted = ['your@email.com']
const session = getSession(ctx.req, ctx.res)
if (!whitelisted.includes(session.user.email)) {
return {
redirect: {
destination: '/logout',
@srph
srph / useMount.ts
Created July 18, 2022 13:01
React: useMount that works with Suspense / Fast Refresh
import { useEffect, useRef } from 'react'
// useEffect that runs on mount and works with Suspense / Fast Refresh
const useMount = (fn: () => void) => {
const isMountedRef = useRef(false)
useEffect(() => {
if (isMountedRef.current) return
isMountedRef.current = true
fn()
@srph
srph / poll.ts
Last active August 9, 2022 15:18
JS: Polling
import { delay } from './time'
export async function poll<T = any>(callback: () => Promise<T>, condition: (t: T) => boolean, ms: number): Promise<T> {
let first = true
while (true) {
const data = first ? await callback() : await delay(ms).then(callback)
if (condition(data) === true) {
return data
@srph
srph / Memoize.tsx
Created July 10, 2022 09:29
React: Inline useMemo
import React, { useState, useEffect } from 'react'
interface MemoizeProps<T, Y extends unknown> {
value: () => T
dependencies: Y[]
}
const Memoize = ({ value, dependencies }) => {
const [state, setState] = useState(value)
@srph
srph / index.ts
Last active June 20, 2022 07:34
Next.js: Active link
const { pathname } = useRouter()
const active: Record<string, boolean> = useMemo(() => {
return [
{ key: 'home', url: '/' },
{ key: 'about', url: '/about' },
{ key: 'contact', url: '/contact' }
].reduce((object, link) => {
object[link.key] = pathname === link.url
return object
@srph
srph / readme.md
Last active May 13, 2022 02:18
React: axios useInterceptor hook

Usage

import React from 'react'
import { useAuthUser } from '~/src/contexts/AuthUser'
import { useInterceptor } from './useInterceptor'

/**
 * Setup axios interceptors to work with auth
 */
@srph
srph / mergeRefs.ts
Created May 10, 2022 13:15
React: merge refs
export function mergeRefs<T>(...refs: Ref<T>[]) {
return (value: T) => {
refs.forEach((ref) => {
if (typeof ref === 'function') {
ref(value)
} else if (ref.current) {
ref.current = value
}
})
}
@srph
srph / Popover.tsx
Last active May 10, 2022 15:47
React: Popover - Fully wrapped Popper component
import React, { useMemo } from 'react'
import ReactDOM from 'react-dom'
import styled from 'styled-components'
import { usePopper } from 'react-popper'
import type { Placement, Offsets } from '@popperjs/core'
import { useStateRef, useUpdateEffect, useDocumentListener, useOutsideClick } from '~/src/hooks'
import { theme } from '~/src/theme'
interface Props {